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

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

        return this.each(function() {
            var div = $(this), ul = $("ul", div);
            var li = $("li", ul), itemLength = li.size();
            var divMain = '#'+div.parent().parent().attr('id');

            if(o.mainDiv == ''){
                o.mainDiv = '#'+div.parent().parent().attr('id');                
            }
            
            if(divMain == ''){ // for some cases the main div is specified
                divMain = o.mainDiv;
            }

            $(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 t =  $("ul li", divMain).size();
                var v = $("ul li:visible", divMain).size();
                    
                if(disp == 'show'){
                    if(v < t){
                        $("ul li:nth("+(v)+")", divMain).fadeIn(500);
                    }
                    if($(o.btnPrev).hasClass(iconMinusDisabled)){
                        $(o.btnPrev, divMain).removeClass(iconMinusDisabled).addClass(iconMinus);
                    }
                    //alert(v + ' : ' + itemLength)
                    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", divMain).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)+")", divMain).hide();                       
                    }
                    if(v-1 <= 2){ // disable this link
                        $(o.btnPrev, divMain).removeClass(iconMinus).addClass(iconMinusDisabled);
                    }
                    //alert($(o.btnNext).hasClass(class'));
                    
                    if($(o.btnNext).hasClass(iconPlusDisabled)){
                        $(o.btnNext, divMain).removeClass(iconPlusDisabled).addClass(iconPlus);
                    }
                    if($(o.btnAll).hasClass(iconAllDisabled)){
                        $(o.btnAll, divMain).removeClass(iconAllDisabled).addClass(iconAll);
                    }
                    
                }
            }
        });
    }
})(jQuery);