/*
The productScroller method used on the homepage content area
*/
var productScroller = function($) {
    var isVertical = false;
    var scrollerActiveIndex = 0; //the array position of the first element in full view
    var scrollerContentArr = new Array();
    var scrollerContentSizeArr = new Array();
    var totalContentHeight = 0;
    var collLen = 0;
    var scrollerContentWidth = 0;
    var scrollerStartOffset = 0;
    var amountToShow = 1;
    var imgRoot = '/App_Themes/MyGreatGarage-Wide/images/';
    var parent = null;
    var prevImg = null;
    var prevEnabled = false;
    var prevImgSrc = [imgRoot + 'left-off.gif', imgRoot + 'left.gif']; //off, on
    var nextImg = null;
    var nextEnabled = false;
    var nextImgSrc = [imgRoot + 'right-off.gif', imgRoot + 'right.gif']; //off, on
    var isAnimating = false;

    var lineup = function() {
        collLen = scrollerContentArr.length;
        var _topPos = scrollerStartOffset;
        var slide1 = scrollerContentArr[0];
        var slideLast = scrollerContentArr[collLen - 1];
        for (var i = 0; i < collLen; i++) {
            scrollerContentArr[i].css((isVertical ? "top" : "left"), _topPos + "px");
            _topPos += scrollerContentSizeArr[i];
        }
    };

    var done = function() { isAnimating = false; };

    var changePrevButton = function(enable) {
        if (enable) {
            if (!prevEnabled) {
                prevImg.attr("src", prevImgSrc[1]).click(prev);
                prevEnabled = true;
            }
        } else {
            if (prevEnabled) {
                prevImg.attr("src", prevImgSrc[0]).unbind("click");
                prevEnabled = false;
            }
        }
    };

    var changeNextButton = function(enable) {
        if (enable) {
            if (!nextEnabled) {
                nextImg.attr("src", nextImgSrc[1]).click(next);
                nextEnabled = true;
            }
        } else {
            if (nextEnabled) {
                nextImg.attr("src", nextImgSrc[0]).unbind("click");
                nextEnabled = false;
            }
        }
    };

    var setParentSize = function() {
        var newSize = 0;
        for (var i = 0; i < amountToShow; i++) {
            var indexInView = i + scrollerActiveIndex;
            newSize += scrollerContentSizeArr[indexInView];
        }
        if (isVertical)
            parent.animate({ "height": newSize + "px" }, 350, null, done);
        else
            parent.animate({ "width": newSize + "px" }, 350, null, done);
    };

    var prev = function() {
        if (isAnimating) return;
        isAnimating = true;

        for (var i = 0; i < collLen; i++) {
            /* add the size of the element that will be pushed off to the position of each remaining el */
            //var nextIdxToAppear = (scrollerActiveIndex + amountToShow) - 1;
            var nextIdxToAppear = scrollerActiveIndex - 1
            if (isVertical)
                scrollerContentArr[i].animate({ "top": "+=" + scrollerContentSizeArr[nextIdxToAppear] + "px" }, 350, null, done);
            else
                scrollerContentArr[i].animate({ "left": "+=" + scrollerContentSizeArr[nextIdxToAppear] + "px" }, 350, null, done);

        }

        if (scrollerActiveIndex == 0)
            scrollerActiveIndex = (collLen - 1);
        else
            scrollerActiveIndex--;

        changePrevButton(scrollerActiveIndex > 0);
        changeNextButton((scrollerContentArr.length > (scrollerActiveIndex + amountToShow)));
        setParentSize();
    };

    var next = function() {
        if (isAnimating) return;
        isAnimating = true;

        for (var i = 0; i < collLen; i++) {
            /* subtract the size of the element that will be pushed off from the position of each remaining el */
            if (isVertical)
                scrollerContentArr[i].animate({ "top": "-=" + scrollerContentSizeArr[scrollerActiveIndex] + "px" }, 350, null, done);
            else
                scrollerContentArr[i].animate({ "left": "-=" + scrollerContentSizeArr[scrollerActiveIndex] + "px" }, 350, null, done);
        }

        if (scrollerActiveIndex == (collLen - 1))
            scrollerActiveIndex = 0;
        else
            scrollerActiveIndex++;

        changePrevButton(scrollerActiveIndex > 0);
        changeNextButton((scrollerContentArr.length > (scrollerActiveIndex + amountToShow)));
        setParentSize();
    };

    var buildButtons = function() {
        /* preload the "on" images, so there's no delay */
        //jQuery.preloadImages([prevImgSrc[1], nextImgSrc[1]]);
        jQuery(parent).before(
				'<div id="scroller-prev" class="scroller-action"><img src="' + prevImgSrc[0] + '" alt="Previous"></div>'
			);
        jQuery(parent).after(
				'<div id="scroller-next" class="scroller-action"><img src="' + nextImgSrc[0] + '" alt="Next"></div>'
			);
        prevImg = jQuery("#scroller-prev > img");
        nextImg = jQuery("#scroller-next > img");

        //changePrevButton( (scrollerActiveIndex > 0) ); no need for this, it's always 0 at this point
        changeNextButton((scrollerContentArr.length > amountToShow));
    };

    return {
        /*
        rootId = "myDiv", the ID string of el that contains the slides
        numberInView = 3, how many slides are always visible
        direction = "h" or "v", horizontal or vertical orientation
        */
        init: function(rootId, numberInView, direction) {
            if (direction == "v") isVertical = true;
            parent = jQuery("#" + rootId);

            var parentSize = 0;

            if (parent.length > 0) {
                if (numberInView != null) amountToShow = numberInView;

                //find siblings and build array
                jQuery(".scroller-slide", parent).each(function(i) {
                    var me = jQuery(this);
                    scrollerContentArr.push(me);
                    var initSize;
                    if (isVertical)
                        initSize = me.outerHeight();
                    else
                        initSize = me.outerWidth();
                    initSize += 25;
                    scrollerContentSizeArr.push(initSize);
                    totalContentHeight += initSize;
                    if ((i + 1) <= numberInView)
                        parentSize += initSize; //correct for zero-base
                    me.removeClass("slide-active").removeClass("slide-inactive");
                });

                /*	set the initial height/width of the parent */
                parent.css((isVertical ? "height" : "width"), parentSize + "px");

                //display and bind scrollers if necessary
                if (scrollerContentArr.length > 1) {
                    buildButtons();
                    lineup();
                }
            }
        }
    };
} ($);