(function($){

// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){
	
	// If no options were passed, create an empty opts object
	if(!opts) opts = {};
	
	var resultsPerPage = (opts.perPage || 3), 
        timeout = (opts.timeout || 0);
	
	// The plugin works best for unordered lists, althugh ols would do just as well:
	var ul = this;
	var li = ul.find('li');
	
	li.each(function(){
		// Calculating the height of each li element, and storing it with the data method:
		var el = $(this);
		el.data('height',el.outerHeight(true));
	});
	
	// Calculating the total number of pages:
	var pagesNumber = Math.ceil(li.length/resultsPerPage);
	
	// If the pages are less than two, do nothing:
	if(pagesNumber<2) return this;

	// Creating the controls div:
	var swControls = $('<div class="swControls">');
	
	for(var i=0;i<pagesNumber;i++)
	{
		// Slice a portion of the lis, and wrap it in a swPage div:
		li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
		var e = $('<a href="#" class="swShowPage">').html(i+1);
        e.data('i', i);
		// Adding a link to the swControls div:
		swControls.append(e);
	}

	ul.append(swControls);
	
	var maxHeight = 0;
	var totalWidth = 0;
	
	var swPage = ul.find('.swPage');
	swPage.each(function(){
		
		// Looping through all the newly created pages:
		
		var elem = $(this);

		var tmpHeight = 0;
		elem.find('li').each(function(){tmpHeight+=$(this).data('height');});
		elem.find('img').css({'display': 'inline-block'});

		if(tmpHeight>maxHeight)
			maxHeight = tmpHeight;

		totalWidth+=elem.outerWidth();
		
		elem.css('float','left').width(ul.width());
	});
	
	swPage.wrapAll('<div class="swSlider" />');
	
	// Setting the height of the ul to the height of the tallest page:
	ul.height(maxHeight);
	
	var swSlider = ul.find('.swSlider');
	swSlider.append('<div class="clear" />').width(totalWidth);

	var hyperLinks = ul.find('a.swShowPage');
	
	hyperLinks.click(function(e){
        if (ul.data('timeout')) {
            clearTimeout(ul.data('timeout'));
        }
		// If one of the control links is clicked, slide the swSlider div 
		// (which contains all the pages) and mark it as active:

		$(this).addClass('active').siblings().removeClass('active');

		swSlider.stop().animate({'margin-left':-(parseInt($(this).data('i')))*ul.width()},1000);
		e.preventDefault();
	});
	
	// Mark the first link as active the first time this code runs:
	hyperLinks.eq(0).addClass('active');
	
	// Center the control div:
	swControls.css({
		'left':'50%',
		'margin-left':-swControls.width()/2
	});
   
    
    if (timeout) {
        setTimeout(function(){
            var tId = setTimeout(function(){
                _sfGo(ul, swControls, timeout);
            }, timeout);
        }, 1500);
    }
	
	return this;
};


function _sfGo(p, c, t){
    var els = c.find('a.swShowPage'),
        l = els.size(),
        s = p.find('.swSlider');
        
    function _next(){
        var nIdx = parseInt(els.siblings('a.swShowPage.active').data('i'))+1;        
        if (nIdx >= l) {
            nIdx = 0;
        }
        els.eq(nIdx).addClass('active').siblings().removeClass('active');
        s.stop().animate({'margin-left':-(nIdx)*p.width()},1000);
        _qNext();
    }
    function _qNext() {
        if (t) {
            var tId = setTimeout(_next, t);
            p.data('timeout', tId);
        }
    }
    _next();
}


})(jQuery);