// the delay for the top and bottom menu
//var delay = 500;
var delay = 300;
var flyoutDelay = 200;
var secondFlyoutDelay = 200;
var selected;

//the names of the rollovers
var NavArray = new Array();
	NavArray[0] = "Livestock";
	NavArray[1] = "Commodity";
	NavArray[2] = "Flatbed";
	NavArray[3] = "Gooseneck";
	
//the names of the flyouts
var FlyoutArray = new Array();
	//livestock flyouts
	FlyoutArray[0] = "SilverStar";
	FlyoutArray[1] = "PSAL";
	FlyoutArray[2] = "PSAGL";
	//commodity flyouts
	FlyoutArray[3] = "Pacesetter";
	FlyoutArray[4] = "Commander";
	FlyoutArray[5] = "Patriot";
	FlyoutArray[6] = "SuperB";
	//flatbed flyouts
	FlyoutArray[7] = "Roadbrute";
	FlyoutArray[8] = "Premier";
	//gooseneck flyouts
	FlyoutArray[9] = "Foreman";
	FlyoutArray[10] = "Ranchhand";
	FlyoutArray[11] = "Roper";
	FlyoutArray[12] = "Stampede";
	
//the names of the second nav row menus
var SecondNavArray = new Array();
	SecondNavArray[0] = "Sales";
	SecondNavArray[1] = "Parts";
	SecondNavArray[2] = "Apparel";
	
	
function turnAllOffExcept(Type, Name)
{
	var nameType = Name + Type;
	if (selected != undefined && selected != nameType)
	{
		//alert(selected);
		var stopTimeout = setTimeout(function() { document.getElementById(selected).style.display = 'none'; }, delay);	
	}
	
	for (Button in NavArray)
	{
		var RolloverEl = document.getElementById(NavArray[Button] + "Rollover");
		var ButtonEl = document.getElementById(NavArray[Button] + "Button");
		
		if ("Rollover" != Type && NavArray[Button] != Name)
		{
			RolloverEl.style.display = 'none';
			ButtonEl.style.background = 'none';
			ButtonEl.style.color = 'white';
		}
		else if ("Rollover" == Type && NavArray[Button] == Name)
		{
			ButtonEl.style.background = 'white';
			ButtonEl.style.color = '#006699';
			
			var flyTimeout = setTimeout(function() { RolloverDelay(Name) }, delay);
		}
	}
	
	for (Menu in SecondNavArray)
	{
		var MenuEl = document.getElementById(SecondNavArray[Menu] + "SecondRowMenu");
		var RowEl = document.getElementById(SecondNavArray[Menu] + "SecondRow");
		
		if ("SecondRowMenu" != Type && SecondNavArray[Menu] != Name)
		{
			MenuEl.style.display = 'none';
			RowEl.style.background = 'none';
			RowEl.style.color = 'white';
		}
		else if ("SecondRowMenu" == Type && SecondNavArray[Menu] == Name)
		{
			RowEl.style.background = 'white';
			RowEl.style.color = '#006699';
			var secondFlyTimeout = setTimeout(function() { MenuDelay(Name) }, delay);
		}
	}
}

function RolloverDelay (Name)
{
	var RolloverEl = document.getElementById(Name + "Rollover");
	var Left = ((document.getElementById('container').offsetLeft * 1) + 221) + "px";
	RolloverEl.style.left = Left;
	$('#' + Name + 'Rollover').fadeIn(flyoutDelay);	
	selected = Name + "Rollover";
}

function MenuDelay (Name)
{
	var MenuEl = document.getElementById(Name + "SecondRowMenu");
	var leftTopArray = calculateMenuLeftTop(Name);
	MenuEl.style.left = leftTopArray[0] + "px";
	MenuEl.style.top = leftTopArray[1] + "px";
	$('#' + Name + 'SecondRowMenu').fadeIn(secondFlyoutDelay);	
	selected = Name + "SecondRowMenu";
}
	
function turnButtonsOff(Name,e)
{
	var Button;
	var MouseX;
	var MouseY;
	
	var Element = document.getElementById(Name + "Rollover");
	
	var Top = Element.offsetTop;
	var Left = Element.offsetLeft;
	var Bottom = Element.offsetTop + 300;
	var Right = Element.offsetLeft + 745;
	
	if (window.event)
	{
		MouseX = window.event.clientX;
		MouseY = window.event.clientY;
	}
	else
	{
		MouseX = e.clientX;
		MouseY = e.clientY;
	}				
	
	if (MouseX > Left && MouseX < Right && MouseY >= Top && MouseY < Bottom)
	{
		//inside rollover, do nothing
	}
	else
	{
		turnAllOffExcept('', '');
	}
}
	
function displayGraphic(Name, Graphic)
{
	document.getElementById(Name + 'GraphicRollover').src = "/images/NavigationRollovers/" + Graphic;
}
	
function displayFlyout(Name)
{ 	
	var linkElement = document.getElementById(Name);
	var flyoutElement = document.getElementById(Name + "Flyout");
	
	//ie 7 calculates the offsets differently than modern browsers
	var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
	var ie7Left = ie7Top = 0;
	
	//variables used for calculation
	var Left = Top = 0;
	var totalParentLeft = totalParentTop = 0;

	//loop through and get positions of parents
	var obj = linkElement; 
    if (obj.offsetParent) 
    {
		var counter = 0;
    	do 
        {
			Left += obj.offsetLeft;
			Top += obj.offsetTop;
			if (counter > 0)
			{
				totalParentLeft += 	obj.offsetLeft;
				totalParentTop += 	obj.offsetTop;
			}
			counter++;
		} while (obj = obj.offsetParent);
		if (ie7)
		{
			ie7Left = 20;
			ie7Top = 20;
		}
		
		//final calculation of the left and top
		Left = Left - totalParentLeft + linkElement.offsetWidth + ie7Left;
		Top = Top - totalParentTop - 6 + ie7Top;
		//alert("Left: " + Left + ", Top: " + Top);
		//alert("P Left: " + totalParentLeft + ", P Top: " + totalParentTop);
	}
	
	//hide all flyouts, then display the passed one
	for (Flyout in FlyoutArray)
	{
		hideFlyout(FlyoutArray[Flyout]);
	}

	flyoutElement.style.left = Left + "px";
	flyoutElement.style.top = Top + "px";
	flyoutElement.style.display = "block";
}
	
function hideFlyout(Name)
{
	var flyoutElement = document.getElementById(Name + "Flyout");
	flyoutElement.style.display = "none";
}
	
function hideIfOutOfFlyout(Name,e, RolloverName, RolloverGraphic)
{
	var Button;
	var MouseX;
	var MouseY;
	
	var linkElement = document.getElementById(Name);
	var containerElement = document.getElementById('container');
	var Element = document.getElementById(Name + "Flyout");
	
	var containerTop = containerElement.offsetTop;
	var containerLeft = containerElement.offsetLeft;
	
	//calculate the top left bottom and right in relation to container and rollover position, which effectively calculates the absolute postions of the flyout
	var Top = Element.offsetTop + containerTop + 25;
	var Left = Element.offsetLeft + containerLeft + 223;
	var Bottom = Top + Element.offsetHeight;
	var Right = Left + Element.offsetWidth;
		
	//get the mouse x and y coordinates  
	if (window.event)
	{
		MouseX = window.event.clientX;
		MouseY = window.event.clientY;
	}
	else
	{
		MouseX = e.clientX;
		MouseY = e.clientY;
	}	
	
	if (MouseX > Left && MouseX < Right && MouseY > Top && MouseY < Bottom)
	{
		//inside flyout
		displayGraphic(RolloverName, RolloverGraphic);
		linkElement.style.color = '#006699';
	}
	else
	{
		//outside flyout
		hideFlyout(Name);
		displayGraphic(RolloverName, RolloverName + 'Default.jpg');
		linkElement.style.color = 'gray';
	}
}

function hideSecondRowMenu(Name)
{
	var navElement = document.getElementById(Name + "SecondRow");
	var menuElement = document.getElementById(Name + "SecondRowMenu");
	menuElement.style.display = 'none';
	
	navElement.style.background = '';
	navElement.style.color = 'white';
}

function hideIfOutOfMenu(Name,e)
{
	var Button;
	var MouseX;
	var MouseY;
	var containerElement = document.getElementById('container');
	var menuElement = document.getElementById(Name + "SecondRowMenu");
	var navElement = document.getElementById(Name + "SecondRow");
	
	var leftTopArray = calculateMenuLeftTop(Name);
	//var menuWidth = setMenuWidth(Name);
	
	var Left = leftTopArray[0];
	var Top = leftTopArray[1];
	var Bottom = Top + menuElement.offsetHeight;
	var Right = Left + menuElement.offsetWidth;
	
	//get the mouse x and y coordinates  
	if (window.event)
	{
		MouseX = window.event.clientX;
		MouseY = window.event.clientY;
	}
	else
	{
		MouseX = e.clientX;
		MouseY = e.clientY;
	}	
	
	if (MouseX > Left && MouseX < Right && MouseY > Top && MouseY < Bottom)
	{
		//inside menu
		//do nothing
	}
	else
	{
		//outside menu
		turnAllOffExcept('', '');
	}
}

function calculateMenuLeftTop(Name)
{
	var returnArray = new Array();
	var containerElement = document.getElementById('container');
	
	//add this value to the left offset (which is adding the widths of the 2nd menus)
	var additionalWidthOffset = -1;
	switch(Name)
	{
	case "Parts":
	  additionalWidthOffset = 242;
	  break;
	case "Apparel":
	  additionalWidthOffset = 341;
	  break;
	}
	
	//calculate the menus top and left based on the container width
	var Left = containerElement.offsetLeft + 221 + additionalWidthOffset;
	var Top = containerElement.offsetTop + 46;	
	returnArray[0] = Left;
	returnArray[1] = Top;
	
	return returnArray;
}