var onPosition = "82px";
var offPosition = "-999em";

function LoadMenu()
{
	LoadBox();
	SFhover();
	SetDropdownEvents();
	SetQuickEvents();
}

function SFhover()
{
	/* +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+
	   | For all <ul>s in the object with the ID "dropdown":  |
	   |	onmouseover, set the class name to "sfHover"      |
	   |	onmouseout, clear the class name                  |
	   +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+ */

	if ( document.getElementById )
	{
		var menus = document.getElementById("dropdown").getElementsByTagName("ul");

		for ( var i=0; i < menus.length; i++ )
		{
			menus[i].parentNode.onmouseover = function()
			{
				this.className += " sfHover";
				document.getElementById("box").style.visibility = "visible";
			};

			menus[i].parentNode.onmouseout = function()
			{
				this.className = this.className.replace(" sfHover", "");
				document.getElementById("box").style.visibility = "hidden";
			};
		}
	}
}

function LoadBox()
{
	/* +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+
	   | Creates a <div> element                         |
	   | and sticks it right before the dropdown menu.   |
	   |	                                             |
	   | Creating this element after the page has loaded |
	   | will keep code that is strictly for looks       |
	   | out of our well-structured document.            |
	   +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+ */

	var objDiv = document.createElement("div");

	objDiv.id = "box";
	
	var objDropdown = document.getElementById("dropdown");
	
	objDropdown.parentNode.insertBefore(objDiv, objDropdown);
}

function SetDropdownEvents()
{
	/* +~~~~~~~~~~~~~~~~~~~~~~~~+
	   | On mouseover, show it; |
	   | On mouseout, hide it.  |
	   +~~~~~~~~~~~~~~~~~~~~~~~~+ */

	if ( document.getElementById )
	{
		document.getElementById("dropdown").onmouseout = function()
		{
			this.style.left = offPosition;
			document.getElementById("box").style.visibility = "hidden";
		};

		document.getElementById("dropdown").onmouseover= function()
		{
			this.style.left = onPosition;
		};
	}
}

function SetQuickEvents()
{
	/* +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+
	   | Sets the quickmenu "button"       |
	   | to have the same mouseover effect |
	   | as the dropdown.                  |
	   +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+ */

	if ( document.getElementById("quickMenu") )
	{
		document.getElementById("quickMenu").onmouseover = function()
		{
			document.getElementById("dropdown").style.left = onPosition;
		};

		document.getElementById("quickMenu").onmouseout = function()
		{
			document.getElementById("dropdown").style.left = offPosition;
		};
	}
}