addLoadEvent(function() { 

	/**************************
		Flyout script
	**************************/

	var flyout = false;			/*** let us know if the flyout is out or not ***/

	/*** adjusts the height of the specials flyout ***/
	function adjustFlyoutHeights() {
		var newHeight = (document.getElementById("order-by-phone-inner").offsetHeight-10) + "px";  // 10 is the padding on content
		var specials = document.getElementById("specials-inner");
		var plans = document.getElementById("plans-inner");
		
		if (specials) document.getElementById("specials-inner").style.height = newHeight;
		if (plans) document.getElementById("plans-inner").style.height = newHeight;
	}
	
	/*** displays the corners for overlap effect ***/
	function displayCorners(show)
	{
		var tl = document.getElementById("flyout-tl");
		var bl = document.getElementById("flyout-bl")
		
		if (tl && bl)
		{
			if (show)
			{
				AddClass(tl, "hover");
				AddClass(bl, "hover");
			}
			else
			{
				KillClass(tl, "hover");
				KillClass(bl, "hover");
			}
		}
	}

	/*** show flyout function ***/
	function showSpecials()
	{
		
		var elToDisplay = document.getElementById("specials-content");
		
		if (elToDisplay)
		{
			adjustFlyoutHeights();
			AddClass(elToDisplay, "hover");
			displayCorners(true);
			flyout = true;
		}
		
		
	}

	/*** hide flyout function ***/
	function hideSpecials()
	{
		KillClass(document.getElementById("specials-content"), "hover");
		displayCorners(false);

		flyout = false;
	}


	/*** show flyout function ***/
	function showPlans()
	{
		var elToDisplay = document.getElementById("plans-content");
		
		if (elToDisplay)
		{
			adjustFlyoutHeights();

			AddClass(elToDisplay, "hover");
			displayCorners(true);

			flyout = true;
		}
	}

	/*** hide flyout function ***/
	function hidePlans()
	{
		KillClass(document.getElementById("plans-content"), "hover");
		displayCorners(false);

		flyout = false;
	}

	var elPlans = document.getElementById("plans");
	var elSpecials = document.getElementById("specials");


	/*** show flyout when mouseover the link ***/ 
	if (elSpecials) { elSpecials.onmouseover = function() { if (flyout) { hidePlans(); } showSpecials(); } } 
	if (elPlans) { elPlans.onmouseover = function() { if (flyout) { hideSpecials(); } showPlans(); } }

	/*** When we are showing the flyout and we move, see if we are still over the flyout link
		 or the flyout content area itself ***/
	document.onmousemove = function(e)
	{
		/*** if flyout is visible ***/
		if (flyout)
		{
			if (!e) e = window.event;

			var el = e.srcElement || e.target;
			var kill = true;

			/*** check element's "tree" upwards to see if any ids are that of the flyout link or flyout
			     if not then we know we are not over either of these things and we can hide the flyotu ***/
			while (el)
			{
				if (el.id=="specials" || el.id=="specials-content" || el.id=="plans" || el.id=="plans-content") { kill = false; }
				el = el.parentNode;
			}

			/*** not over flyout link or flyout so hide flyout ***/
			if (kill)
			{
				hideSpecials();
				hidePlans();
			}
		}
	}
});