salmon.namespace.addNamespace("boots.BrandViewerCollection");
boots.BrandViewerCollection = {
	init: function() {
		var brandViewers = $("div.brandViewer");
		for(var i = brandViewers.length-1; i>=0;i--) {
			boots.BrandViewerCollection.brandViewer = new boots.BrandViewerCollection.BrandViewer(brandViewers[i]);
		}
	},
	BrandViewer: function(BrandViewer) {
		var brandViewerID = BrandViewer.id;
		var moveCount = 1;
		var liTagWidth = 0;
		var itemsToShow = 4;
		var clippingArea = null;
		var animationInProgress = false;
		var rolloverImageCollection = {};
		
		var init = (function() {
			prepareRollovers();
			setLiTagWidth();
			setClippingArea();
			if(!checkIfAnimateable()) {
				return false;
			}
			setItemsToShow();
			prepareControls();
		})();
		
		function prepareRollovers() {
			var rolloverCollection = boots.BrandViewerCollection[brandViewerID];
			if(rolloverCollection == null) {
				return;
			}
			var brandLinks = $("a",BrandViewer);
			for(var i = 0; i<brandLinks.length; i++) {
				var currentLink = brandLinks[i];
				currentLink.image = $(currentLink).find("img")[0];
				currentLink.baseImage = $(currentLink).find("img").attr("src");
				if(rolloverCollection[currentLink.baseImage] == null) {
					continue;
				}
				currentLink.rolloverImage = rolloverCollection[currentLink.baseImage];
				currentLink.onmouseover = brandLinks_over;
				currentLink.onmouseout = brandLinks_out;
			}
		}
		
		function brandLinks_over() {
			this.image.src = this.rolloverImage;
		}
		
		function brandLinks_out() {
			this.image.src = this.baseImage;
		}		
		
		function setLiTagWidth() {
			if($("li", BrandViewer).length == 0) { return };
			liTagWidth = parseInt($("li", BrandViewer).css("width").split("px")[0]);
		}
		
		function setItemsToShow() {
			var classes = BrandViewer.className.split(" ");
			for(var i = classes.length-1; i>=0;i-- ) {
				if(classes[i].indexOf("size") != -1) {
					itemsToShow = classes[i].split("size")[1];
					break;
				}
			}

			// TO DO:
			// check if we have enough "extra <li> tags" for the scroll amount before setting "moveCount above 1"
			// and actually do the movement by that many
			
		}
		
		function checkIfAnimateable() {
			var isAnimateable = true;
			var brandViewerWidth = parseInt(getElementWidth(BrandViewer));
			var clippingAreaWidth = parseInt(getElementWidth(clippingArea));
			if(clippingAreaWidth < brandViewerWidth) {
				isAnimateable = false;
			}
			return isAnimateable;
		}
		
		function getElementWidth(element) {
			var elementWidth = 0;
			elementWidth = $(element).css("width");
			if(elementWidth == "auto") { elementWidth = "0px"}
			elementWidth = elementWidth.split("px")[0];
			return elementWidth;
		}
		
		function setClippingArea() {
			var width = getClippingWidth();
			clippingArea = $("ul", BrandViewer)[0];
			$(clippingArea).css({width: width});
		}
		
		function getClippingWidth() {
			var width = 0;
			var listElements = $("li", BrandViewer);
			for(var i=0;i<listElements.length;i++) {
				width += $(listElements[i]).width();
			}
			return width;
		}
		
		function prepareControls() {
			var backLink = document.createElement("span");
			var backImage = document.createElement("img");
			backImage.src = boots.common.siteConfig.imageDirectoryURL+"btn_back01.png";
			backImage.alt = "Backwards";
			backLink.className = "back";
			backLink.onclick = back_onClick;
			backLink.appendChild(backImage);
			BrandViewer.appendChild(backLink);
			
			$(backLink).pngFix(); 
			
			var forwardLink = document.createElement("span");
			var forwardImage = document.createElement("img");
			forwardImage.src = boots.common.siteConfig.imageDirectoryURL+"btn_forward01.png";
			forwardImage.alt = "Forwards";
			forwardLink.className = "forward";
			forwardLink.onclick = forward_onClick;
			forwardLink.appendChild(forwardImage);
			BrandViewer.appendChild(forwardLink);
			
			$(forwardLink).pngFix(); 
		}
		
		function back_onClick() {
			if(animationInProgress) {
				return false;
			}
			
			var value = 0;
			value = (getClippingAreaCssLeft() - liTagWidth) + "px";
			animationInProgress = true;
			animate(value, animateBack_onComplete);
			this.blur();
			return false;
		}
		
		function animate(value, functionReference) {
			$(clippingArea).animate( { left: value } , {duration: 1000, complete: functionReference} );		
		}
		
		function animateBack_onComplete() {
			animationInProgress = false;
			$("li:first",clippingArea).appendTo(clippingArea);
			$(clippingArea).css({left: "0px"});
		}
		
		function animateForward_onComplete() {
			animationInProgress = false;
		}		
		
		function forward_onClick() {
			if(animationInProgress) {
				return false;
			}
			
			$("li:last",clippingArea).prependTo(clippingArea);
			var leftValue = (getClippingAreaCssLeft()-liTagWidth)+"px";
			$(clippingArea).css({left: leftValue});
		
			var value = 0;
			value = (getClippingAreaCssLeft() + liTagWidth) + "px";
			animationInProgress = true;
			animate(value, animateForward_onComplete);
			this.blur();
			return false;
		}
		
		function getClippingAreaCssLeft() {
			var value = $(clippingArea).css("left");
			if(value == "auto") { value = "0px"; }
			value = parseInt(value.split("px")[0]);
			return value;
		}
		
	}
}

$(document).ready(function(){ boots.BrandViewerCollection.init(); });