// JavaScript Document
/*

	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('subnav-1','subnav-2','subnav-4','subnav-5','subnav-6','subnav-7'),
	menuLink = new Array('nav-1','nav-2','nav-4','nav-5','nav-6','nav-7'),
	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);
	}
}