(function($) {
    
    
    $.fn.moreBox = function(options){
        
        var defaults = {
            zIndex: 3000,
            moreClass: 'jmore',
            numberToShow: 6
        };
        
	    $.extend(defaults, options);
	    
	    return this.each(function() {
            // setup our css parameters on the element
            
            $(this).css({
                display:'block',
                position: 'relative',
                overflow: 'hidden',
                zIndex: defaults.zIndex   
            });
            
    	    
	        // get current height
    	    
	        var fullHeight = $(this).height();
    	   
	        // set the height
    	    
	        var children = $(this).children();
    	    
        	    
	        if(children.size() > defaults.numberToShow) {
    	    
    	    
                // add the more button
	            var more = '<div class="' + defaults.moreClass + '"></div>';
	            $(this).append(more);
    	    
	            var newHeight = 0;
        	    
	            for(var i = 0; i < children.size() && i < defaults.numberToShow; i++) {
	                newHeight += $(children[i]).height();
	            }
        	    
	            $(this).height(newHeight);
        	    
	            var moreElement = $(this).children('.' + defaults.moreClass + ':first');
        	    
	            var l = ($(this).innerWidth() - $(moreElement).width());
	            var t = ($(this).innerHeight() - $(moreElement).height());
            	    
                moreElement.css({left: l, top: t, zIndex:defaults.zIndex + 1});	  
        	    	    
	            $(moreElement).click(function() {
	                $(this).parent().animate({
	                    height: fullHeight
	                    }, 300);
	                $(this).hide();
        	        
	            });
	        } 
	        
        	
	    });
	   
    }


})(jQuery);