(function($) {
    
    
    $.fn.paged = function(p) {
        
        var p = $.extend({
            columns: 3,
            rows: 2,
            itemsPerPage: 6,
            template: '',
            headerTemplate: '<div>${currPage} of ${pageTotal}</div>',
            url:'',
            currPage: 1,
            type:'GET', 
            data:[],
            cellpadding:10,
            cellspacing:0
        }, p);
	    
	    return this.each(function() {
	        
            p.pageSize = (p.rows * p.columns);
	        
	        var loaded = [];
	        
            function mycarousel_initCallback(carousel, state) {
                
                makeRequest(carousel, p.currPage);
                
            }
            
            
            var makeRequest = function (carousel, pageIndex) {
                if(!loaded[pageIndex]) {
                    carousel.lock();
                    var d = $.extend({start: (pageIndex - 1) * p.pageSize, limit: p.pageSize}, p.data);
                    if(p.type == 'GET') {
                        $.getJSON(p.url,d, function(JSON) { addPage(carousel, JSON.data,pageIndex,JSON.total) });
                    } else {
                        $.post( p.url,d, function(JSON) { addPage(carousel, JSON.data,pageIndex,JSON.total) }, "json") ; 
                    }
				}
		    }
            
            var addPage = function(carousel, d, idx, total) {
                
                if(total == 0) {
                    
                }
                
                loaded[idx] = true;
                
                p.total = total;
                p.pageTotal = Math.ceil(p.total / p.pageSize);
                carousel.last = p.pageTotal;
                carousel.size(p.pageTotal);
                
                if(d.length > 0) {
                    
                    
                    var page = '<table cellpadding="' + p.cellpadding  + '" cellspacing="' + p.cellspacing + '" width="100%">';
    	            
    	            for(var i = 0; i < d.length; i++) {  
                        
                        var t = $.template(p.template);
                        var html = t.apply(d[i]);
                       
                        if(i % p.columns == 0) {
                            page += '<tr>';
                        }
                        
                        page += ('<td>' + html + '</td>');
                        
                        if((i+1) % p.columns == 0) {
                            page += '</tr>';
                        }             
                        
                    }
                    
                    page += '</table>';
                    carousel.add(idx, page);
                    
                    if(!loaded[p.currPage + 1] && p.currPage < p.pageTotal) {
                        makeRequest(carousel, (p.currPage + 1));
                    }
                    
                    
                } else {
                    carousel.last = p.currPage;
                    carousel.size(p.currPage);
                }
                
                carousel.unlock();
                carousel.reload();
                                
                
                var headerData = $.extend({total:p.total,currPage:p.currPage,pageTotal:p.pageTotal}, p.data);
                var h = $.template(p.headerTemplate);
                var header = h.apply(headerData);
                    
                obj.find('.headerHolder').html(header);
            }		    

            var obj = $(this).html('<div class="headerHolder"></div><ul></ul>');
            
            function mycarousel_itemFirstInCallback(carousel, obj, idx, action) {
            
                p.currPage = idx;
                
                if(!loaded[p.currPage]) {
                    makeRequest(carousel, (p.currPage));
                } else {
                
                    if(!loaded[p.currPage + 1] && p.currPage < p.pageTotal) {
                        makeRequest(carousel, (p.currPage + 1));
                    }
                }
                
            }
            
            p.carousel = $(this).find('ul:first').jcarousel({
                scroll: 1,
                visible: 1,
                itemLoadCallback: mycarousel_initCallback,
                itemFirstInCallback: mycarousel_itemFirstInCallback,
                size:0
            });
            
	    });
	}
	
})($);