// querystring related stuff ... This is really just for testing the default states via querystring, for development purposes.

	var querystring = document.location.search;
	var jsQueryValues = new Array();

	// strip leading '?' if present
		if (querystring) {
			if (querystring.charAt(0) == '?') {
				querystring = querystring.substring(1, querystring.length);
			}
		if (document.location.href.indexOf('&') != -1) { var queryStringDelimiter = '&'; } else { var queryStringDelimiter = '&'; }

		// loop through pairs and assign them in the array
			for (loop = 0; loop < querystring.split(queryStringDelimiter).length; loop++) {
				var thisPair = querystring.split(queryStringDelimiter)[loop];
				var thisName = unescape(thisPair.split('=')[0]);
				var thisValue = unescape(thisPair.split('=')[1]);
				jsQueryValues[thisName] = thisValue;
			}
		}


	//// PATH TO IMAGES DIRECTORY, KEPT OUTSIDE THE FUNCTION TO MAKE IT ACCESSIBLE TO OTHER FUNCTIONS
		var pathToImages = '/us/en/images/nav/';
		var pathToTabImages = '/us/en/images/tabs/';

	// DEFINE THE STANDARD STATES IN AN ASSOCIATIVE ARRAY
		var stdImgState = new Array('out','ovr','clk'); // each state must be listed here, in the same order as it is below
		stdImgState['out'] = '.';  // do not edit this line  // first node must ALWAYS be the default state, with the value of '.',
		stdImgState['ovr'] = '_o.';
		stdImgState['clk'] = '_c.';

	//// THIS IS THE IMAGE REPLACEMENT COMPOMENT
	function imgState(thisImg, imgState, type) {
	
	// get info about source image we are replacing, get full image filename, mimetype and filename without mimetype.
			if (thisImg.toString().indexOf('[object') == 0) {
				var imgSrc = thisImg.src.split('/')[thisImg.src.split('/').length - 1];
			} else {
				var imgSrc = document.getElementById(thisImg).src.split('/')[document.getElementById(thisImg).src.split('/').length - 1];
			// here, we alter thisImg to be the id referral method, rather than the DOM referral method
				thisImg = document.getElementById(thisImg);
			}
		var imgMim = imgSrc.split('.')[imgSrc.split('.').length - 1];
		var imgNam = imgSrc.substring(0, (imgSrc.length - imgMim.length - 1));
	// strip state suffixes from imgNam so that we do not duplicate them. we want just the root string of the naming convention
		for (var loop = 0; loop < stdImgState.length; loop++) {
		var endOfImgNam = imgNam.substring((imgNam.length - stdImgState[loop].length) + 1, imgNam.length)
		var stateValue = stdImgState[eval('stdImgState["' + loop + '"]')].substring(0, stdImgState[eval('stdImgState["' + loop + '"]')].length - 1);
			if(endOfImgNam == stateValue && loop != 0) {
				imgNam = imgNam.substring(0 , (imgNam.length - stateValue.length));
			}
		}
		
	var imgPath = pathToImages;
	if (type=='tab')
		imgPath = pathToTabImages;
		
	// replace an image based upon what we know
		if (stdImgState[imgState]){
			// if the imgState argument calls one of the standard states:
			thisImg.src = imgPath + imgNam + stdImgState[imgState] + imgMim;
			//alert(imgPath + imgNam + stdImgState[imgState] + imgMim);
		} else {
			// if the imgState argument is a custom state
			if (imgState.indexOf('.') == '-1') {
				thisImg.src = imgPath + imgState + '.' + imgMim;
			} else {
				thisImg.src = imgPath + imgState;
			}
		}
	}


	function getElementDom(targetElement) {
			var elementsArray = new Array();
				for (var contLoop = 0; contLoop < targetElement.childNodes.length; contLoop++) {
					if (targetElement.childNodes[contLoop].nodeType == 1) {
						elementsArray[elementsArray.length++] = targetElement.childNodes[contLoop];
					}
				}
			return elementsArray;
		}


	function getRelatedDom(obj, upDown, nodesNum) {
		// make sure nodesNum is a number and not a string
		var nodesNum = parseInt(nodesNum);
			if (upDown == 'up') {
			// here we are moving UP the dom (towards the body tag, to general elements)
				var getParentStr = '.parentNode';
				var getFinalObj = '';
				for (loop = 0; loop <= nodesNum; loop++) { getFinalObj = getFinalObj + getParentStr; }
				var targetElement = eval('obj' + getFinalObj);
			} else {
			// here we are moving DOWN the dom (away from the body tag, to specific elements)
				var targetElement = getElementDom(obj)[nodesNum];
			}
		return targetElement;
		}


	function getWhichParentChild(obj) {
			var parentObj = obj.parentNode;
			var parentChildrenArr = getElementDom(parentObj);
			for (loop = 0; loop < parentChildrenArr.length; loop++) {
				if (obj == parentChildrenArr[loop]) {
					return loop;
				}
			}
		}

	// OBJECT ARRAY STORAGE.
		var menuKillTimer;
		var mouseOutLag   = 1000;

	// OBJECT ARRAY STORAGE.
		var lv1ObjArr      = new Array();
		var lv2DivObjArr   = new Array();
		var lv2ImgObjArr   = new Array();
		var lv3ObjArr      = new Array();

	// default onstates for menus (pre-existing hard coded var overrides)
	if (!menuSelectedState1) {
	// start with one, 0 is null state
		var menuSelectedState1         = (jsQueryValues['menuSelectedState1']) ? jsQueryValues['menuSelectedState1'] : 0 ;
		var menuSelectedState2         = (jsQueryValues['menuSelectedState2']) ? jsQueryValues['menuSelectedState2'] : 0 ;
		var menuSelectedState3         = (jsQueryValues['menuSelectedState3']) ? jsQueryValues['menuSelectedState3'] : 0 ;
	}
	// start with one, 0 is null state
	if (!utilitiesSelectedState) { var utilitiesSelectedState     = (jsQueryValues['utilitiesSelectedState']) ? jsQueryValues['utilitiesSelectedState'] : 0 ; }

	// THIS FUNCTION INTERPRETS ALL NAV EVENTS, AND PASSES THE BALL TO setNavState()
		function navEvent(thisObj, uiEvent) {
			if (uiEvent == 'ovr') { clearTimeout(menuKillTimer); }
		// determine DOM offset values by nav reference object level
			var parentObjId = getRelatedDom(thisObj, 'up', 0).className;
			if (parentObjId.indexOf('navLevelTwo') == 0 ) { parentObjId = 'navLevelTwo' } // we have two different classes for level 2 navs, we want to treat them as one in JS.
			switch (parentObjId) {
				case 'navLevelOne':
					var whichIndexOne = getWhichParentChild(thisObj);
					var whichIndexTwo = false;
				break;
				case 'navLevelTwo':
					var whichIndexOne = getWhichParentChild(getRelatedDom(thisObj, 'up', 1));
					var whichIndexTwo = getWhichParentChild(thisObj);
				break;
				case 'navLevelThree':
					var whichIndexOne = parseInt(thisObj.parentNode.id.substring(3, thisObj.parentNode.id.length).split('-')[0]) - 1;
					var whichIndexTwo = parseInt(thisObj.parentNode.id.substring(3, thisObj.parentNode.id.length).split('-')[1]) - 1;
				break;
			}
		// define the two main nav parent elements
			var levelOneParent = document.getElementById('navLevelOne');
			var levelTwoParent = document.getElementById('navLevelTwo');
		// get the level 1 nav object
			var lv1Obj    = getRelatedDom(levelOneParent, 'dn', whichIndexOne).firstChild;
			var lv2DivObj = getRelatedDom(levelTwoParent, 'dn', whichIndexOne);
		// get the level 2 & 3 nav objects only if level 2 is active
			var lv2ImgObj = (parentObjId == 'navLevelOne') ? false : getRelatedDom(getRelatedDom(getRelatedDom(levelTwoParent, 'dn', whichIndexOne), 'dn', 0), 'dn', whichIndexTwo).firstChild; // write a complex, recursive, dom traversing function to vastly simplify statements like this.
			var lv3Obj    = (parentObjId == 'navLevelOne') ? false : document.getElementById('sub' + (whichIndexOne + 1) + '-' + (whichIndexTwo + 1));
		// pass the appropriate dom refs and state on to the handling function
			setNavState(uiEvent, lv1Obj, lv2DivObj, lv2ImgObj, lv3Obj);
		}


		function setNavState(uiEvent, lv1Obj, lv2DivObj, lv2ImgObj, lv3Obj) {
			if (uiEvent != 'def' || menuSelectedState1 > 0) {
			// get DOM arrays for each section of navigation that we need to manipulate.
				lv1ObjArr = getElementDom(document.getElementById('navLevelOne'));
				// adjust offsets
					lv1ObjArr.length = (lv1ObjArr.length - 1); // we cut off the last reference because it is the level 2 nav.
					for (var loop in lv1ObjArr) { lv1ObjArr[loop] = lv1ObjArr[loop].firstChild; } // Write a function that does this (for each element of an array offset down by x elements).
				lv2DivObjArr = getElementDom(document.getElementById('navLevelTwo'));
				lv2ImgObjArr = getElementDom(getRelatedDom(lv2DivObj, 'dn', 0));
				// adjust offsets
					for (var loop in lv2ImgObjArr) { lv2ImgObjArr[loop] = lv2ImgObjArr[loop].firstChild; } // Write a function that does this (for each element of an array offset down by x elements).
				lv3ObjArr = getElementDom(getRelatedDom(lv2DivObj, 'dn', 1));
			}
		// manipulate each array of DOM refs according to the objects passed to us.
			if (uiEvent == 'ovr' || uiEvent == 'def') {
				for (var loop in lv1ObjArr)    { if (lv1ObjArr[loop] == lv1Obj) { imgState(lv1ObjArr[loop], 'ovr'); } else { imgState(lv1ObjArr[loop], 'out'); } }
				for (var loop in lv2DivObjArr) { lv2DivObjArr[loop].style.display = (lv2DivObjArr[loop] == lv2DivObj) ? 'block': 'none'; }
				for (var loop in lv2ImgObjArr) { if (lv2ImgObjArr[loop] == lv2ImgObj) { imgState(lv2ImgObjArr[loop], 'ovr'); } else { imgState(lv2ImgObjArr[loop], 'out'); } }
				for (var loop in lv3ObjArr)    { lv3ObjArr[loop].style.display = (lv3ObjArr[loop] == lv3Obj && uiEvent == 'ovr') ? 'block': 'none'; }
				for (var loop in lv3ObjArr)    { lv3ObjArr[loop].style.visibility = (lv3ObjArr[loop] == lv3Obj && uiEvent == 'ovr') ? 'visible' : 'hidden'; }
				// BEGIN MICROSOFT INTERNET EXPLORER HANDHOLDING ...
				if (navigator.appName == 'Microsoft Internet Explorer') {
					for (var loop in lv3ObjArr) { getElementDom(lv3ObjArr[loop])[ (getElementDom(lv3ObjArr[loop]).length - 1) ].style.visibility = (lv3ObjArr[loop] == lv3Obj && uiEvent == 'ovr') ? 'visible' : 'hidden'; }
					for (var loop in lv3ObjArr) { getElementDom(lv3ObjArr[loop])[ (getElementDom(lv3ObjArr[loop]).length - 2) ].style.visibility = (lv3ObjArr[loop] == lv3Obj && uiEvent == 'ovr') ? 'visible' : 'hidden'; }
				}
				// END MICROSOFT INTERNET EXPLORER HANDHOLDING ...
			} else {
				menuKillTimer = (menuSelectedState1 > 0) ? setTimeout('initialNav()', (mouseOutLag)) : setTimeout('setNavState("def", false, false, false, false)', (mouseOutLag));
			}
		}


	// initializes nav with default states
		function initialNav() {
		// get the relevant objects
			var lv1defaultObj = (menuSelectedState1 == 0) ? false : getElementDom(document.getElementById('navLevelOne'))[(menuSelectedState1 - 1)];
			var lv2defaultObj = (menuSelectedState2 == 0) ? false : getRelatedDom(getRelatedDom(getRelatedDom(document.getElementById('navLevelTwo'), 'dn', getWhichParentChild(lv1defaultObj)), 'dn', 0), 'dn', (menuSelectedState2 - 1)); // write a complex, recursive, dom traversing function to vastly simplify statements like this.
			var lv3defaultObj = (menuSelectedState3 == 0) ? false : getElementDom(document.getElementById('sub' + menuSelectedState1 + '-' + menuSelectedState2))[(menuSelectedState3 - 1)]; // (menuSelectedState3 - 1)
		// call nav events for relevant objects
			if (lv1defaultObj) { navEvent(lv1defaultObj, 'def'); } 
			if (lv2defaultObj) { navEvent(lv2defaultObj, 'def'); }
			if (lv3defaultObj) { lv3defaultObj.className = 'current'; }
			if (utilitiesSelectedState != 0) {
				var currentUtility = getElementDom(document.getElementById('utilitiesNav'))[utilitiesSelectedState].firstChild;
				imgState(currentUtility, 'ovr');
				currentUtility.className = 'current';
			}
			if (tabsSelectedState != 0) {
				var currentTab = getElementDom(document.getElementById('tabs'))[tabsSelectedState - 1].firstChild.firstChild;
				imgState(currentTab, 'clk', 'tab');
				currentTab.className = 'current';
			}
		}

		function utilityState(utilityObj, thisState) {
			if (utilityObj.className != 'current') { imgState(utilityObj, thisState); }
		}
		
		function tabState(tabObj, thisState) {
			if (tabObj.className != 'current') { imgState(tabObj, thisState, 'tab'); }
		}