// hide the image

		var currentTab = "Info";

		function hideItemContent()
		{
			var imageRef = document.getElementById("productImage");
			imageRef.style.visibility = "hidden";
			jQuery("#productImage").load(function(){jQuery(this).css("visibility", "visible");})
		}
		
		
		
		// this function displays the items and is called from the external javascript file
		function displayItems()
		{
			//var products = colletionXml.selectNodes("//p");
			var products = XPath.selectNodes("//p", colletionXml);
			
			var container = document.getElementById("productList");
			container.innerHTML = "";
			
			if (products.length > 0)
			{
				var item = null;
			
				if (initProductId == "")
				{
					item = products[0];
					setTimeout("openItem('" + item.getAttribute("id") + "', '" + item.getAttribute("b") + "');", 200);
				}
				else
				{
					document.getElementById("realContent").style.display = "block";
					document.getElementById("loadingInfo").style.display = "none";
					
					var initId = initProductId.split(',')[0];
					var initVarId = initProductId.split(',')[1];
					markItem("item_" + initId + "_" + initVarId)
					ajaxReadWithCallBack("/public/io/productxml.aspx?id=" + initId, setActiveProductXml, initVarId);
				}
				
			}
			
			
			var max = itemsIndex + maxItems;
			for(var i = itemsIndex; ((i < products.length) && (i < max)); i++)
			{
				var item = products[i];
				
				var div = document.createElement("div");
				div.className = "item tooltip";
				
				// this has to be fixed so that the tooltip works
				//div.title = item.getAttribute("i");
				
				var a = document.createElement("a");
				var img = document.createElement("img");
				if (item.getAttribute("i") != "")
				{
					img.src = "/public/media/autoimg/list_" + item.getAttribute("i") + "_61_61.jpg";
					a.href = "javascript: openItem('" + item.getAttribute("id") + "', '" + item.getAttribute("b") + "');";
					a.className = "noDecoration";
					div.id = "item_" + item.getAttribute("id") + "_" + item.getAttribute("b");
				}
				else
				{
					a.href = "javascript: openItem('" + item.getAttribute("id") + "', '');";
					a.className = "noDecoration";
					img.src = "/public/media/img/nolistimage.gif";
					div.id = "item_" + item.getAttribute("id");
				}
				
				img.className = "productListImage";
					
				a.appendChild(img);
				
				div.appendChild(a);
				container.appendChild(div);
			}
			
			// show the paging navigation
			displayPaging(products.length);
			
			setNextAndPrevoiusPagingLinks();
			
		//	tooltip();
		}
		
		
		ProductImages = function(variationXml)
		{
			if (XPath.selectSingleNode("vc", variationXml).childNodes[0]  != null)
			{
				this.colourCode = XPath.selectSingleNode("vc", variationXml).childNodes[0].nodeValue;
				this.ProductImage = "/public/media/autoimg/" + "prod_" + this.colourCode + "_265_240.jpg";
				this.ProductBigImage = "/public/media/autoimg/" + "big_" + this.colourCode + "_600_600.jpg";
				this.ListImage = "/public/media/autoimg/" + "list_" + this.colourCode + "_61_61.jpg";
				this.VariationImage = "/public/media/autoimg/" + "var_" + this.colourCode + "_34_34.jpg";
			}
			else
			{
				this.colourCode = "";
				this.ProductImage = "/public/media/img/noproductimage.gif";
				this.ProductBigImage = "/public/media/autoimg/noproductbigimage.gif";
				this.ListImage = "/public/media/autoimg/nolistimage.gif";
				this.VariationImage = "/public/media/img/novariationimage.gif";
			}
			this.styleCode = XPath.selectSingleNode("sc", variationXml).childNodes[0].nodeValue;
		}
		
		ProductExtraImages = function(extraImageXml)
		{
			this.uniqueId = extraImageXml.childNodes[0].nodeValue;
			this.ProductImage = "/public/media/autoimg/" + "prod_" + this.uniqueId + "_265_240.jpg";
			this.ProductBigImage = "/public/media/autoimg/" + "big_" + this.uniqueId + "_600_600.jpg";
			this.VariationImage = "/public/media/autoimg/" + "var_" + this.uniqueId + "_34_34.jpg";
		}
		
		
		// show the right variation image on top of the product card
		function showVariant(id)
		{
			var variationItem = XPath.selectSingleNode("//v[@id=\"" + id + "\"]", activeProductXml);
			if (variationItem != null)
			{
				var variationName = XPath.selectSingleNode("n", variationItem).childNodes[0].nodeValue;
				var pi = new ProductImages(variationItem);
				var imageRef = document.getElementById("productImage");
				imageRef.src = pi.ProductImage;
				imageRef.alt = variationName;
				var bigImageLink = document.getElementById("bigImageLink");
				bigImageLink.href = "javascript: showBigVariation('" + id + "');";
				
				document.getElementById("variationName").innerHTML = "Colour: " + variationName + " (<abbr title='colour code'>" + XPath.selectSingleNode("sc", variationItem).childNodes[0].nodeValue + "</abbr>)";
			}
		}
		
		function showExtraImage(id)
		{
			var variationItem = XPath.selectSingleNode("//e[@id=\"" + id + "\"]", activeProductXml);
			if (variationItem != null)
			{
				var pi = new ProductExtraImages(variationItem);
				var imageRef = document.getElementById("productImage");
				imageRef.src = pi.ProductImage;
				var bigImageLink = document.getElementById("bigImageLink");
				bigImageLink.href = "javascript: showBigExtraImage('" + id + "');";
			}
		}


		function showBigExtraImage(id)
		{
			var variationItem = XPath.selectSingleNode("//e[@id=\"" + id + "\"]", activeProductXml);
			var pi = new ProductExtraImages(variationItem);
			var imageRef = document.getElementById("bigImage");
			imageRef.src = pi.ProductBigImage;
			var bigImageContainer = document.getElementById("bigImageContainer");
			bigImageContainer.style.display = "block";
		}

		function showBigVariation(id)
		{
			/*var variationItem = activeProductXml.selectSingleNode("//variation[@id=\"" + id + "\"]");
			var variationName = variationItem.selectSingleNode("name").childNodes[0].nodeValue;
			var variationImage = variationItem.selectSingleNode("imagebig").childNodes[0].nodeValue;*/
			var variationItem = XPath.selectSingleNode("//v[@id=\"" + id + "\"]", activeProductXml);
			var pi = new ProductImages(variationItem);
			var variationName = XPath.selectSingleNode("n", variationItem).childNodes[0].nodeValue;
			//var variationImage = XPath.selectSingleNode("ib", variationItem).childNodes[0].nodeValue;
			var imageRef = document.getElementById("bigImage");
			imageRef.src = pi.ProductBigImage;
			imageRef.alt = variationName;
			
			var bigImageContainer = document.getElementById("bigImageContainer");
			bigImageContainer.style.display = "block";
			
			//document.body.style.overflow = "hidden";
		}

		function setActiveProductXml(xml, activatedVariationId)
		{	
			// save the product xml in the variable for the active product
			activeProductXml = xml;
		}
		
		function productIsLoaded(xml, activatedVariationId)
		{

			showProductTab("Info");
			
			var error = false;
			
			// check forr error
			if (XPath.selectSingleNode("//error", xml) != null)
			{
				error = true;
				alert(XPath.selectSingleNode("//error", xml).childNodes[0].nodeValue);
			}
			
			// save the product xml in the variable for the active product
			activeProductXml = xml;
			
			// ***************  main product info  *************** 
			if (!error)
			{
				document.getElementById("productTitle").innerHTML = XPath.selectSingleNode("//name", xml).childNodes[0].nodeValue;
				document.getElementById("price").innerHTML = XPath.selectSingleNode("//price", xml) != null ? XPath.selectSingleNode("//price", xml).childNodes[0].nodeValue : "";
				
				document.getElementById("priceContainer").style.display = document.getElementById("price").innerHTML == "" ? "none" : "block";
				document.getElementById("sizeLink").innerHTML = XPath.selectSingleNode("//size", xml).childNodes[0] != null ? XPath.selectSingleNode("//size", xml).childNodes[0].nodeValue : "";
				jQuery("#styleSpan").html(XPath.selectSingleNode("//productcode", xml).childNodes[0].nodeValue);
				jQuery("#materialLink").html(XPath.selectSingleNode("//composition", xml).childNodes[0].nodeValue);
				
				// 090124 -> and here we begin with jQuery instead 
				jQuery(".productMaterialContent").html(XPath.selectSingleNode("//materialContent", xml).childNodes[0].nodeValue);
				jQuery(".washingInstructions").html(XPath.selectSingleNode("//washingInstructions", xml).childNodes[0].nodeValue);
				
				// and here we display the washing symbols and washing text
				var washingSymbolsContainer = jQuery(".washingSymbols");
				washingSymbolsContainer.html("");
				
				var productWashingContentTextsContainer = jQuery(".productWashingContentTexts");
				productWashingContentTextsContainer.html("");
				
				
				var washingSymbolListForProductNode = XPath.selectSingleNode("//washingSymbols", xml).childNodes;
				if (washingSymbolListForProductNode.length > 0)
				{
					var washingSymbolListForProduct = washingSymbolListForProductNode[0].nodeValue.split(",");
				
					for (var i = 0; i < washingSymbolListForProduct.length; i++) 
					{
						var orgSymbol = washingSymbolsList["symbol" + washingSymbolListForProduct[i]];
					
						var wS = jQuery('<span class="washingSymbol" title="' + orgSymbol.description + '"><img src="' + orgSymbol.image + '" alt="' + orgSymbol.description + '"/></span>')
						washingSymbolsContainer.append(wS);
						activateTooltip(wS);
					
						var wST = jQuery('<span class="washingSymbolText">' + orgSymbol.description  + '</span>')
						productWashingContentTextsContainer.append(wST);
					}
					washingSymbolsContainer.css("display", "block");
				}
				else
					washingSymbolsContainer.css("display", "none");
				
				
				
				// katvig symbols / badges
				var katvigSymbolsContainer = jQuery(".productBadge");
				katvigSymbolsContainer.html("");
				
				var katvigSymbolListForProductNode = XPath.selectSingleNode("//katvigSymbols", xml).childNodes;
				if (katvigSymbolListForProductNode.length > 0)
				{
					var katvigSymbolListForProduct = katvigSymbolListForProductNode[0].nodeValue.split(",");
				
					for (var i = 0; i < katvigSymbolListForProduct.length; i++) 
					{
						var orgSymbol = katvigSymbolsList["symbol" + katvigSymbolListForProduct[i]];
					
						var wS = jQuery('<img title="' + orgSymbol.description + '" src="' + orgSymbol.image + '" alt="' + orgSymbol.description + '" class="badge" />')
						katvigSymbolsContainer.append(wS);
						activateTooltip(wS);
						
						if (katvigSymbolListForProduct.length == 1) wS.addClass("badgeIsOnlyOne");
					}

					var textContainer = jQuery(".badgeTextContainer");
					textContainer.html("");
					if (katvigSymbolListForProduct.length == 1)
					{
						textContainer.html("");
						var bText = jQuery('<span class="badgeText">' + XPath.selectSingleNode("//katvigSymbolsText", xml).childNodes[0].nodeValue + '</span>');
						katvigSymbolsContainer.append(bText);
						bText.addClass("badgeTextToTheRight");
					}
					else
					{
						textContainer.html(XPath.selectSingleNode("//katvigSymbolsText", xml).childNodes[0].nodeValue);
					}
				}
				else
				{
					var textContainer = jQuery(".badgeTextContainer");
					textContainer.html("");
				}
				
				
			}
			jQuery("#productDescription").html("");
			
			var descriptionNode = XPath.selectSingleNode("//description", xml);
			if (descriptionNode != null)
			{	
				var descriptionContentNode = descriptionNode.childNodes[0];
				if (descriptionContentNode != null)
				{
					var descText = descriptionContentNode.nodeValue != null ? descriptionContentNode.nodeValue : "";
					var descRe = /\n/gi;
					descText = descText.replace(descRe, "<br />");
					document.getElementById("productDescription").innerHTML = descText;
				}
			}
		
			
			jQuery("#productDescription").css("display", jQuery("#productDescription").css("display") == "" ? "none" : "block");
			
			var materialLink = XPath.selectSingleNode("//materialUrl", xml).childNodes[0] != null ? XPath.selectSingleNode("//materialUrl", xml).childNodes[0].nodeValue + ".aspx" : "";
			/*materialLink = materialLink.replace(/ /gi, "-");
			materialLink = materialLink.replace(/%/gi, "");
			materialLink = materialLink.replace(/\//gi, "[slash]"); 
			materialLink = materialLink.toLowerCase(); */
			
			jQuery("#materialLink").attr("href", "/" + materialLink);
	
			
			// *************** product variations *************** 
			//var productVariations = xml.selectNodes("//variation");
			var productVariations = XPath.selectNodes("//v", xml);
			
			var productVariationsDiv = document.getElementById("colorsContainer");
			
			// clear the content in the variation division
			productVariationsDiv.innerHTML = "";
			
			var i = 0;
			for(i = 0; i < productVariations.length; i++)
			{
			
				var variationName = XPath.selectSingleNode("n", productVariations[i]).childNodes[0] != null ? XPath.selectSingleNode("n", productVariations[i]).childNodes[0].nodeValue : "";
				
				var pi = new ProductImages(productVariations[i]);
				
				var variationImage = pi.productImage;
				var variationThumbnail = pi.variationImage;
				var variationId = productVariations[i].getAttribute("id");

				var vAnchor = document.createElement("a");
				var vThumb = document.createElement("img");
				vThumb.id = "colorThumb" + variationId;
				vThumb.src = pi.VariationImage;
				vThumb.className = "colorThumnbnail";
				if (i == 0) vThumb.className += " firstColorThumnbnail";
				if ((i != 0) && (i < 5)) vThumb.className += " firstRowColorThumnbnail";
				if (i % 5 == 0) vThumb.className += " firstItemOnRowColorThumnbnail";
				vThumb.alt = variationName;
				vAnchor.appendChild(vThumb);
				vAnchor.className = "colorLink noDecoration";
				vAnchor.onFocus = "this.blur();";
				vAnchor.href = "javascript: showVariant('" + variationId + "');";
				productVariationsDiv.appendChild(vAnchor);
			
				// set the product image that was choosed by the user
				if (variationId == activatedVariationId)
				{
					
					showVariant(variationId);
				}

			}
			
			
			
			
			var productExtraImages = XPath.selectNodes("//e", xml);
			var counter = i;
			for(var i = 0; i < productExtraImages.length; i++)
			{
			
				var pi = new ProductExtraImages(productExtraImages[i]);
				
				var variationImage = pi.productImage;
				var variationThumbnail = pi.variationImage;
				var variationId = productExtraImages[i].getAttribute("id");

				var vAnchor = document.createElement("a");
				var vThumb = document.createElement("img");
				vThumb.id = "colorThumb" + variationId;
				vThumb.src = pi.VariationImage;
				vThumb.className = "colorThumnbnail";
				if (counter == 0) vThumb.className += " firstColorThumnbnail";
				if ((counter != 0) && (counter < 5)) vThumb.className += " firstRowColorThumnbnail";
				if (counter % 6 == 0) vThumb.className += " firstItemOnRowColorThumnbnail";
				vThumb.alt = variationName;
				vAnchor.appendChild(vThumb);
				vAnchor.className = "colorLink noDecoration";
				vAnchor.onFocus = "this.blur();";
				vAnchor.href = "javascript: showExtraImage('" + variationId + "');";
				productVariationsDiv.appendChild(vAnchor);
			
				counter++;

			}

			
			
			// *************** show tags *************** 
			var productTags = XPath.selectNodes("//ta", xml);
			var productTagsDiv = document.getElementById("productTags");
			productTagsDiv.innerHTML = "";
			/*for(var i = 0; i < productTags.length; i++)
			{
				var tagItem = XPath.selectSingleNode("//ta[@id=\"" + productTags[i].getAttribute("id") + "\"]", tagsXml);
				var tagName = tagItem.childNodes[0].nodeValue;
				productTagsDiv.innerHTML += "<span class=\"productTagItem\"><a style=\"font-weight: normal; font-style: normal;\" class=\"noDecoration noColour\" href=\"javascript: clearAll(" + productTags[i].getAttribute("id") + ");\">" + tagName + "</a></span>";
			}*/

			// unhide the content
			document.getElementById("realContent").style.display = "block";
			document.getElementById("loadingInfo").style.display = "none";
			
			var imageRef = document.getElementById("productImage");
			//imageRef.style.visibility = "visible";
		}
		
		function showProductTab(tabId)
		{
			jQuery("#product" + currentTab + "Container").css("display", "none");
			jQuery("#productContentTab" + currentTab).removeClass("activeTab");
			currentTab = tabId;
			jQuery("#product" + currentTab + "Container").css("display", "block");
			jQuery("#productContentTab" + currentTab).addClass("activeTab");
			
			// google analytics
			if (tabId != "info") urchinTracker(pageType + '/producttab/' + tabId);
			
		}
		
		jQuery(document).ready(
			function()
			{
				jQuery("#productContentTabInfo").click(function(){showProductTab("Info")});
				jQuery("#productContentTabMaterial").click(function(){showProductTab("Material")});
				jQuery("#productContentTabWashing").click(function(){showProductTab("Washing")});
				jQuery("#productContentTabSizeGuide").click(function(){showProductTab("SizeGuide")});
			}
		);