/**
 * Created by Komma-mediadesign.
 * User: Mike
 * Date: 3/13/13
 * Time: 3:11 PM
 */

function GridSlider(slider){

    var t = this;

    /*
     * @property gridSize;
     * The slider slides on a grid
     */
    t.gridSize = 70;

    /*
     * @property viewport
     * width of the viewport
     */
    t.viewport = 850;

    /*
     * @property slider
     */
    t.slider = slider;

    /*
     * @property numItems
     */
    t.numItems = 0;

    /*
     * @property itemsInView
     */
    t.itemsInView = 0;

    /*
     * @property hiddenLeft
     */
    t.hiddenLeft = 0;

    /*
     * @property hiddenRight
     */
    t.hiddenRight = 0;

    /*
     * @property index
     */
    t.index = 0;


    this.init = function()
    {
        // set num items
        t.numItems = ($('li',t.slider).size());

        // set slider size
        var w = t.gridSize * t.numItems;
        $(t.slider).css({ width : w+'px' });

        // set Items in view
        t.itemsInView = Math.floor(t.viewport / t.gridSize);

        // set Items in view
        t.hiddenRight = t.numItems - t.itemsInView;

        // set on click functions
        $(t.slider+' li').each(function(index)
        {
            $(this).click(function(e){
                e.preventDefault();
                var a = $('a',this);
                $('body').append('<div id="jsLoad"></div>');
                $('#jsLoad').load('/mvc/controllers/c_gridSlider.php?index='+index+'&hiddenLeft='+ t.hiddenLeft+'&hiddenRight='+ t.hiddenRight+'&offsetTop='+$(document).scrollTop(), function(){
                    window.location.href = $(a).attr('href');
                });
            });
        });

        // set on click buttons
        $('#refNext').click(function(e){
            e.preventDefault();
            var a = $(this);
            if($(a).is('a'))
            {
                $('body').append('<div id="jsLoad"></div>');
                $('#jsLoad').load('/mvc/controllers/c_gridSlider.php?index='+(t.index+1)+'&hiddenLeft='+ t.hiddenLeft+'&hiddenRight='+ t.hiddenRight+'&offsetTop='+$(document).scrollTop(), function(){
                    window.location.href = $(a).attr('href');
                });
            }
        });
        $('#refPrev').click(function(e){
            e.preventDefault();
            var a = $(this);
            if($(a).is('a'))
            {
                $('body').append('<div id="jsLoad"></div>');
                $('#jsLoad').load('/mvc/controllers/c_gridSlider.php?index='+(t.index-1)+'&hiddenLeft='+ t.hiddenLeft+'&hiddenRight='+ t.hiddenRight+'&offsetTop='+$(document).scrollTop(), function(){
                    window.location.href = $(a).attr('href');
                });
            }
        });
    };

    this.set = function(index, hiddenLeft, hiddenRight)
    {
        t.index = index;
        t.hiddenLeft = parseInt(hiddenLeft);
        t.hiddenRight = parseInt(hiddenRight);

        left = t.hiddenLeft * t.gridSize * -1;
        $(t.slider).css({ left : left+'px' });
    };

    this.slide = function()
    {
        index =  t.index+1;

        /*
         * Number of items in viewport
         */
        var centerImage = Math.ceil((t.itemsInView/2)+t.hiddenLeft);
        var difference = null;
        var left = null;
        /*
         * If over half of the viewport
         */

        if(index > centerImage)
        {
            difference = index - centerImage;
            if(t.hiddenRight < difference){
                difference = t.hiddenRight;
            }
            t.hiddenLeft += difference;
            t.hiddenRight -= difference;

            left = t.hiddenLeft * t.gridSize * -1;
            $(t.slider).stop().animate({ left : left+'px' },500);
        }
        if(index < centerImage)
        {
            difference = centerImage - index;
            if(t.hiddenLeft < difference)
            {
                difference = t.hiddenLeft;
            }
            t.hiddenLeft -= difference;
            t.hiddenRight += difference;

            left = t.hiddenLeft * t.gridSize * -1;
            $(t.slider).stop().animate({ left : left+'px' },500);
        }
    };
}