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



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


function stockMenuFader()	{
	
	/* 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 (thisImage.getAttribute("imageType") == "imageLink") {
			
			//thisImage.firstChild.style.opacity = "1";
			//thisImage.firstChild.style.filter = "alpha(opacity = 100)";
			thisImage.childNodes[0].childNodes[0].style.backgroundColor = "#000000";	
			thisImage.childNodes[1].childNodes[0].style.color = "#FCC82A";	
			

					
			var clientRef = "i_" + thisImage.childNodes[0].childNodes[0].getAttribute("clientRef")
			
			//if we have a clientRef attribute then we'll continue to show and hide our layers
			
					if (document.getElementById(clientRef)) {
			
						document.getElementById(currentDisplay).style.visibility = "hidden";	
						document.getElementById(clientRef).style.visibility = "visible";	
						
					}	
			}
			
			
}


function restoreImage(thisImage)	{


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

	
			//thisImage.firstChild.style.opacity = "1";
			//thisImage.firstChild.style.filter = "alpha(opacity = 100)";
			thisImage.childNodes[0].childNodes[0].style.backgroundColor = "#777373";	
			thisImage.childNodes[1].childNodes[0].style.color = "#FFFFFF";	
			
						
			var clientRef = "i_" + thisImage.childNodes[0].childNodes[0].getAttribute("clientRef")

			//if we have a clientRef attribute then we'll continue to show and hide our layers
			
					if (document.getElementById(clientRef)) {
			
						document.getElementById(clientRef).style.visibility = "hidden"	
						document.getElementById(currentDisplay).style.visibility = "visible";	
							

					}
					
		}			

}