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");
		var resellers = document.getElementById("resellers-inner");
		
		if (specials) document.getElementById("specials-inner").style.height = newHeight;
		if (plans) document.getElementById("plans-inner").style.height = newHeight;
		if (resellers) document.getElementById("resellers-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;
		}
	}

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

	/*** show flyout function ***/
	function showResellers()
	{
		
		var elToDisplay = document.getElementById("resellers-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;
	}

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

		flyout = false;
	}

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

		flyout = false;
	}

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


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


	/*** 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" || el.id=="resellers" || el.id=="resellers-content") { kill = false; }
				el = el.parentNode;
			}

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