// scc_menu.js
//
// Customized, simple menu managment for www.somerset-christian-church.org
//
// Copyright 2006 somerset-christian-church.org

/* state variables to make sure only one menu is shown at a time */
var current_shown = null;
var current_timer = null;


/* attach a menu "link" with the menu.
 * both the link and the menu should be DIVs 
 * 
 * When mouse moves over the parent, the child menu is shown. If a menu is already visible, it is first hidden.
 * When the mouse leaves both the parent and child, the menu is hidden after 1/4 second
 */
function attach(parent_id,child_id) {
	parent_element = document.getElementById(parent_id);
	child_element = document.getElementById(child_id);
	
	// store both the ids in both elements so they can be retrieved no mater where you start.
	parent_element.menu_child = child_element.id;
	parent_element.menu_parent = parent_element.id;
	child_element.menu_child = child_element.id;
	child_element.menu_parent = parent_element.id;
	
	// the cursor changes to an I-beam over the DIV normaly. This makes it obvious that something can happen.
	parent_element.style.cursor = "pointer";
	
	// hide the child element. This way the user doesn't have to.
	child_element.style.visibility = "hidden";
		
	// we change the child's position here to take it out of the flow for the page.
	// Otherwise, the browser leaves room for it.
	child_element.style.position = "absolute";
	
	// set the mouseOver and mouseOut functions
	parent_element.onmouseover = show;
	parent_element.onmouseout = hide;
	child_element.onmouseover = show;
	child_element.onmouseout = hide;
}

/* Actually hide the menu.
 *
 * This can be called from the timer or when a new menu is shown.
*/
function do_hide(item_id) {
	var item = document.getElementById(item_id);
	child_element = document.getElementById(item.menu_child);

	child_element.style.visibility = "hidden";
	current_shown = null;
	if(current_timer != null) {
			// shut down the timer if it is still running. Nothing bad would happen if it was called twice though.
			clearTimeout(current_timer);
	}
	current_timer = null;
}

/* Called on mouseOut
 * 
 * Sets up a timer to hide the menu after about 1/4 second. This helps with bad aim :-)
 */
function hide() {
	child_id = this.menu_child;

	current_timer = setTimeout("do_hide(\"" + child_id + "\")",300);
}

/* Show the menu.
 * 
 * this is the item that fired the event. We use the menu_parent and menu_child tags
 * so it doesn't matter which element we were passed.
 * 
 * If another menu is being shown, it is hidden first.
 */
function show() {
	// hide any existing menu
	if (current_shown != null) {
		child_id = current_shown.menu_child;
		if (child_id != this.menu_child) {
			do_hide(child_id);
		}
		// and shut down any existing hide timer
		if(current_timer != null) {
			clearTimeout(current_timer);
			current_timer = null;
		}
	}
	parent_id = this.menu_parent;
	parent_element = document.getElementById(parent_id);
	
	child_id = parent_element.menu_child;
	child_element = document.getElementById(child_id);
	
	// figure out where to show the menu
	
	// start with the offset of the menu link, relative to the parent (I think?)
	var top = parent_element.offsetTop - 185;
	var left = parent_element.offsetLeft + 175;
	
	// adjust for all the parent's offsets to make the numbers relative to the window
	p = parent_element.offsetParent;
	while(p) {
		top += p.offsetTop;
		left += p.offsetLeft; 
		p = p.offsetParent; 

	}
	
	// set the location
	/* child_element.style.top = top + "px"; */ 
	child_element.style.top = top + "px";
	child_element.style.left = left + "px";
	
	// show it on top of everything else. The default Z level is 0
    child_element.style.zIndex = 15; 
	
	// and show it.
	child_element.style.visibility = "visible";
	
	// remember it so we can close it before showing another menu
	current_shown = child_element;
}

/* Connect all top level menu_link elements in the menu_block to their menus
 * 
 * Briefly, cycle through all direct children if the element who's id was passed
 * in and if they have "_menu_link" in their name, strip off the "_link" to find the 
 * associated menu and connect them up.
 */
function connect_all(menu_block_id) {
	
	menu_block = document.getElementById(menu_block_id);
	
	elements = menu_block.childNodes;
	
	for (i = 0;i < elements.length; i++) {
		e = elements[i];
		id = e.id;
		if(id == null) {
			continue;
		}
		if (e.id.indexOf("_menu_link") != -1) {
			menu_name = e.id.substring(0,e.id.length - 5);
			try {
				attach(e.id,menu_name);
			} catch (error){
			}
		}
	}
}