/**
 * Javascript collapsing/expanding menu for unordered lists
 * @author: Markus Hohenwarter
 * @date: 19. 8. 2005
 */

/**
 * Color for highlighting of last clicked link 
 */
var HIGHLIGHT_COLOR = "#d44244";

/**
 * Variable to specify whether more than one menu may 
 * be expanded
 */
var ALLOW_MULTIPLE_EXPANDED_MENUS = false;


/****************************
 * Example for usage in HTML
 ****************************
 *  - IMPORTANT: place the script AFTER the menu!
 *  - menu:

	<ul id="menu">
	  <li><a href="#">Page 1</a></li>
	  <li><a href="#">Page 2</a></li>
	  <li><a href="#">Page 3</a></li>

	  <li>Submenu 1
		<ul>
			<li><a href="#">Page 1</a></li>
			<li><a href="#">Page 2</a></li>
			<li><a href="#">Page 3</a></li>
		</ul>
	  </li>

	  <li>Submenu 2
		<ul>
			<li><a href="#">Page 1</a></li>
			<li><a href="#">Page 2</a></li>
			<li><a href="#">Page 3</a></li>
		</ul>
	  </li>

	  <li><a href="#">Page 4</a></li>
	</ul>
	
	<script src="_navbar.js" type="text/javascript"></script>
 
 **** example end ****
 */

/**
 * Submenu headers (<li>) should only expand or collapse their menu
 * if none of it's submenu items was clicked. The boolean variable 
 * mouseOverMenuItem is set to true if the mouse is moved over a 
 * submenu link (@see initSubmenuHeader()). 
 * The menu will only be changed after a click if mouseOverMenuItem == false.
 */
var mouseOverMenuItem = false;

var initing = true; 		// true during initing time
var lastClickedLink = null; 	// last link that was clicked at
var expandedMenu = null;	// currently expanded menu
var textColor; 			// default text color;

/**
 * Inits menu 
 * @param root: main <ul> node of menu
 */
function initMenu(root) {
	if (!root) return;

	// look for nested lists: these are the submenus
	for (var i=0; i < root.childNodes.length; i++) {
		var node = root.childNodes[i]; 				

		if (node.nodeName == "LI") {		
			var submenu = null;
			var link = null;		

			// look for submenu <ul>
			for (var k=0; k < node.childNodes.length; k++) {				
				var subnode = node.childNodes[k];				
				if (subnode.nodeName == "UL") {
					submenu = subnode;
					toggle(submenu); // hide all entries of submenu
				}														
			}

			if (submenu) {
				initSubmenuHeader(node, submenu);
			} 
			else if (!ALLOW_MULTIPLE_EXPANDED_MENUS) {
				// if only one menu should be expanded at any time
				// clicking on any other main item should collapse this menu
				node.onclick = function() {
					if (expandedMenu != null)
						toggle(expandedMenu);
				}
			}
		} 
	}

	initLinks(root);
	textColor = root.style.color;
	initing = false;
}

/**
 * Shows or hides all children of an <ul> node
 * @param root: <ul> node
 */
function toggle(root) {

	var didExpand = false;

	// change visible state of all <li> children
	for (i=0; i < root.childNodes.length; i++) {
		var node = root.childNodes[i];		
		if (node.nodeName == "LI") {
			// toggle display style
			if (node.style.display == "none") {
				node.style.display = "block";
				didExpand = true;
			}
			else {
				node.style.display = "none"; 
			}
			
			if (initing) 
				initMenuItem(node);
		} 	
	}	

	// did expansion
	if (!ALLOW_MULTIPLE_EXPANDED_MENUS  && didExpand) { 
		// close currently expanded menu 
		if (expandedMenu != null)
			toggle(expandedMenu); 
		
		// remember this menu as expanded menu
		expandedMenu = root;
	} 
	// menu was collapsed
	else {
		expandedMenu = null;
	}
}

/**
 * Inits the actions for a submenu header to expand/toggle it's submenu.
 * @param node: header node (<li>) 
 * @param submenu: submenu node (<ul>)
 */
function initSubmenuHeader(node, submenu) {
	node.onclick = function() {
		// only toggle if the mouse is not over one of the submenu items.
		// if only one menu may is expanded it shouldn't be collapsed on click
		if (!mouseOverMenuItem &&
			(ALLOW_MULTIPLE_EXPANDED_MENUS || submenu != expandedMenu)) {
			toggle(submenu);				
		}
	};

	node.onmouseover = function() {			
		if (!mouseOverMenuItem) {
			this.style.cursor = "pointer";	
			setHighlighting(this, true);		
		}
	};

	node.onmouseout = function() {
		if (this != lastClickedLink)
			setHighlighting(this, false);		
		this.style.cursor = "default";
	};
}

/**
 * Inits the actions for a menu item: the variable
 * mouseOverMenuItem is set on mouseover/mouseout.
 * @param node: submenu item node (<li>) 
 */
function initMenuItem(node) {	
	node.onmouseover = function() {
		mouseOverMenuItem = true;
	};

	node.onmouseout = function() {
		mouseOverMenuItem = false;
	};
}

/**
 * Inits all links for highlighting of the last link clicked 
 * @param link: menu root (<ul>)
 */
function initLinks(root) {
	if (root.nodeName == "A") {
		root.onclick = function() {
			linkClicked(this);			
		};	
	} 

	for (var i=0; i < root.childNodes.length; i++) {
		initLinks( root.childNodes[i] );		
	}	
}

/**
 * Tells the menu that a menu item with a link was clicked.
 * This link will be highlighted.
 * @param link: link (<a>) clicked at
 */
function linkClicked(link) {
	if (lastClickedLink)
		setHighlighting(lastClickedLink, false);
	
	lastClickedLink = link;
	setHighlighting(link, true);
}

/**
 * Turns highlighting of node on or off.
 * @param: flag: true = on, false = off
 */
function setHighlighting(node, flag) {
	if (flag)
		node.style.color = HIGHLIGHT_COLOR;
	else
		node.style.color = textColor;
}

/**
 * Init menu after loading the page
 */
// window.onload=initMenu(document.getElementById("menu")); // Scriptfehler im IE!!!