/*=================================================================*\
 * electron_menumanager.js
 * 
 * A series of function to create and manage contextual menus.
 * Shows or hides one element when another is clicked or hovered.
 *
 * Author: Electron (xelectronx@gmail.com)
 * Date: 26-07-07
 * For: Lazura Network (lazura.net, pokenova.eeveeshq.com, valiant-lives.net, isolus-arthouse.net, lazarus-experiment.net))
 * Copyright: (c) 2007 Electron. All rights reserved.
\*=================================================================*/

/**
 * Registers the parent and child elements to act as the trigger and menu.
 * 
 * @param string - ID string of the parent element
 * @param string - ID string of the child element
 * @param string - Either "click" or "hover", depending on what you want
 * @param string - Either "below" (menu below the parent element) or "beside"
 *                 (menu to the right of the parent element)
 * @param string - CSS cursor style (optional)
 */
function RegisterControl(parent, child, showtype, position, cursor)
{
	var elm_parent = document.getElementById(parent);
	var elm_child = document.getElementById(child);
	
	// store various information to be used by the other functions
	elm_parent["info_parent"] = elm_parent.id;
	elm_child["info_parent"] = elm_parent.id;
	elm_parent["info_child"] = elm_child.id;
	elm_child["info_child"] = elm_child.id;
	elm_parent["info_position"] = position;
	elm_child["info_position"] = position;
	
	// start visibility
	elm_child.style.position = "absolute";
	elm_child.style.visibility = "hidden";
	elm_child.style.zIndex = "100";

	// set the cursor if it was requested
	if (typeof cursor != 'undefined')
	{
		elm_parent.style.cursor = cursor;
	}
	
	// set event managers depending on showtype
	switch (showtype)
	{
		case "click":
		{
			elm_parent.onclick = ClickControl;
			elm_parent.onmouseout = HideControl;
			elm_child.onmouseover = ShowControl;
			elm_child.onmouseout = HideControl;
			break;
		}
		case "hover":
		{
			elm_parent.onmouseover = ShowControl;
			elm_parent.onmouseout = HideControl;
			elm_child.onmouseover = ShowControl;
			elm_child.onmouseout = HideControl;
			break;
		}
	}
}

/**
 * Event handler to display the child element.
 */
function ShowControl()
{
	var elm_parent = document.getElementById(this["info_parent"]);
	var elm_child = document.getElementById(this["info_child"]);
	
	ShowControlProc(elm_parent.id, elm_child.id);

	clearTimeout(elm_child["info_timeout"]);
}

/**
 * Actually shows the child element, in the correct place.
 *
 */
function ShowControlProc(parent, child)
{
	var elm_parent = document.getElementById(parent);
	var elm_child = document.getElementById(child );
	
	var top  = (elm_child["info_position"] == "below") ? (elm_parent.offsetHeight + 0) : 0;
	var left = (elm_child["info_position"] == "beside") ? (elm_parent.offsetWidth + 0) : 0;
	
	for (; elm_parent; elm_parent = elm_parent.offsetParent)
 	{
		top  += elm_parent.offsetTop;
		left += elm_parent.offsetLeft;
	}
	
	elm_child.style.position = "absolute";
	elm_child.style.top = top + "px";
	elm_child.style.left = left + "px";
	elm_child.style.visibility = "visible";
}

/**
 * Event handler to hide the child element
 */
function HideControl()
{
	var elm_child = document.getElementById(this["info_child"]);
	
	elm_child["info_timeout"] = setTimeout("document.getElementById('" + elm_child.id + "').style.visibility = 'hidden'", 0);
}

/**
 * Event handler for the "onclick" event. Hides or shows the child element.
 *
 * @return bool - Always returns false
 */
function ClickControl()
{
	var elm_parent = document.getElementById(this["info_parent"]);
	var elm_child = document.getElementById(this["info_child" ]);

	if (elm_child.style.visibility != "visible")
	{
		ShowControlProc(elm_parent.id, elm_child.id);
	}
	else
	{
		elm_child.style.visibility = "hidden";
	}
	
	// do not open link in browser!
	return false;
}