///Version 2.1 (10/14/2008)
///One level horizontal menu with submenus
///Written by Randy Whitelaw
///Make sure you have the menu class defined usually in menu.css
///Works in Firefox 2-3, Opera 9, Google Crome, IE 7, IE 6 except fixWidth.  Haven't tried others.

///To Do:
///Add classes to all elements and then run an onload script to set the parent/child relationship.
///This would allow multi level menus with no javascript editing.
///Fix the fixWidth function for IE6. Most likely this would work fine if the main menu isn't built inside a table.
///Add a timer on the hideMenu so it isn't an instant hide, about 250 ms.
///IE8 shows alignRight menus off about 10 px. Most likely the padding isn't calculated the same.

///<summary>
///Called from any menu item that has a submenu.
///This will show the given submenu.
///This is also called from the submenu so it doesn't close while you hovering on the submenu.
///</sumary>
///<param name="menu" type="string">Required. The id of the submenu (usually a div)</param>
///<param name="parent" type="string">Required. The id of the parent menu item (usually a link)</param>
///<param name="fixWidth" type="boolean" default="false">Optional. If true, the submenu will be the same width as the parent. If false, the submenu will be width of the submenu.  You can set the style of the submenu, or just leave it blank.</param>
///<param name="alignRight" type="boolean" default="false">Optional. If true, the submenu will align with the right. Usually only use this for the last menu item.</param>
function showMenu(menu, parent, fixWidth, alignRight)
{
	//get the objects
	var m = document.getElementById(menu);
	var p = document.getElementById(parent);
	
	//set the background color of the parent link
	//this wont do anything while the link is hovered, but keeps it highlighted while the submenu is hovered.
	//make sure this is the same color as the css
	p.style.backgroundColor = "#cccccc";
	
	//minus 2 because of the left and right borders
	//IE6 seems to fixWidth no matter what, unless you specify a width in the submenu style.
	if( fixWidth )
	{
		var fix = 0;
		if( menuFunctionIsIE() )
		{
			fix = -2;
		}
		m.style.width = p.offsetWidth + fix + "px";	
	}
	else
	{
		//IE needs this so the links will stretch 100%
		//This is only needed if the width isn't set in the submenu's style.
		m.style.width = m.offsetWidth - 2 + "px";	
	}
	
	//calculate the width of the submenu and the placement it should be
	if( alignRight )
	{
		//because of the border, it needs to go 1 more to the right
		var fix = 1;
		if( menuFunctionIsIE() )
		{
			//because ie counts the padding as width
			//this will need to match the css padding
			fix = 12;
		}
		m.style.left = fix + (menuFunctionGetX(p) + p.offsetWidth - 2) - (m.offsetWidth - 2) + "px";
	}
	else
	{
		if( !menuFunctionIsIE() )
		{
			m.style.left = menuFunctionGetX(p) - 1 + "px";
		}
	}
	
	//show the menu last so all the styles are in place
	m.style.visibility = "visible";
}

///<summary>
///Hides the given submenu.
///</sumary>
///<param name="menu" type="string">Required. The id of the submenu (usually a div)</param>
///<param name="parent" type="string">Required. The id of the parent menu item (usually a link)</param>
function hideMenu(menu, parent)
{
	//get the objects
	var m = document.getElementById(menu);
	var p = document.getElementById(parent);
	
	//hide the submenu
	m.style.visibility = "hidden";	
	
	//reset the parent back to it's css properties.
	p.style.color = "";
	p.style.backgroundColor = "";
}

///<summary>
///Browser check. Returns true if IE browser.
///</sumary>
function menuFunctionIsIE()
{
	return (navigator.appName.toLowerCase().indexOf("explorer") >= 0 );
}

///<summary>
///Get's the x position of the obj
///</sumary>
function menuFunctionGetX(obj) {
	var curleft = 0;
	if(obj.offsetParent) {
		while(obj.offsetParent) {
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}