var arrLabel = new Array();
var arrLink = new Array();

function addSubMenu (index){
	arrLabel[index] = new Array();
	arrLink[index] = new Array();
}

function addSubMenuItem (index, label, url) {
	 arrLabel[index][arrLabel[index].length] = label;
	 arrLink[index][arrLink[index].length] = url;
}

//creating the drop down div for respective main navs
function makeRolloverMenu(){
	var strDiv = "";
	var strTable = "";	
	
	for (var i=0 ; i<arrLabel.length ; i++)	{
		strDiv += " <div id='SubMenu_" + i + "' class=\"nav_subMenu\" onmouseover=\"showSubMenu(" + i + ");\" onmouseout=\"hideSubMenu(" + i + ");\"> <table border=0 cellpadding=0 cellspacing=0><tr><td class=>";
		strTable = "<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td><div class=\"nav_subMenuBg\">";
		
	  	for(var j=0 ; j<arrLabel[i].length; j++) {
			strTable += "<div id='SubMenu_"+ i + "_" + j + "' class='nav_subMenuItem' onClick='setLink("+i+","+j+")'; onMouseOver='rollOver(this);' onMouseOut='rollOut(this);' >" + arrLabel[i][j] + "</div>";
		}
		
		strTable += "</td></tr></table>";
		strDiv += strTable +" </td></tr></table></div>";
	}
	document.write(strDiv);
}

function setLink(i, j) {
	window.location = arrLink[i][j];
}

function rollOver(obj) {
	//alert(obj);
	obj.className = 'nav_subMenuItemHover';
}

function rollOut(obj) {
	obj.className = 'nav_subMenuItem';
}


//showing the drop down menu + changing the rollover effect for main nav image
function showSubMenu(index) {
	var topDistance = 90;
	var menuItemWidth = 66;
	var containerWidth = 780;
	var oSM1 = document.getElementById("SubMenu_" + index);
	var iLeftOffset = ((document.body.offsetWidth - containerWidth) / 2) + 237;
	var leftDistance = index * menuItemWidth + iLeftOffset;
	
	oSM1.style.top = topDistance + 'px';
	oSM1.style.left = leftDistance + 'px';
	//alert(leftDistance);
	oSM1.style.visibility = 'visible';
	
	var oMM1 = document.getElementById("nav_" + index);
	var imgFileName = oMM1.src;
	oMM1.src = imgFileName.replace(/_off/,"_on");
}

//hiding the dropdown menus + resetting the main nav image
function hideSubMenu(index) {
	var oSM1 = document.getElementById("SubMenu_" + index);
	oSM1.style.visibility = 'hidden';
	
	var oMM1 = document.getElementById("nav_" + index);
	var imgFileName = oMM1.src;
	oMM1.src = imgFileName.replace(/_on/,"_off");
}

//Creating the Global Nav Menu Here-----------------------------------------------------
addSubMenu(0);
addSubMenuItem(0, "Overview", "origins.html");
addSubMenuItem(0, "Founder's Message", "founder.html");
addSubMenuItem(0, "Citizenship", "citizenship.html");
addSubMenuItem(0, "News", "news.html");
addSubMenuItem(0, "Contact Us", "contact.html");
addSubMenu(1);
addSubMenu(2);
addSubMenu(3);
addSubMenu(4);
addSubMenu(5);

makeRolloverMenu();