/*
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/bowrista/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();
					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();
				}
			}
		}
	};
}($);