var cookieName = "NMSelectedTab";
var menuOpenTimeout = false;
var menuOpenDelay = 100;//milliseconds
var menuCloseTimeout = false;
var menuCloseDelay = 0;//milliseconds
var gnOrigImages = new Array();
var gn = new Array();
var curOpenMenu = "";

var utilMenuOpenTimeout = false;
var utilMenuOpenDelay = 100;//milliseconds

$(document).ready(function(){
	readyGlobalNav();
	readyUtilityNavs();
});

function readyGlobalNav() {
	/*Record original nav images, will be used to revert back when drawer is closed*/
	recordOriginalNavImages();

	/*set tab cookie if it doesn't have a value*/
	if (gnReadTabCookie() == "") {
		gnSetTabCookie("personal");
	}

	var fgTabID = "ctl00_GNnavigationTab_ctl00_GNMainFinancialGuidance";
	var psTabID = "ctl00_GNnavigationTab_ctl00_GNMainProductsAndServices";
	var coTabID = "ctl00_GNnavigationTab_ctl00_GNMainCareerOpportunities";
	var anmTabID = "ctl00_GNnavigationTab_ctl00_GNMainAboutNM";

	/*instantiate global nav objects*/
	gn[fgTabID] = new Object();
	gn[psTabID] = new Object();
	gn[coTabID] = new Object();
	gn[anmTabID] = new Object();

	/*Images to use when global nav is hovered over*/
	gn[fgTabID].hoverImage = "/NMFNIMAGES/FinancialGuidanceOrange33.gif";
	gn[psTabID].hoverImage = "/NMFNIMAGES/ProductsServicesOrange33.gif";
	gn[coTabID].hoverImage = "/NMFNIMAGES/CareerOrange33.gif";
	gn[anmTabID].hoverImage = "/NMFNIMAGES/AboutOrange33.gif";

	/*create menu drawers, stored in DOM*/
	gn[fgTabID].personalnav = buildMenu(fgTabID, 'GNFinancialGuidance', 'personal');
	gn[fgTabID].businessnav = buildMenu(fgTabID, 'GNFinancialGuidance', 'business');
	gn[psTabID].personalnav = buildMenu(psTabID, 'GNProductsandServices', 'personal');
	gn[psTabID].businessnav = buildMenu(psTabID, 'GNProductsandServices', 'business');
	gn[coTabID].nav = buildMenu(coTabID, 'GNCareerOpportunities', 'none');
	gn[anmTabID].nav = buildMenu(anmTabID, 'GNAboutNorthwesternMutual', 'none');

	/*remove the original navigation structure*/
	cleanup();

	/*attach hover event handlers to global tabs*/
	$('#' + fgTabID).hover(handleGNTabHoverIn, handleGNTabHoverOut);
	$('#' + psTabID).hover(handleGNTabHoverIn, handleGNTabHoverOut);
	$('#' + coTabID).hover(handleGNTabHoverIn, handleGNTabHoverOut);
	$('#' + anmTabID).hover(handleGNTabHoverIn, handleGNTabHoverOut);

	HideStreetView();
}

function readyUtilityNavs() {
	var $accountAccessAnchor = $('#accessAccountWrapper');
	var $accountAccessMenu = buildUtilityMenu($accountAccessAnchor, $('#AccessAccounts'));
	$accountAccessAnchor.hover(handleUtilHoverIn, handleUtilHoverOut);
	$accountAccessMenu.mouseleave(function(){
		hideUtilityMenu($accountAccessMenu);
	});
	
	var $learningCenterAnchor = $('#learningCenterWrapper');
	var $learningCenterMenu = buildUtilityMenu($learningCenterAnchor, $('#LearningCenter'));
	$learningCenterAnchor.hover(handleUtilHoverIn, handleUtilHoverOut);
	$learningCenterMenu.mouseleave(function(){
		hideUtilityMenu($learningCenterMenu);
	});
}

function recordOriginalNavImages() {
	$('.GlobalNavigationTab').each(function() {
		var curImage = $(this).css("background-image");
		var id = $(this).attr("id");
		gnOrigImages[id] = curImage;
	});
}

function buildMenu(globalNavTabID, globalNavLinkListID, subTab) {
	/*
	* builds nav drawer, appends it to the body, and returns jQuery object of nav drawer
	* subTab is either "none", "personal", or "business"
	*/
	var $globalTab = $('#' + globalNavTabID);
	var $linkList = $('#' + globalNavLinkListID);
	var $linkColumns = $linkList.find('ul');
	
	/*create nav drawer*/
	var $navDrawer = $('<div class="GlobalNavigationDrawer" id="' + globalNavTabID + 'Drawer">').appendTo('body');

	/*if navigation structure has tabs, create the appropriate structure*/
	if (subTab != "none") {
		$navDrawer.css("padding-top", "22px");

		var $subTabRow = $('<div class="GNTabRow">').appendTo('body');
		$subTabRow.hover(handleDrawerHoverIn, function(){
			handleDrawerHoverOut(globalNavTabID);
		});
		var $personalTab = $('<img class="GNTabPersonal">').appendTo($subTabRow);
		var $businessTab = $('<img class="GNTabBusiness">').appendTo($subTabRow);
	
		$navDrawer.bind('drawerShown', function(){
			/*absolutely position, necessary since they stick out 4px above the navDrawer and IE6 doesn't support negative margins properly*/
			var gtLeft = $globalTab.offset().left;
			var ndTop = $navDrawer.offset().top;
			var vertOffset = -4;
			var horizOffset = parseInt($navDrawer.css("padding-left"));
			$subTabRow.css({
				"top" : (ndTop+vertOffset) + "px",
				"left" : (gtLeft+horizOffset) + "px"
			}).show();
		});
		
		$navDrawer.bind('drawerHidden', function(){
			$subTabRow.hide();
		});
	
		/*bind click event function for globalTab*/
		if (typeof($.data($globalTab.get(0), 'events')) == "undefined") {//no events have been bound to globalTab yet, setup click.
			var subTabURLs = new Array();
			$linkList.find('.GNTabLink').each(function(){
				var subTabURL = $(this).attr("href");
				var subTabText = $(this).text().toLowerCase();//this will match the cookie
				subTabURLs[subTabText] = subTabURL;
			});
			$globalTab.click(function(){
				var tabCookie = gnReadTabCookie();
				var subTabURL = subTabURLs[tabCookie];
				window.location = subTabURL;
			});
		}

		
		if (subTab == "personal") {
			$personalTab.attr("src", "/NMFNImages/personalOn.jpg");//.addClass("GNTabOn");
			$businessTab.attr("src", "/NMFNImages/businessOff.jpg");//.addClass("GNTabOff");
			$linkColumns = $linkList.find('.GNPersonalTab ul');
			var id = $navDrawer.attr("id");
			$navDrawer.attr("id", id + "_Personal");
			$businessTab.click(function(){
				hideMenu(globalNavTabID);
				gnSetTabCookie("business");
				showMenu(globalNavTabID);
			});
		} else if (subTab == "business") {
			$personalTab.attr("src", "/NMFNImages/personalOff.jpg");//.addClass("GNTabOff");
			$businessTab.attr("src", "/NMFNImages/businessOn.jpg");//.addClass("GNTabOn");
			$linkColumns = $linkList.find('.GNBusinessTab ul');
			var id = $navDrawer.attr("id");
			$navDrawer.attr("id", id + "_Business");
			$personalTab.click(function(){
				hideMenu(globalNavTabID);
				gnSetTabCookie("personal");
				showMenu(globalNavTabID);
			});
		}
	} else {//nav drawer has no sub tabs
		/*give navDrawer a 3px orange order at top*/
		$navDrawer.css("padding-top", "3px");
		/*bind click event for globalTab*/
		var tabURL = $linkList.find('.GNLev1 a').eq(0).attr('href');
		$globalTab.click(function(){
			window.location = tabURL;
		});
	}

	var $linkTable = $('<table class="GNLinkTable">').appendTo($navDrawer);
	var $linkTableRow = $('<tr>').appendTo($linkTable);

	/*populate table with appropriate links*/
	var numCols = 0;
	$linkColumns.each(function(){
		$ul = $(this);
		$td = $('<td>').appendTo($linkTableRow);
		var $separator = $('<div class="GNColSeparator">').appendTo($td);
		$ul.clone().appendTo($td);
		numCols++;
	});
	
	$navDrawer.bind('drawerShown', function(){
		var tdHeight = $navDrawer.find('td').eq(0).height();
		var tdTopPadding = parseInt($navDrawer.find('td').css("padding-top"));
		var sepTopMargin = parseInt($navDrawer.find('.GNColSeparator').css("margin-top"));
		$navDrawer.find('.GNColSeparator').height(tdHeight - tdTopPadding - sepTopMargin);
	});
	
	/*if nav drawer has 4 or more columns, use full width of Global Navigation, otherwise use auto width*/
	if (numCols > 3) {
		$navDrawer.width(952);//960 (Global Navigation width) minus 8 (side padding)
	} else {
		$navDrawer.find('.GNLinkTable').width('auto');
		if (globalNavLinkListID = "GNCareerOpportunities" || globalNavLinkListID == "GNAboutNorthwesternMutual") {//WT234 - CO and ABN menus need to be same width
			$navDrawer.find('.GNLinkTable').width(690);
		}
		if ($.browser.msie && $.browser.version == 6){//nav drawer stays @ 100% in IE6, so must explicitly reset width
			var tableWidth = $navDrawer.find('.GNLinkTable').width();
			$navDrawer.width(tableWidth);
		}
	}

	/*evenly space the columns*/
	//var colWidthPercentage = 100 / numCols;
	//$navDrawer.find('.GNLinkTable td').width(colWidthPercentage + '%');

	/*remove dotted border from first column*/
	$linkTableRow.find('td:first-child .GNColSeparator').remove();

	/*setup drawer hover event*/
	$navDrawer.hover(handleDrawerHoverIn, function(){
		handleDrawerHoverOut(globalNavTabID);
	});
	
	return $navDrawer;
}

function positionNavDrawer($globalTab, $navDrawer) {
	/*
	* Positions drawer on left or right side of #GlobalNavigation
	* based on whether the center of the global tab drawer is attached to
	* is on the left or right half of #GlobalNavigation
	*/
	var $globalNavWrapper = $('#GlobalNavigation');
	var gnWrapperWidth = $globalNavWrapper.width();
	var gnWrapperLeft = $globalNavWrapper.offset().left;
	var windowWidth = $(window).width();
	var tabHeight = $globalTab.height();
	var tabTop = $globalTab.offset().top;
	var tabLeft = $globalTab.position().left;//relative to parent
	var tabWidth = $globalTab.width();
	var tabCenter = tabLeft + (tabWidth / 2);

	if (tabCenter < (gnWrapperWidth / 2)) {//tab is on left side of global nav wrapper
		$navDrawer.css({
			top : tabTop + tabHeight + "px",
			left : gnWrapperLeft + "px"
		});
	} else {//tab is on right side of global nav wrapper
		$navDrawer.css({
			top : tabTop + tabHeight + "px",
			right : windowWidth - (gnWrapperLeft + gnWrapperWidth) + "px"
		});
	}
}

function cleanup() {
	/*remove the div with the original navigation structure*/
	$('#ctl00_GNnavigation_ctl00_navigation ').remove();
}

function showMenu(globalNavTabID) {
	/*
	* given the ID of a global tab, find the appropriate nav drawer
	* position the nav drawer (viewport could change, so this must happen on every show)
	* make the nav drawer visible
	* add shadow to nav drawer
	* also swaps out global tab image and adjusts global tab height
	*/
	var $globalTab = $('#' + globalNavTabID);
	var hoverImage = gn[globalNavTabID].hoverImage;
	var tabCookie = gnReadTabCookie();
	var $navDrawer = gn[globalNavTabID][tabCookie + "nav"];
	if (typeof($navDrawer) == "undefined") {//no personal or business tab, defaults to "nav"
		$navDrawer = gn[globalNavTabID].nav;
	}

	/*change tab image to 33px tall orange*/
	$globalTab.css({
		backgroundImage : "url(" + hoverImage + ")",
		height: "33px"
	});
	positionNavDrawer($globalTab, $navDrawer);

	/*make nav drawer visible*/
	$navDrawer.show();
	$navDrawer.trigger('drawerShown');
	curOpenMenu = globalNavTabID;

	/*add shadow*/
	addShadowToElement($navDrawer.attr("id"));
	
	ie6SelectInputHack($navDrawer, "show");
}

function hideMenu(globalNavTabID){
	/*
	* given the ID of a global tab, find the appropriate nav drawer
	* remove the shadow, and hide it
	* also resets global tab original image and original height
	*/
	var $globalTab = $('#' + globalNavTabID);
	var tabCookie = gnReadTabCookie();
	var $navDrawer = gn[globalNavTabID][tabCookie + "nav"];
	if (typeof($navDrawer) == "undefined") {
		$navDrawer = gn[globalNavTabID].nav;
	}

	$globalTab.css({
		backgroundImage : gnOrigImages[globalNavTabID],
		height: "30px"
	});
	
	removeShadow();
	$navDrawer.hide();
	$navDrawer.trigger('drawerHidden');
	curOpenMenu = "";
	
	ie6SelectInputHack($navDrawer, "hide");
}

function handleGNTabHoverIn() {
	/*
	* mouse entered the global tab, start a timer (menuOpenTimeout) that will open the corresponding nav drawer
	* timer will be cancelled if the mouse leaves the global tab
	* if timer was pending for closing the corresponding menu (menuCloseTimeout), cancel it
	*/
	var globalNavTabID = this.id;
	if (curOpenMenu == globalNavTabID) {//mouse moved from drawer to global tab
		clearTimeout(menuCloseTimeout);
	} else {//menu was not already open
		menuOpenTimeout = setTimeout(function(){
			showMenu(globalNavTabID);
		}, menuOpenDelay);
	}
}

function handleGNTabHoverOut() {
	/*
	* mouse left the global Tab, start a timer (menuCloseTimeout) that will close the corresponding nav drawer
	* timer will be cancelled if mouse re-enters the same global tab, or the related nav drawer
	* if timer was pending for opening a menu (menuOpenTimeout), cancel it
	*/
	var globalNavTabID = this.id;
	clearTimeout(menuOpenTimeout);
	menuCloseTimeout = setTimeout(function(){
		hideMenu(globalNavTabID);
	}, menuCloseDelay);
}

function handleDrawerHoverIn() {
	clearTimeout(menuCloseTimeout);
}

function handleDrawerHoverOut(globalNavTabID) {
	menuCloseTimeout = setTimeout(function(){
		hideMenu(globalNavTabID);
	}, menuCloseDelay);
}

function gnReadTabCookie() {
	var cookieString = document.cookie;
	var regex = new RegExp(cookieName + "=([\\w]+)", "i");
	var retVal = "";
	if (regex.test(cookieString) == true) {//cookie exists and has value
		retVal = regex.exec(cookieString)[1];
	}
	return retVal;
}

function gnSetTabCookie(cookieValue) {
	document.cookie = cookieName + "=" + cookieValue + "; path=/";
}

function ie6SelectInputHack($navDrawer, drawerEvent) {
	/*
	*	IE6 overlays "select" elements over everything, including the global nav
	*	solution is to detect select elements within the bounds of the global nav and hide them
	*/
	if ($.browser.msie && $.browser.version == 6){
		if (drawerEvent == "show") {//nav drawer is being shown, hide offending selects
			var ndTop = $navDrawer.offset().top;
			var ndLeft = $navDrawer.offset().left;
			var ndWidth = $navDrawer.width();
			var ndHeight = $navDrawer.height();
			var ndVertPadding = parseInt($navDrawer.css("padding-top")) + parseInt($navDrawer.css("padding-bottom"));
			var ndBottom = ndTop + ndHeight + ndVertPadding;
			var ndRight = ndLeft + ndWidth;
			$('select').each(function(){
				var $sel = $(this);
				var selTop = $sel.offset().top;
				var selLeft = $sel.offset().left;
				var selWidth = $sel.width();
				var selRight = selLeft + selWidth;
				if (selTop <= ndBottom) {
					if ( ((selLeft >= ndLeft) && (selLeft <= ndRight)) || ((selRight >= ndLeft) && (selRight <= ndRight)) ) {
						$sel.addClass("ie6SelectHackHidden").css("visibility", "hidden");
					}
				}
			});
		} else {//nav drawer is being hidden, show offending selects
			$('select.ie6SelectHackHidden').css("visibility", "visible").removeClass("ie6SelectHackHidden");
		}
	}
}

/*BEGIN utility navigation drop-down menus*/
function buildUtilityMenu($anchor, $linkList) {
	/*
	* $anchor is the element that the global nav will attach to and overlay
	* $linkList is the list of links that will be used to populate the menu
	* function builds the menu, appends it to the body, and returns jQuery object
	*/
	var anchorID = $anchor.attr("id");
	var $menu = $('<div class="UtilityDrawer" id="' + anchorID + 'Drawer">').appendTo('body');
	
	//get text for menu header
	var text = $anchor.text();
	var $menuHeader = $('<div class="UtilityDrawerHeader">').text(text).appendTo($menu);
	
	//add links to menu
	$linkList.appendTo($menu);
	return $menu;
}
function showUtilityMenu($anchor, $menu) {
	positionUtilityDrawer($anchor, $menu);
	$menu.show();//make nav drawer visible
	addShadowToElement($menu.attr("id"));//add shadow
}
function hideUtilityMenu($menu) {
	removeShadow();
	$menu.hide();
}
function positionUtilityDrawer($anchor, $menu) {
	/*
	* Positions drawer directly over anchor
	*/
	var anchorLeft = $anchor.offset().left;
	var anchorTop = $anchor.offset().top;
	$menu.css({
		top : anchorTop + "px",
		left : anchorLeft + "px"
	});
}
function handleUtilHoverIn() {
	var $anchor = $(this)
	var $menu = $("#" + this.id + "Drawer");
	
	utilMenuOpenTimeout = setTimeout(function(){
		showUtilityMenu($anchor, $menu);
	}, utilMenuOpenDelay);
}

function handleUtilHoverOut() {
	var $menu = $("#" + this.id + "Drawer");
	if ($menu.is(':visible') == false) {//menu not yet visible, don't open it
		clearTimeout(utilMenuOpenTimeout);
	}
}
/*END utility navigation drop-down menus*/

/*TEMPORARY work-around so global nav doesn't overlay street view on office locator*/
//Function to hide street view in Office Locator Google
function HideStreetView() {
	var ua = navigator.userAgent.toLowerCase();
	if(ua.indexOf("chrome")!= -1) {
	var streetView = document.getElementById("streetview_street")
		if ( streetView != null ) {
			if (( streetView.className  == "nmgol_visibleDiv_street" ) || ( streetView.className  == "nmgol_visibleDiv_street_maximize" )) {
				if ( streetView.innerHTML.toLowerCase().
				indexOf('<param name="wmode" value="opaque">' ) == -1 ) {
					var flshObjs = streetView.getElementsByTagName("object")
					if ( flshObjs.length > 0) {
						var flshObj = flshObjs [0];
						if ( flshObj != null) {
						 	var elm = document.createElement("param");
						 	elm.setAttribute("name", "wmode");
						 	elm.setAttribute("value", "opaque");
						 	flshObj.appendChild (elm);
						}
					}
				}
			}
		}
	}
}