/* Last updated by Robert Arkwright; February 29th, 2007 */

//ARRAYS

var topNavMenu = new Array();
topNavMenu[0] = "tNavNews";
topNavMenu[1] = "tNavBuying";
topNavMenu[2] = "tNavOwners";

var vehicleNavMenu = new Array();
vehicleNavMenu[0] = "vNavIS";
vehicleNavMenu[1] = "vNavES";
vehicleNavMenu[2] = "vNavGS";
vehicleNavMenu[3] = "vNavLS";
vehicleNavMenu[4] = "vNavSC";
vehicleNavMenu[5] = "vNavLX";
vehicleNavMenu[6] = "vNavGX";
vehicleNavMenu[7] = "vNavRX";
vehicleNavMenu[8] = "vNavRX2";
vehicleNavMenu[9] = "vNavGS2";
vehicleNavMenu[10] = "vNavLSH";
vehicleNavMenu[11] = "vNavRX350";
vehicleNavMenu[12] = "vNavISC";
vehicleNavMenu[13] = "vNavHS250h";
vehicleNavMenu[14] = "vNavLFA";
//vehicleNavMenu[15] = "vNavGX460";

var catNavMenu = new Array();
catNavMenu[0] = "cNavSedans";
catNavMenu[1] = "cNavSport";
catNavMenu[2] = "cNavSUV";
catNavMenu[3] = "cNavHybrids";
catNavMenu[4] = "cNavFuture";
//catNavMenu[6] = "rNavConcept"; //This is "rNav" so that it is recognized as a regular button, and not a category drop down triggering button.

var catNavXOffset = new Array();
catNavXOffset[0] = 0;
catNavXOffset[1] = 0;
catNavXOffset[2] = -0;
catNavXOffset[3] = -187;
catNavXOffset[4] = -0;

//FUNCTIONS

function calibrateDropdown(menuID) {
	/* This function repositions a single dropdown menu, such that it appears in the correct location relative to its activation button. */
	
	var dropdown = document.getElementById(menuID + "Dropdown");
	var button = document.getElementById(menuID + "Button");
	if(dropdown==null || dropdown.yOffset == undefined ){
		return;
	}
	
	
	var tab;
	var x;
	var y;
	var menuType = menuID.slice(0, 4);
	if (dropdown && button) {
		x = getX(button);
		y = getY(button);
			
		dropdown.style.left = x + dropdown.xOffset + "px";
		dropdown.style.top = y + dropdown.yOffset + "px";
		
		if (!window.XMLHttpRequest) {
			//This browser is not IE7, Mozilla, Safari, Opera, and is probably IE 6; update IFRAME shims.
			shim = document.getElementById(menuID + "Shim");
			
			if (shim) {
				shim.style.left = x + dropdown.xOffset + "px";
				shim.style.top = y + dropdown.yOffset + "px";
				shim.style.width = dropdown.offsetWidth;
				shim.style.height = dropdown.offsetHeight;
			}
		}
		
		//Tab repositioning (for category nav menus)
		if (menuType == "cNav") {
			tab = document.getElementById(menuID + "Tab");
			
			if (tab) {
				tab.style.left = x + "px";
				tab.style.top = y + "px";
			}
		}
	}

}

function getX(element) {
    var x = 0;
    while(element) {
        x += element.offsetLeft;
        element = element.offsetParent;
    }
    return x;
}

function getY(element) {
    var y = 0;
    while(element) {
        y += element.offsetTop;
        element = element.offsetParent;
    }
    return y;
}

function hideMenu() {
	/*
	This function sets the target menu's visibility state, and makes its components visible.
	
	It seems strange to simply use a function to call a function, but we can't pass paramaters to standard JS event handler functions directly.
	Instead, this function acts as a proxy, called directly by the activation button, and passes the necessary paramaters to the next function,
	which does the actual work of toggling the menu's visibility.
	*/
	
	toggleMenuVis(this.menu, "hidden");
}

function initializeDropdown(menuID, imagePath, xOffset) {
	/* This function prepares a dropdown menu, and all associated DOM objects, prior to first use. */
	
	var menuType = menuID.slice(0, 4);
	
	//Initialize the menu's activation button.
	var initButton = document.getElementById(menuID + "Button");
	
	if (initButton) {
		//Image preloading.
		initButton.offState = new Image();
		initButton.offState.src = imagePath + menuID.toLowerCase() + "_off.gif";
		initButton.onState = new Image();
		initButton.onState.src = imagePath + menuID.toLowerCase() + "_on.gif";
			
		//Event handler functions.
		if (menuType == "cNav") {
			//Category nav dropdowns are activated by clicking - a standard rollover simply highlights them.
			initButton.onclick = showMenu;
			initButton.onmouseover = rollOver;
			initButton.onmouseout = rollOut;
		} else if (menuType == "rNav") {
			//These are category navigation buttons that don't display drop-down menus. Simply provide a rollover function for them.
			initButton.onmouseover = rollOver;
			initButton.onmouseout = rollOut;
		} else {
			//All other nav items will change upon a standard rollover.
			initButton.onmouseover = showMenu;
			initButton.onmouseout = hideMenu;
		}
			
		//Parameter initialization
		initButton.menu = menuID;
	}
	
	//Initialize the menu's "tab" component
	if (menuType == "cNav") {
		var initTab = document.getElementById(menuID + "Tab");
	
		if (initTab) {
			initTab.onmouseover = showMenu;
			initTab.onmouseout = hideMenu;
			initTab.menu = menuID;
		}
	}
	
	//For all menus, initialize the "dropdown" component.
	if (menuType != "rNav") {
		//Initialize the menu's "dropdown" component
		var initMenu = document.getElementById(menuID + "Dropdown");
		
		if (initMenu) {
			//Event handler functions
			initMenu.onmouseover = showMenu;
			initMenu.onmouseout = hideMenu;
			
			//Parameter initialization
			initMenu.menu = menuID;
			initMenu.xOffset = xOffset;
			if (menuType == "cNav") {
				//Category nav dropdowns are y-offset based on their tab, not the rollover button
				initMenu.yOffset = initTab.offsetHeight;
			} else {
				//Non-category nav dropdowns are y-offset based on their rollover button
				initMenu.yOffset = initButton.offsetHeight;
			}
		}
	}
}

function initializeNav() {
	/* This function prepares the entire navigation system prior to first use */
	
	//Window resize event handler
	window.onresize = realignDropdowns;
	
	//Top Nav (Lexus News; Buying a Lexus; Lexus Owners)
	for (var i = 0; i < topNavMenu.length; i++) {
		initializeDropdown(topNavMenu[i], "/images/header/", 0);
	}
	
	//Vehicle Nav (LS; GS; ES; IS; SC; etc)
	for (var i = 0; i < vehicleNavMenu.length; i++) {
		initializeDropdown(vehicleNavMenu[i], "/images/nav/", 0);
	}
	
	//Category Nav (Sedans; Sport Coupe; Sport Utility; etc)
	for (var i = 0; i < catNavMenu.length; i++) {
		initializeDropdown(catNavMenu[i], "/images/nav/", catNavXOffset[i]);
	}
	
	realignDropdowns();
	setCurrentPageState();
}

function realignDropdowns() {
	/* 
	This function re-positions all dropdowns onscreen so that they line up with their corresponding tabs or rollover buttons.
	
	The dropdowns are absolutely-positioned on the page (meaning relative to the top-left corner). If the user resizes their window,
	the dropdowns will appear to display in the wrong location, unless this function is called immediately after the resize.
	*/

	var menuType;

	for (var i = 0; i < topNavMenu.length; i++) {
		calibrateDropdown(topNavMenu[i]);
	}
	
	for (var i = 0; i < vehicleNavMenu.length; i++) {
		calibrateDropdown(vehicleNavMenu[i]);
	}
	
	for (var i = 0; i < catNavMenu.length; i++) {
		//Determine the type of Category nav in use; one with a dropdown, or one without.
		menuType = catNavMenu[i].slice(0, 4);
		
		if (menuType == "cNav") {
			//Only "cNav" menus (those with dropdowns) should have their dropdowns realigned.
			calibrateDropdown(catNavMenu[i]);
			}
	}
}

function rollOut() {
	this.src = this.offState.src;
}

function rollOver() {
	this.src = this.onState.src;
}

function setCurrentPageState(){
	/*
	This function sets the current BODY element ID to match the name of the current JSP page.
	This provides a dynamic way to apply page-specific styles.
	*/
	
	//Strip all unnessary characters from the current URL, leaving only the JSP filename.
	var str = (location.href); 
		var int1 = str.lastIndexOf('/') + 1;
		var int2 = str.lastIndexOf('.');
		// added for club lexus nav bar 4 links share the same jsp file
		var int3 = str.lastIndexOf('=') + 1;
		
		var myVar = str.substring(int1, int2);
		
		if (myVar =='ohp_vin'){
			myVar = myVar + str.substring(int3, str.length);
			
		}
		var thisBody=document.getElementsByTagName("body");
		thisBody[0].id=myVar;
}

function showMenu() {
	/*
	This function sets the target menu's visibility state, and makes its components visible.
	
	It seems strange to simply use a function to call a function, but we can't pass paramaters to standard JS event handler functions directly.
	Instead, this function acts as a proxy, called directly by the activation button, and passes the necessary paramaters to the next function,
	which does the actual work of toggling the menu's visibility.
	*/
	
	toggleMenuVis(this.menu, "visible");
}

function toggleMenuVis(menuID, state) {
	/* This function makes a dropdown menu appear or disappear. Like magic! */
	
	var dropdown = document.getElementById(menuID + "Dropdown");
	var button = document.getElementById(menuID + "Button");
	var menuType = menuID.slice(0, 4);
	
	if (dropdown && button) {
		//Set dropdown menu visibility
		if (state == "visible") {
			dropdown.style.visibility = "visible";
		} else {
			dropdown.style.visibility = "hidden";
		}
	
		if (menuType == "cNav") {
			var tab = document.getElementById(menuID + "Tab");
			
			if (tab) {
				//Set tab visibility (if applicable)
				if (state == "visible") {
					tab.style.visibility = "visible";
				} else {
					tab.style.visibility = "hidden";
					//The following line is required for Safari, which doesn't automatically revert the menu activating button to its "off" state.
					button.src = button.offState.src;
				}
			}
		} else {
			//Set menu activation button visibility
			if (state == "visible") {
				button.src = button.onState.src;
			} else {
				button.src = button.offState.src;
			}
		}
	
		if (!window.XMLHttpRequest) {
			//This browser is not IE7, Mozilla, Safari, Opera, and is probably IE 6; show IFRAME shim
			var shim = document.getElementById(menuID + "Shim");
			if (shim) {
				//Set IFRAME shim visibility (if applicable)
				if (state == "visible") {
					shim.style.visibility = "visible";
				} else {
					shim.style.visibility = "hidden";
				}
			}
		}
	}
}