<!--
/********************************************************************************
SCRIPT:			DHTML Menu
AUTHOR:			Warren Searle, Precise Minds Ltd (warren@precise-minds.co.uk)
VERSION:		1.0
DESCRIPTION:	Enables easy inclusion of hidden pop-out menus.
				All style and script definitions are external to page thus not interfering with accessibility of content.
HISTORY:		20/02/2005			Warren Searle, PM		Script created
				01/03/2005			Warren Searle, PM		Menu is now hidden until it has finished loading
				01/05/2005			Warren Searle, PM		Introduced div wrapper for nested lists
															Removed classes
				02/05/2005			Warren Searle, PM		Fix: code had "main_navigation" hardcoded in it. can now use any name for menu and use mulitple instances on one page.
*********************************************************************************
INSTALLATION INSTRUCTIONS:
				To include on an html page:
				1. Create a nested menu on the page with the following structure:
					<div id="main_navigation" style="display:none;">
					<ul>
						<li>
							<a>menu iem</a>
							<div>
							<ul>
								<li><a>menu item</a></li>
								<li><a>menu item</a></li>
							</ul>
							</div>
						</li>
					</ul>
					</div>
				2. Place the following javascript on the calling page (or in external script on calling page):
					<script language="javascript">
					function window_onload() {
						setup_menu("main_navigation");
					} // end function
					var arr_main_navigation = new Array(2);
					var int_main_navigation_close_delay = 500;
					window.onload = window_onload;
					</script>
				3. Define styles as follows:
					#main_navigation
					#main_navigation ul
					#main_navigation ul li
					#main_navigation a
					#main_navigation div
					#main_navigation ul ul
					#main_navigation ul ul li
					#main_navigation ul ul li a
					#main_navigation ul ul li a:hover
					etc
********************************************************************************/
function setup_menu(menu_id) {
	if (document.getElementById && document.createElement) {				// only proceed if browsers supports elements
		var this_menu = document.getElementById(menu_id);					// get menu div
		if (this_menu.childNodes) {											// only proceed if childNodes is supported
			for (var i = 0; i < this_menu.childNodes.length; i++) {			// find root UL
				if (this_menu.childNodes[i] && this_menu.childNodes[i]["tagName"] && this_menu.childNodes[i].tagName.toLowerCase() == "ul") {
					process_child_items(menu_id, this_menu.childNodes[i], 0);	// process children
				} // end if
			} // end for
		} // end if
		this_menu.style.display="";											// show the menu (now it has loaded)
	} // end if
} // end function
function process_child_items(parent_id, menu_item, menu_level) {
	var i,j,k; // local counters
	for (i = 0; i < menu_item.childNodes.length; i++) {						// loop through all child elements
		if (menu_item.childNodes[i] && menu_item.childNodes[i]["tagName"] && menu_item.childNodes[i].tagName.toLowerCase() == "li"){	// only process LI items
			menu_item.childNodes[i].id = parent_id + "__" + (i+1);			// ensure LI have ids
			menu_item_children = menu_item.childNodes[i].childNodes;
			if (menu_item_children.length > 0) {							// check for children
				for (j = 0; j < menu_item_children.length; j++) {
					child_item = menu_item_children[j];	
					if (child_item && child_item["tagName"]) {
						if (child_item.tagName.toLowerCase() == "a") {		// this is a link
							this_ident = "1";
							child_item.onmouseover = show_children;			// add events
							child_item.onmouseout = hide_children;			// ""
							menu_item.childNodes[i].a = child_item;			// store reference to item
						} // end if
						if (child_item.tagName.toLowerCase() == "div") {	// this is a nested list
							// get nested list
							for (k=0; k<child_item.childNodes.length; k++) {
								if (child_item.childNodes[k]["tagName"] && child_item.childNodes[k].tagName.toLowerCase() == "ul") {
									if (child_item.className.toLowerCase() != "on") {	// child menu isn't on so hide it
										child_item.childNodes[k].style.display = "none";				// hide child menu
									} // end if
									process_child_items(menu_item.childNodes[i].id, child_item.childNodes[k], menu_level + 1);// process children
								} // end if
							} // end for
						} // end if 
					} // end if
				} // end for
			} // end if
		} // end if
	} // end for
} // end function
function show_children() {
	this.blur();
	var container = this.parentNode;
	var str_container_name = container.id;
	var arr_container_name = str_container_name.split("__");
	var int_current_level = arr_container_name.length - 1;
	if (int_current_level == 1) {
		eval("arr_" + arr_container_name[0] + "[0] = '" + str_container_name + "'");
	} // end if
	if (int_current_level == 2) {
		eval("arr_" + arr_container_name[0] + "[0] = '" + arr_container_name[0] + "__" + arr_container_name[1] + "'");
		eval("arr_" + arr_container_name[0] + "[1] = '" + str_container_name + "'");
	} // end if
	for (var i=0; i < container.childNodes.length; i++) {
		child_item = container.childNodes[i];
		if (child_item && child_item["tagName"] && child_item.tagName.toLowerCase() == "div") {
			if (child_item.className.toLowerCase() != "on") {	// child menu is on => don't need to do this
				for (j=0; j<child_item.childNodes.length; j++) {
					if (child_item.childNodes[j]["tagName"] && child_item.childNodes[j].tagName.toLowerCase() == "ul") {
						child_item.childNodes[j].style.display = "";
					} // end if
				} // end for
			} // end if
		} // end if
	} // end for
} // end function
function hide_children() {
	this.blur();
	var container = this.parentNode;
	var str_container_name = container.id;
	var arr_container_name = str_container_name.split("__");
	eval("arr_" + arr_container_name[0] + "[0]=''");
	eval("arr_" + arr_container_name[0] + "[1]=''");
	window.setTimeout("hide('" + container.id + "')",eval("int_" + arr_container_name[0] + "_close_delay"));
} // end function
function hide(container_name) {
	var str_container_name = container_name;
	var arr_container_name = str_container_name.split("__");
	var int_current_level = arr_container_name.length - 1;
	if (int_current_level == 1) {
		if ( str_container_name != eval("arr_" + arr_container_name[0] + "[0]") ) {
			// close the panel
			close_panel(document.getElementById(str_container_name));
		} // end if
	} // end if
	if (int_current_level == 2) { 
		if ( arr_container_name[0] + "__" + arr_container_name[1] != eval("arr_" + arr_container_name[0] + "[0]") ) {
			close_panel(document.getElementById(arr_container_name[0] + "__" + arr_container_name[1]));
		} // end if
		if ( str_container_name != eval("arr_" + arr_container_name[0] + "[1]") ) {
			close_panel(document.getElementById(str_container_name));
		} // end if
	} // end if
} // end if
function close_panel(container) {
	for (var i=0; i < container.childNodes.length; i++) {
		child_item = container.childNodes[i]
		if (child_item && child_item["tagName"] && child_item.tagName.toLowerCase() == "div") {
			if (child_item.className.toLowerCase() != "on") {	// child menu is on => don't need to do this
				for (j=0; j<child_item.childNodes.length; j++) {
					if (child_item.childNodes[j]["tagName"] && child_item.childNodes[j].tagName.toLowerCase() == "ul") {
						child_item.childNodes[j].style.display = "none";
					} // end if
				} // end for
			} // end if
		} // end if
	} // end for
} // end function
//-->