/* 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_over/";
var hidden = true;

//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);
	}
}

//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;
	}else{
		navActivePath = navOverPath;
	}
	
	//A dictionary of properties for the menu, to be used on rollovers
	var menuProps = {};
	
	//Cycle through all the hyperlinks belonging the nav element
	var nav = document.getElementById(id);	
	if (nav == undefined){
		return;
	}
	nav.style.listStyle = "none"
	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 element that will replace the text
		var img = document.createElement("img");
		//If the item's classname matches the body's id name
		//Then mark this as an active item
		if (document.body.id == name){
			img.src = active;
		} else {
			img.src = up;
		}
		//Assign parameters to the new image
		img.alt = name;
		img.border = "0px";
		if (w != undefined){
			img.width = w;
		}
		if (h != undefined){
			img.height = h;
		}
		//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.border="none";
		//Add the properties to the dictionary
		menuProps[name] = {up: up, over:over, active:active};
		//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];
			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]
			img.src = props.up
		}	
	}
	
	//Un-hide the menu
	nav.style.visibility = "visible";
}