/* NavSwap - Swaps the navigation menu items with corresponding images
Can be used with multiple menus

Author: Karina Steffens, www.neo-archaic.net
Created: July  2006
*/

//User Customisable parameters:
//The up state images Path
var navUpPath = "images/nav_up/";
//The rollover state images Path
var navOverPath = "images/nav_over/";
//The active state images Path 
//Note: Currrently it's the same as the rollover, but can be changed by the user, 
//either here or by passing variables;
var navActivePath = "images/nav_active/";
var hidden = true;
var nocache = false;
var imageLoaded = false;

//Check if the browser supports the neccessary dom methods
//You can modify this variable to limit browser support for accessibility, if required
var supported = document.getElementById  && document.getElementsByTagName && document.createElement;


//Create a new StyleSheet to hide the menu (class="nav") to avoid an ugly jump.
if (supported && hidden){
	var style = document.createElement("style");
	style.type = "text/css";
	document.getElementsByTagName("head")[0].appendChild(style);
	style = document.styleSheets.item(document.styleSheets.length-1);
	if (style.addRule){		
	    //IE
		style.addRule(".nav", "visibility:hidden", 0);
	}else if (style.insertRule){
		//Firefox
		style.insertRule(".nav {visibility:hidden}", 0);
	}
}




if (supported){
	var test = new Image();
	test.src = 'images/nav_up/home.png'+"?nocache=" + new Date().getTime();
	test.onload = doNavSwap;
	if (hidden){
		setTimeout(function () { doNavAbort(); }, 1000);
	}
}
	
function doNavSwap(){
	imageLoaded = true;
	navSwap("nav", 100, 36, ".png")
}

function doNavAbort(){
	//alert ("doNavAbort");
	//alert (imageLoaded)
	//if (imageLoaded) return;
	//Pictures are not loading - Show the nav and change the colour of the items.
	if (style.addRule){		
	    //IE
		style.addRule(".nav", "visibility:visible", 1);
		style.addRule("#nav a", "color:#006600;", 1);
	}else if (style.insertRule){
		//Firefox
		style.insertRule(".nav {visibility:visible}", 1);
		style.insertRule("#nav a {color:#006600}", 1);
	}	
}



//Swap the nav menu items with images
function navSwap(id, w, h, suffix, upPath, overPath, activePath){
	if (!supported){
		return;
	}

	//Default values
	if (id == undefined){
		id = "nav";
	}	
	if (suffix == undefined){
		suffix = ".jpg";
	}
	
	//Change the path names for the image states, if these are passed
	if (upPath != undefined){
		navUpPath = upPath;
	}
	if (overPath != undefined){
		navOverPath = overPath;
	}
	if (activePath != undefined){
		navActivePath = activePath;
	}
	
	//A dictionary of properties for the menu, to be used on rollovers
	var menuProps = {};
	
	var nav = document.getElementById(id);	
	if (nav == undefined){
		return;
	}
	
	//Check if the image is png, and if the browser is IE5.5 - 6
	var swapPng = false;
	if ((suffix == ".png") && (navigator.appVersion.indexOf("MSIE") != -1)){
		var arVersion = navigator.appVersion.split("MSIE")
		var version = parseFloat(arVersion[1])
		if (((version < 5.5) || (!document.body.filters))){
			//The browser can't support swapping the png for a filter
			supported = false;
			nav.style.visibility = "visible";
			return;			
		}else if (version < 7){
			//IE7 supports png transparency natively
			swapPng = true;
		}
	}
	
	nav.style.listStyle = "none";
	//Cycle through all the hyperlinks belonging the nav element
	var menu = nav.getElementsByTagName('a');
	for (var i=0; i<menu.length; i++){
		var menuItem = menu[i];
		//Retrieve the menuItem's name as an identifer:
		//This should either be the hyperlink's text (lower case) or it's className,
		//as long as it corresponds to the name of the replacing image (without the suffix)
		//This means that if your menu item's text needs to have more than one word, illegal markup 
		//or is duplicated across menus, you can assign a className to override it.
		var name = menuItem.className;
		if (name == ""){
			name = menuItem.innerHTML.toLowerCase();
			if (name == ""){
				continue;
			}
		}
	    //Retrieve the menu item's properties
		var up = navUpPath + name + suffix;
		var over = navOverPath + name + suffix;
		var active = navActivePath + name + suffix;
		menuItem.innerHTML = "";
		//Create a new image (or span) element that will replace the text
		var img = swapPng ? document.createElement("span") : document.createElement("img")
		//var img =  document.createElement("img")
		
		//If the item's classname matches the body's id name
		//Then mark this as an active item
		var src = (document.body.id == name) ? active : up;
		if (nocache){
			src += "?nocache=" + new Date().getTime();
		}
		
		//Assign parameters to the new image
		if (swapPng){
			img.style.display= "inline-block";
			img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'" + src + "\', sizingMethod='image')";
		}else{
			img.src = src;
		}
		if (w != undefined){
				img.width = w;
				img.style.width = w + "px";
			}
			if (h != undefined){
				img.height = h;
				img.style.height = h + "px";
		}
		img.style.cursor = "hand";
		img.border = "0";
		img.style.border = "none";
		img.alt = name;
		
		//Assign the name as the item's className, so it can be easily retrieved on rollover
		menuItem.className = name;
		//Display the image
		menuItem.appendChild(img);
		menuItem.style.border="none";
		menuItem.title = name;
		//Add the properties to the dictionary
		menuProps[name] = {up: up, over:over, active:active, swapPng:swapPng};
		//Active menu items don't change on rollover.
		if (document.body.id == name){
		    continue;
		}
		//Change the menu item's image on rollover, using the saved properties
		menuItem.onmouseover = function(){
			var name = this.className;
			var props = menuProps[name];
			var img = this.childNodes[0];
			if (props.swapPng){
				img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'" + props.over + "\', sizingMethod='image')";
			}else{
				img.src = props.over;
			}
	   }		
	   //Return the menu item's image back to up, using the saved properties
		menuItem.onmouseout=function() {
			var name = this.className
			var props = menuProps[name]
			var img = this.childNodes[0]
			if (props.swapPng){
				img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'" + props.up + "\', sizingMethod='image')";
			}else{
				img.src = props.up;
			}
		}	
	}
	nav.style.visibility = "visible";
	
	//Ad-hoc adjust
	nav.style.top="110px";
	nav.style.left = "105px";
}