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

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

function productMenu()	{
	
	/* 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)		
					
			}
			

			
			
			
		}
		
		
		showHide();
		
}


function fadeImage(thisImage)	{

			
			//if we find an imageType attribute of imageLink then we proceed
			
			if (thisImage.getAttribute("imageType") == "imageLink") {
	
			thisImage.childNodes[1].style.backgroundColor = "#000000";	
			
			//on the text link which is a childNode of a childNode we set the function to create the big image popup
			
			thisImage.childNodes[0].childNodes[0].onclick = function () {
			
					return createLargeImage(this)
					
			}
			
			//now display our links section to other products and the big image plus the text layers show and hide
			
			var clientRef = thisImage.childNodes[0].childNodes[0].getAttribute("clientRef")
			var linksRef = 	thisImage.childNodes[0].getAttribute("id")
				
			
					if (document.getElementById(clientRef)) {
			
						document.getElementById(linksRef).style.visibility = "visible";	
					
						document.getElementById(currentDisplay).style.visibility = "hidden";	
						document.getElementById(clientRef).style.visibility = "visible";	
						
					}	
			}
			
}


function restoreImage(thisImage)	{


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


			thisImage.childNodes[1].style.backgroundColor = "#777373";	
			
				
			var clientRef = thisImage.childNodes[0].childNodes[0].getAttribute("clientRef")
			var linksRef = 	thisImage.childNodes[0].getAttribute("id")
			
					if (document.getElementById(clientRef)) {

						document.getElementById(linksRef).style.visibility = "hidden";	

								
						document.getElementById(clientRef).style.visibility = "hidden"	
						document.getElementById(currentDisplay).style.visibility = "visible";	
							

					}
					
		}			

}