(function($){
    $.fn.showmore = function(o) {
        o = $.extend({
            btnPrev: null,
            btnNext: null,
            btnAll: null,            
            mainDiv: '',
            speed: 200,
            easing: null,

            visible: 4,
            minVisible:2,
            start: 0,
            scroll: 1
        }, o || {});

        return this.each(function() {
            var div = $(this), ul = $("ul", div);            
            var divMain = '#'+div.parent().parent().parent().parent().parent().attr('id');
            
            var li = $("li", ul), itemLength = li.size();
            
            //            $(li).each(function(index){
            //                if(index >= o.visible){
            //                    $(this).hide();
            //                }
            //            });
            
            
            $(o.btnNext, divMain).click(function() {
                renderItem('show', divMain);
            });            
            
            $(o.btnPrev, divMain).click(function() {                
                renderItem('hide', divMain);
            });

            $(o.btnAll, divMain).click(function() {
                renderItem('show-all', divMain);
            });

            //            var iconPlus = 'icon-plus';
            //            var iconMinus = 'icon-minus';
            //            var iconAll = 'icon-all';
            //
            //            var iconPlusDisabled = 'icon-plus-gray';
            //            var iconMinusDisabled = 'icon-minus-gray';
            //            var iconAllDisabled = 'icon-all-gray';

            // function to custom animatedly render the height
            function renderItem(disp, divMain){
                var ulDiv = divMain + ' .show-more'
                var t =  $("ul li", ulDiv).size();
                var v = $("ul li:visible", ulDiv).size();
                
                if(disp == 'show'){
                    if(v < t){
                        $("ul li:nth("+(v)+")", ulDiv).fadeIn(500);
                    }
                //                    if($(o.btnPrev, divMain).hasClass(iconMinusDisabled)){
                //                        $(o.btnPrev, divMain).removeClass(iconMinusDisabled).addClass(iconMinus);
                //                    }
                //                    if(v == itemLength-1){ // disable this link
                //                        $(o.btnNext, divMain).removeClass(iconPlus).addClass(iconPlusDisabled);
                //                        $(o.btnAll, divMain).removeClass(iconAll).addClass(iconAllDisabled);
                //                    }
                }else if(disp == 'show-all'){
                    $("ul li", ulDiv).fadeIn(500);
                    
                //                    $(o.btnAll, divMain).removeClass(iconAll).addClass(iconAllDisabled);
                //                    $(o.btnNext, divMain).removeClass(iconPlus).addClass(iconPlusDisabled);
                //                    $(o.btnPrev, divMain).removeClass(iconMinusDisabled).addClass(iconMinus);
                }else{
                    if(v > 2){                        
                        //$("ul li:nth("+o.visible+")", divMain).fadeOut();
                        $("ul li:nth("+(v-1)+")", ulDiv).hide();
                    }
                //if(v-1 <= 2){ // disable this link
                //$(o.btnPrev, divMain).removeClass(iconMinus);
                //}

                    
                //if($(o.btnNext, divMain).hasClass(iconPlusDisabled)){
                // $(o.btnNext, divMain).addClass(iconPlus);
                //}
                //if($(o.btnAll, divMain).hasClass(iconAllDisabled)){
                //$(o.btnAll, divMain).addClass(iconAll);
                //}
                }
            }
        });
    }
})(jQuery);