"use strict";

jQuery.fn.scroller = function (opts)
{
    
    var animateSpeed = opts.animateSpeed || 1000,
        perPage = opts.perPage || 4,
        itemClass = opts.itemClass || 'item',
        leftButton = opts.leftButton || '«',
        rightButton = opts.rightButton || '»',
        obj = this,
        pageWidth = 0;
    

    // SETUP
    
    //Group the contents into per-page groups.
    this.canvas = $('<div class="canvas"></div>');
    
    $('.' + itemClass, obj).each(function (i) {
        if (i === 0 || i % perPage === 0)
        {
            obj.canvas.append($('<div class="page"></div>'));
        }
        $(this).detach();
        $('div.page:last', obj.canvas).append($(this));
    });
    
    $(this).append(obj.canvas);
    
    $(this).wrapInner('<div class="frame"></div>');
    
    $(this).addClass('scroller');
    
    pageWidth = $('.page', obj).outerWidth();
    
    $('.page', obj).each(function (i)
        {
            $(this).css({left: (i * pageWidth) + 'px', position: 'absolute'});
        });
    
    obj.pages = $('.page', obj).get();

    if ( obj.pages.length > 1 )
    {
        $(this).prepend($('<a class="right-button" href="#">' + rightButton + '</a>'));
        $(this).prepend($('<a class="left-button" href="#">' + leftButton + '</a>'));
    }

    
    obj.movePage = function (direction)
    {
        var canvas = $('.canvas', obj),
            curLeft = canvas.position().left;
           
        if (obj.inMotion)
        {
            return false;
        }
        
        obj.inMotion = true; 

        if (direction === 1)
        {
            obj.pageRight();
            canvas.animate({left: (curLeft + (pageWidth * direction)) + 'px'}, {duration: animateSpeed, complete: obj.motionComplete});
        }
        else
        {
            //obj.pageLeft();
            canvas.animate({left: (curLeft + (pageWidth * direction)) + 'px'}, {duration: animateSpeed, complete: obj.pageLeft});
         
        }
        return false;   
    };
    
    obj.motionComplete = function ()
    {
        obj.inMotion = false;  
    };
    
    obj.pageLeft = function ()
    {
        //take leftmost page, move it to the right end.        
        var page = obj.pages.shift(),
            rightMost = $(obj.pages[obj.pages.length - 1]).position();
        
        $(page).css({left: (rightMost.left + pageWidth)});
        obj.pages.push(page);
        obj.motionComplete();
    };
    
    obj.pageRight = function ()
    {
        //take rightmost page, move it to the left end.
        var page = this.pages.pop(),
            leftMost = $(this.pages[0]).position();
            
        $(page).css({left: (leftMost.left - pageWidth)});
        this.pages.unshift(page);
    };
    
    obj.inMotion = false;
    
    $('.right-button', this).click(function () {
        obj.movePage(-1);    
        return false;
    });
    
    $('.left-button', this).click(function () {
        obj.movePage(1);
        return false;
    });
};