function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}

var navWidth = 0;
var navItems = 0;

function createSubNav(navLink) {
	if (!navLink) { return false; }
	var menuName = navLink.getElementsByTagName("a")[0].getAttribute("id");
	if (!document.getElementById(menuName + "_subNav")) {
		var subNav = document.createElement("ul");
	} else {
		var subNav = document.getElementById(menuName + "_subNav");
	}
	var newSubNav = subNav.cloneNode(true);
	if (!document.getElementById("navContainer")){ return false; }
	var navContainer = document.getElementById("navContainer");
	var ulList = navContainer.getElementsByTagName("ul");
	if (document.getElementById("subNav")) {
		navContainer.removeChild(document.getElementById("subNav"));
	}
	
// get newSubNav width and calculate indent
	newSubNav.setAttribute("id","subNav");
	navContainer.appendChild(newSubNav);

	var liSubList = newSubNav.getElementsByTagName("li");
	var subNavWidth = 0;
	for (var i = 0; i < liSubList.length; i++) {
		var thisLi = liSubList[i];
		subNavWidth = subNavWidth + parseInt(thisLi.getElementsByTagName("a")[0].offsetWidth);
	}
	getNavWidth();
	var itemNumber = String(navLink.className).substring(0,navLink.className.length-4);
	var displacement = (itemNumber-1)/(navItems-1);
	var pixels = (navWidth-subNavWidth)*displacement;
	newSubNav.style.marginLeft = pixels + "px";

}

function navSetMouseOvers() {
	if (!document.getElementById("nav")) { return false; }
	var nav = document.getElementById("nav");
	var liList = nav.getElementsByTagName("li");
	for (var i = 0; i < liList.length; i++) {
		var thisLi = liList[i];
		if (thisLi.parentNode.parentNode.nodeName=="LI") { continue; }
		navItems++;
		thisLi.className = navItems + "item";
		thisLi.onmouseover = function() {
			createSubNav(this);
		};
	}
}

function getNavWidth() {
	navWidth=0;
	var nav = document.getElementById("nav");
	var liList = nav.getElementsByTagName("li");
	for (var i = 0; i < liList.length; i++) {
		var thisLi = liList[i];
		if (thisLi.parentNode.parentNode.nodeName=="LI") { continue; }
		navWidth = navWidth + parseInt(thisLi.getElementsByTagName("a")[0].offsetWidth);
	}
}
 
addEvent(window, "load", navSetMouseOvers);
