/*

                                                                                                                   
       bbbbbbb                             
   ffffffffffffffff       999999999      222222222222222               llllll                   b:::::b                             
   f::::::::::::::::f    99:::::::::99   2:::::::::::::::22             l::::l                   b:::::b                             
   f::::::::::::::::::f 99:::::::::::::99 2::::::222222:::::2            l::::l                   b:::::b                             
   f::::::fffffff:::::f9::::::99999::::::92222222     2:::::2            l::::l                   b:::::b                             
   f:::::f       ffffff9:::::9     9:::::9            2:::::2            l::::l   aaaaaaaaaaaaa   b:::::bbbbbbbbb        ssssssssss   
   f:::::f             9:::::9     9:::::9            2:::::2            l::::l   a::::::::::::a  b::::::::::::::bb    ss::::::::::s  
fff:::::::ffffff        9:::::99999::::::9         2222::::2             l::::l   aaaaaaaaa:::::a b::::::::::::::::b ss:::::::::::::s 
f::::::::::::::f         99::::::::::::::9    22222::::::22              l::::l            a::::a b:::::bbbbb:::::::bs::::::ssss:::::s
fff:::::::ffffff           99999::::::::9   22::::::::222                l::::l     aaaaaaa:::::a b:::::b    b::::::b s:::::s  ssssss 
   f:::::f                      9::::::9   2:::::22222                   l::::l   aa::::::::::::a b:::::b     b:::::b   s::::::s      
   f:::::f                     9::::::9   2:::::2                        l::::l  a::::aaaa::::::a b:::::b     b:::::b      s::::::s   
   f:::::f                    9::::::9    2:::::2                        l::::l a::::a    a:::::a b:::::b     b:::::bssssss   s:::::s 
   f:::::f                   9::::::9     2:::::2                        l::::1a::::a    a:::::a b:::::bbbbbb::::::bs:::::ssss::::::s
   f:::::f                  9::::::9      2::::::2222222222222           l::::1a:::::aaaa::::::a b::::::::::::::::b s::::::::::::::s 
   f:::::f                 9::::::9       2::::::::::::::::::2           l::::1 a::::::::::aa:::ab:::::::::::::::b   s:::::::::::ss  
   f:::::f                99999999        22222222222222222222           llllll  aaaaaaaaaa  aaaabbbbbbbbbbbbbbbb     sssssssssss   
   f:::::f                 
   fffffff



*	©2011 fusion92 labs.
*	
*	
*/


(function ($) {

    // Controller object.
    // This handles moving all the items, dealing with mouse clicks etc.	
    var Controller = function (container, options) {
        var itemWidth = $(container).children('ul').children('li').outerWidth();
        var containerWidth = $(container).width();
        var completeCount = 0;
        var inAnim = true;

        //SET REQUIRED STYLES
        $(container).children('ul').css({ position: 'relative' });
        $(container).children('ul').children('li').css({ position: 'absolute', top: 0, left: containerWidth + 'px' }).show();

        //ANIMATE IN
        startIndx = options.startIndx;
        animateGroup(startIndx, 'in', 800);

        //START SLIDESHOW
        if (options.autoShow)
            var autoTimeout = setTimeout(function () { autoShow() }, 6000);


        //BIND IMAGE ROLL EFFECT
        $(container).children('ul').children('li').children('.imgBorder').hover(function () {
            $(this).stop(true, true).animate({ backgroundColor: '#ccc' }, 400);
            if (options.autoShow)
                clearTimeout(autoTimeout);
        }, function () {
            $(this).stop(true, true).animate({ backgroundColor: '#fff' }, 1000);
            if (options.autoShow)
                autoTimeout = setTimeout(function () { autoShow() }, 6000);
        });

        //BIND SG CONTROL CLICK
        $(container).children('.sgControls').children('.sgBox').click(function () {
            if (!$(this).hasClass('active') && !inAnim) {
                var oldIndx = $(container).children('.sgControls').children('.sgBox').index($(container).children('.sgControls').children('.sgBox.active'));
                var newIndx = $(container).children('.sgControls').children('.sgBox').index($(this));
                //REMOVE OLD ACTIVE CLASS
                $(container).children('.sgControls').children('.sgBox.active').removeClass('active');
                //ADD NEW ACTIVE CLASS
                $(this).addClass('active');


                //DETERMINE OLD START INDEX
                var oldStartIndx = (oldIndx * options.numDisplay);
                var startIndx = (newIndx * options.numDisplay);
                animateGroup(oldStartIndx, 'out', 0);
                animateGroup(startIndx, 'in', 800);
            }

            if (options.autoShow)
                clearTimeout(autoTimeout);
            options.autoShow = false;
        });


        $(container).children('ul').children('li').click(function () {
            if (options.autoShow)
                clearTimeout(autoTimeout);
            options.autoShow = false;

            $(this).children('a').trigger('click');

            //alert(options.autoShow)
        });


        //ANIMATE GROUP FUNCTION
        function animateGroup(startIndx, dir, pause) {
            var endIndx = startIndx + options.numDisplay;

            for (x = startIndx; x < endIndx; x++) {
                var el = $(container).children('ul').children('li:eq(' + x + ')');
                var relIndx = (x - startIndx);
                var delay = relIndx * 200;

                //CALCULATE X
                if (dir == "out") {
                    var xPos = 0 - itemWidth - options.offSetX;
                } else {
                    var xPos = itemWidth * relIndx;
                    var prepXPos = (itemWidth * 4) + (itemWidth * relIndx) + options.offSetX;
                    $(el).css({ left: prepXPos + 'px' });
                }

                //CHECK IF LAST
                isLast = false;
                if (relIndx == (options.numDisplay - 1))
                    isLast = true;

                //ANIMATE
                $(el).delay(delay + pause).animate({ left: xPos + 'px' }, options.dur, function () {
                    completeCount++;
                    if (completeCount == options.numDisplay) {
                        inAnim = false;
                        completeCount = 0;
                    }
                });
            }
        }

        function autoShow() {

            if (!inAnim) {
                var oldIndx = $(container).children('.sgControls').children('.sgBox').index($(container).children('.sgControls').children('.sgBox.active'));
                var newIndx = oldIndx + 1;
                if (newIndx >= $(container).children('.sgControls').children('.sgBox').length)
                    newIndx = 0;

                //REMOVE OLD ACTIVE CLASS
                $(container).children('.sgControls').children('.sgBox.active').removeClass('active');
                //ADD NEW ACTIVE CLASS
                $(container).children('.sgControls').children('.sgBox:eq(' + newIndx + ')').addClass('active');


                //DETERMINE OLD START INDEX
                var oldStartIndx = (oldIndx * options.numDisplay);
                var startIndx = (newIndx * options.numDisplay);
                animateGroup(oldStartIndx, 'out', 0);
                animateGroup(startIndx, 'in', 800);
            }

            //START SLIDESHOW
            autoTimeout = setTimeout(function () { autoShow() }, 6000);

        }

    };


    // The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
    $.fn.SliderGallery = function (options) {

        this.each(function () {

            options = $.extend({}, {
                startIndx: 0,
                numDisplay: 4,
                animTime: 800,
                offSetX: 20,
                autoShow: true
            }, options);
            // Create a Controller for each carousel.		
            $(this).data('sliderGallery', new Controller(this, options));
        });
        return this;
    };

})(jQuery);