//global variable to keep track of layers for showhide on mouseover
var currentDisplay

//global variable for holding the visible full product details layer
var currentFullProductDetails = ""



window.onload = function(){
		
		productTypesMenu();
		
}



function productTypesMenu()	{
	
	/* check the browser is capable of recognising the DOM objects
	   we need to implement the script - otherwise return false and allow the normal link to be executed */
	   
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("matrix")) return false;
	
	
	/* get the reference to the matrix object and then create an array 
	   of all the <li> tags found in the array. To each tag assign a function to
	   the onmouseover and onmouseout events - which calls the fadeImage and restoreImage functions. */	
	
	var menu = document.getElementById("matrix");
	var menulinks = menu.getElementsByTagName("li");
	
		for(i = 0; i < menulinks.length; i++) {
		
			menulinks[i].onmouseover = function() {
			
				return fadeImage(this)		
					
			}
			
			
			menulinks[i].onmouseout = function() {
			
				return restoreImage(this)		
					
			}
			
		
		}
		
		
		
}


function fadeImage(thisImage)	{

			//if we find an imageType attribute of imageLink then we proceed

			//alert(thisImage.childNodes[0].childNodes[0].nodeName)
			
			if (thisImage.getAttribute("imageType") == "imageLink") {
			
			
			thisImage.childNodes[0].childNodes[0].style.backgroundColor = "#000000";	
			thisImage.childNodes[1].childNodes[0].style.color = "#FCC82A";	
			
			var prodRef = thisImage.childNodes[0].childNodes[0].getAttribute("prodRef")
			
			if (document.getElementById(prodRef)) {
			
						document.getElementById(currentDisplay).style.visibility = "hidden";	
						document.getElementById(prodRef).style.visibility = "visible";	
						
					}
			
			}
			
}


function restoreImage(thisImage)	{


			if (thisImage.getAttribute("imageType") == "imageLink") {

	
			thisImage.childNodes[0].childNodes[0].style.backgroundColor = "#777373";	
			thisImage.childNodes[1].childNodes[0].style.color = "#FFFFFF";	

			var prodRef = thisImage.childNodes[0].childNodes[0].getAttribute("prodRef")

									
			if (document.getElementById(prodRef)) {
			
						document.getElementById(prodRef).style.visibility = "hidden"	
						document.getElementById(currentDisplay).style.visibility = "visible";	
							

					}			
					
			}			

}



function showSummaryDetails(thisImage)	{
	
	//alert(thisImage.parentNode.getAttribute("prodRef"))
	
		var prodRef = thisImage.parentNode.getAttribute("prodRef")
	
		if (document.getElementById(prodRef)) {
			
			document.getElementById(currentDisplay).style.visibility = "hidden";	
			document.getElementById(prodRef).style.visibility = "visible";	
		
			currentDisplay = prodRef
			
		}			
	
	
	
}