salmon.namespace.addNamespace("boots.colourPalette");
var sizeVariants=[];
boots.colourPalette = {
	currentOver:"",
    listerVariants:[],
	isMouseOver:false,
    init: function(){
        var colourPalettes  = $(".colourPalette");
        var inPageSizeVariants = $("#productDetails #productInformation #size_x");
        var inListerSizeVariants = $(".productItem .size select");
        for(var i = colourPalettes.length-1; i>=0;i--) {
                    boots.colourPalette.colourPalette = new boots.colourPalette.ColourPalette(colourPalettes[i]);
        }
        if(inPageSizeVariants.length>0){
	        $(".size #size_x").add(".selectASize #size_x").change(function(){
				boots.colourPalette.SizeVariantSelector();
	        });
	        boots.colourPalette.SizeVariantSelector();
        }
        if(inListerSizeVariants.length>0){
        	$(inListerSizeVariants).each(function(){
        		var thisId = $(this).attr("id");
        		for(var i=0; i<sizeVariants.length; i++){
        			if(sizeVariants[i].sizeVariantId == thisId){
        				boots.colourPalette.listerVariants[thisId] = sizeVariants[i];
        			}
        		}
        		$(this).change(function(){
	        		var myId = $(this).attr("id");
	        		var mySize = $(this).attr("value");
	        		var myParent = $(this).parent();
	        		for(var i=0; i<2; i++){
	        			if($(myParent).hasClass("details")){
	        				i=2;
	        			} else {
		        			myParent = $(myParent).parent();
	        				--i;
	        			}
	        		}
	        		myParent.find(".productNumber").text(boots.colourPalette.listerVariants[myId].variants[mySize].productCode);
	        		var myAddToBasketString  = myParent.find(".addToBasket a").attr("href");
	        		var myBegin = myAddToBasketString.substring(0,myAddToBasketString.indexOf("(")+1);
	        		var myEnd = myAddToBasketString.substring(myAddToBasketString.indexOf(","),myAddToBasketString.length);
	        		var myVariantId = boots.colourPalette.listerVariants[myId].variants[mySize].variantId;
	        		var myNewHref = myBegin + myVariantId + myEnd;
	        		myParent.find(".addToBasket a").attr({href:myNewHref});
        		});
        	});
        }
    },
    SizeVariantSelector:function(){
        var currentItem = $("#size_x").attr("value");
        $("form#OrderItemAddForm #OrderItemAddForm_catEntryId").attr({value:sizeVariant.variants[currentItem].variantId});
        $("#productInformation .priceInformation .oldPrice").text(sizeVariant.boots_oldText +" "+ sizeVariant.variants[currentItem].currentPrice);
        $("#productInformation .priceInformation .save").text(sizeVariant.boots_saveText +" "+ sizeVariant.variants[currentItem].saving);
        $("#productInformation .price").text(sizeVariant.variants[currentItem].nowPrice);
        $("#productInformation .sizeInformation .pricePerSize").text(sizeVariant.variants[currentItem].ppu);
        $("#productInformation .productCode").text(sizeVariant.boots_productCodeText +" "+ sizeVariant.variants[currentItem].productCode);
        $("#productInformation .collectPoints").text(sizeVariant.variants[currentItem].points);
    },

	ColourPalette:function(colourPalette){
		$(colourPalette).append("<div class=\"toolTip clearfix\"><div class=\"left\">&nbsp;</div><div class=\"middle\">&nbsp;</div><div class=\"right\">&nbsp;</div></div>");
		$(colourPalette).find(".actions,label span").hide();
		$(colourPalette).find(".toolTip").css({left: "-99999em"})
		$(colourPalette).find(".selectedColour").show();
		$(colourPalette).find("fieldset").css({
			width:"158px"
		});
		if($(colourPalette).find("fieldset").attr("class") == "chanelColourPalette"){
			$(colourPalette).find("fieldset div").css({
				float:"left",
				height:"24px",
				width:"48px",
				margin:"0 1px 1px 1px",
				position:"relative"
			});
			$(colourPalette).find("fieldset div img").css({
				height:"24px",
				width:"48px"
			});
			$(colourPalette).find("fieldset div img").attr({
				height:"24",			
				width:"48"
			});
			$(colourPalette).find(".selectedColour img").css({
				height:"50px",
				width:"100px"
			});
			$(colourPalette).find(".selectedColour img").attr({
				height:"50",
				width:"100"
			});
		} else {
			$(colourPalette).find("fieldset div").css({
				float:"left",
				height:"24px",
				width:"24px",
				margin:"0 1px 1px 0",
				position:"relative"
			});
		}
		$(colourPalette).find("fieldset label").css({
			position:"absolute",
			top:"0",
			left:"0"
		});
		$(colourPalette).find("label").click(function(){
			var currentItem = $(this).attr("for");
			//console.log(boots.currentProduct.variants[currentItem].bigImage);
			$(colourPalette).find(".selectedColour img").attr({
				src:boots.currentProduct.variants[currentItem].bigImage,
				//"../../en_US/i/common/temp/swatch_large_"+currentItem+".gif",
				alt:$(this).text()
			});
			$(colourPalette).find(".selectedColour p").text($(this).text());
			
			$("form#OrderItemAddForm #OrderItemAddForm_catEntryId").attr({value:boots.currentProduct.variants[currentItem].variantId});
			
			var tempCurrentPrice = boots.currentProduct.variants[currentItem].currentPrice;
			var tempSaving = boots.currentProduct.variants[currentItem].saving;
			var tempNowPrice = boots.currentProduct.variants[currentItem].nowPrice;
						
			tempCurrentPrice = tempCurrentPrice.replace(/&#163;/g,"\u00A3");
			tempSaving = tempSaving.replace(/&#163;/g,"\u00A3");
			tempNowPrice = tempNowPrice.replace(/&#163;/g,"\u00A3");
			
			$("#productInformation .priceInformation .oldPrice").text(boots.currentProduct.boots_oldText +" "+ tempCurrentPrice);
			$("#productInformation .priceInformation .save").text(boots.currentProduct.boots_saveText +" "+ tempSaving);
			$("#productInformation .price").text(tempNowPrice);
			$("#productInformation .sizeInformation .pricePerSize").text(boots.currentProduct.variants[currentItem].ppu);
			$("#productInformation .productCode").text(boots.currentProduct.boots_productCodeText +" "+ boots.currentProduct.variants[currentItem].productCode);
			$("#productInformation .collectPoints").text(boots.currentProduct.variants[currentItem].points);
			
			/**********************************
			***
			***  TODO: promotion offers
			***
			**********************************/
			
		});
		$(colourPalette).find("label").mouseover(function(){
			var currentItem = $(this).attr("for");
			if((boots.colourPalette.currentOver != currentItem) || (!boots.colourPalette.isMouseOver)){
				boots.colourPalette.showToolTip($(this).text(),this,colourPalette);
				boots.colourPalette.isMouseOver = true;
				boots.colourPalette.currentOver = currentItem;
			}
			/*$(this).find("img").attr({
				src:"../../en_US/i/common/temp/swatch_small_"+currentItem+"_hover.gif"
			});*/
		});
		$(colourPalette).find("label").mouseout(function(){
			var currentItem = $(this).attr("for");
			$(colourPalette).find(".toolTip").unbind("click");
			$(colourPalette).find(".toolTip").css({left: "-99999em"});
			/*$(this).find("img").attr({
				src:"../../en_US/i/common/temp/swatch_small_"+currentItem+".gif"
			});*/
			boots.colourPalette.isMouseOver = false;
		});
	},
	showToolTip: function(whatText,whatItem,colourPalette){
		/*
		 * it is important that to calculate the widths of what the tooltip parts need to be that
		 * we first set the text inside the panel and then reset the widths to auto to start from 
		 * level. Then begin calculating offsets and setting them.
		 */
		var tooltip = $(colourPalette).find(".toolTip")[0];
		var tooltipMiddlePane = $("div.middle",tooltip)[0];
		$(tooltipMiddlePane).text(whatText);
		$(tooltip).css({width: "auto"});
		$(tooltipMiddlePane).css({width: "auto"});		
		var itemOffset = $(whatItem).offset();
		var itemOffsetProductDetails = $("#productDetails").offset();
		var tooltipMiddlePaneWidth = $(tooltipMiddlePane).width();
		var leftOffset = itemOffset.left-Math.floor($(tooltip).width()/2)-itemOffsetProductDetails.left+($(colourPalette).find("fieldset div img").width()/2);
		$(tooltip).css({
			left:leftOffset,
			height:"46px",
			overflow:"hidden",
			top:(itemOffset.top-38-itemOffsetProductDetails.top),
			width: tooltipMiddlePaneWidth+28 //padding
		});
		$(tooltipMiddlePane).css({width: tooltipMiddlePaneWidth});
	}
};
$(document).ready(function(){boots.colourPalette.init();});