/*

	This script is used for Javascript drop down menus.
	
	Copy script tags below and input it into your source after the drop out menu HTML.
	
	<script type="text/javascript" src="/themes/[theme name]/dropoutmenus.js"></script>
	<script type="text/javascript">setMenu();</script>

*/

// You will need to adjust menuItem and menuLink to the ID's on your main links and sub menus.
var menuItem = new Array('subNav01','subNav02','subNav03','subNav04','subNav05','subNav06','subNav07','subNav08'),
	menuLink = new Array('nav01','nav02','nav03','nav04','nav05','nav06','nav07','nav08'),
	navTimer;

function el(elementID) {
	return document.getElementById(elementID);
} 

function es(eID) {
	return el(eID).style;
}

function openMenu(itemNum) {
	clearTimeout(navTimer);
	
	var selectBoxes = document.getElementsByTagName('select');
	
	for(x=0;x< selectBoxes.length;x++) {
		selectBoxes[x].style.visibility = "hidden";
	}
		
	numItems = menuItem.length-1;
	
	for(i=0;i <= numItems;i++) {
		es(menuItem[i]).display = 'none';
		es(menuLink[i]).backgroundPosition = 'top';
	}

	es(menuItem[itemNum]).display = 'block';
	es(menuLink[itemNum]).backgroundPosition = 'bottom';
}

function menuTimer(num) {
	navTimer = setTimeout("closeMenu("+num+")", 200);
}

function closeMenu(itemNum) {
	es(menuItem[itemNum]).display = 'none';
	
	var selectBoxes = document.getElementsByTagName('select');
	
	for(x=0;x < selectBoxes.length;x++) {
  		selectBoxes[x].style.visibility = "visible";
	}
	
	es(menuLink[itemNum]).backgroundPosition = 'top';
}

function addListener(num) {
	el(menuLink[num]).onmouseover = function () { openMenu(num); };
	el(menuItem[num]).onmouseover = function () { openMenu(num); };
	el(menuLink[num]).onmouseout = function () { menuTimer(num); };
	el(menuItem[num]).onmouseout = function () { closeMenu(num); };
}

function setMenu() {
	for(i=0;i < menuItem.length;i++) {
		addListener(i);
	}
}