//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// DHTML IMAGE NAV - PURE JAVASCRIPT SOLUTION TO ALLOW DROP DOWN TO PASS CLICK STATE THROUGH TO TARGET
// PAGES WITHOUT THE USE OF COOKIES.
//
// NOTE THAT USING COOKIES TO MAINTAIN CLICK STATE WOULD BE MUCH CLEANER AND NOT REQUIRE PAGE ARGS
// BUT THIS SOLUTION WAS CREATED TO WORK ON ALL MAJOR BROWSERS FOR CLIENTS WITH COOKIES POTENTIALLY
// TURNED OFF.
//
// A. Bose >> JULY 2008 >> 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//var rootChildren					= new Array(4,6,6,11,2,1,8,1,1,0);	// FOR EACH ROOT ITEM, HOW MANY CHILDREN DO WE HAVE (USED FOR AUTOMATED IMAGE PRELOADING)
var rootChildren					= new Array(4,6,6,11,2,1,1,8,1,0);	// FOR EACH ROOT ITEM, HOW MANY CHILDREN DO WE HAVE (USED FOR AUTOMATED IMAGE PRELOADING)
var rootNavItemCount				       = rootChildren.length;	       // HOW MANY ROOT IMAGE NAV ITEMS WE HAVE
var rootNavPrefix					= "navSub";				// DIV NAME PREFIX FOR EACH NAV ITEM
var rootNavContainer				       = "navigation";		       // DIV NAME OF WRAPPER FOR THE WHOLE MENU
var rootIndexID					= 100;
var subIndexID					= 10;
var imageRoot						= "images/nav/";		       // WHERE ARE THE NAV IMAGES
var imageExt						= ".gif";			       // EXTENSION FOR ALL NAV IMAGES
var ext                                         ="_en";
var ext_fr                                      ="_fr";
var imageRoot_1					= "/static/HondaCorp/Static Files/Images/";
var imageRoot1                                  ="/static/HondaCorp/Static Files/images/channelimage/";
var chan_img_1                                  ="abouthondachannelimage/";
var chan_img_2                                  ="innovationchannelimage/";
var chan_img_3                                  ="safetychannelimage/";
var chan_img_4                                  ="environmentchannelimage/";
var chan_img_5                                  ="communitychannelimage/";
var chan_img_6                                  ="foundationchannelimage/";
var chan_img_7                                  ="productschannelimage/";
var chan_img_8                                  ="manufacturingchannelimage/";
var chan_img_9                                  ="careerschannelimage/";
	
var rootIndexArgumentName			       = "navIndex";
var subIndexArgumentName			       = "subNavIndex";
var rootImageNamePrefix				= "parentImg";
var arrowHolderPrefix				= "subLine";
var rootImage                                   ="/HondaCorp/";  

var a = 0;
var b = 0;

var activeRootIndex					= 0;								// LAST CLICKED ROOT MENU INDEX (DEFAULT 0)
var activeSubIndex					= 0;								// LAST CLICKED SUB MENU INDEX (DEFAULT 0)
var clickedIndex					= 0;								// LAST CLICKED INLINE MENU INDEX (DEFAULT 0)

var subArrow_1					= null;
var subArrow_2					= null;

	// LOAD A SINGLE VERSION OF OUR ROLLOVER LINE AND ARROW FOR USE WHEN DISPLAYING AN
	// SELECTED NAV ITEM.
	if (document.images) {
	subArrow_1						= new Image();
	subArrow_1.src					= imageRoot1  + "subNav_arrow_1" + imageExt;
	subArrow_2						= new Image();
	subArrow_2.src					= imageRoot1  + "subNav_arrow_2" + imageExt;
	
	}
	
document.cachedImages				= new Array();
document.sliderSet					= new Array();

precacheImages();

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// AUTOMATE THE PROCESS OF PRECACHING ALL THE IMAGES WE NEED FOR EACH STATE (ROLLOVERS AND ONCLICKS)
// FOR EACH MENU ITEM AND ALL ITS CHILDREN.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function precacheImages() {
var root							= "";
	for (var i=0; i<rootNavItemCount; i++) {
    var z = i+1;
	//root							= imageRoot_1 + z + "/" + (rootIndexID + (i+1));
	root							= imageRoot_1  + (rootIndexID + (i+1));
	lookupImageCache(root + imageExt);
	lookupImageCache(root + "_1" +ext+ imageExt);
	lookupImageCache(root + "_2" +ext+ imageExt);
		if (rootChildren[i] != 0) {
		lookupImageCache(root + "_3" +ext+ imageExt);
		}
		for (var j=0; j<rootChildren[i]; j++) {
		lookupImageCache(root + "_" + (subIndexID + (j+1)) + "_0" +ext+ imageExt);
		lookupImageCache(root + "_" + (subIndexID + (j+1)) + "_1" +ext+ imageExt);
		}
	}
}

function doRootImageSwap_1(navIndex, viewState) {
	if (!document.images) {
	return;
	}
var targetImage							= rootImageNamePrefix + navIndex;
var imgSrc                         = "/HondaCorp/images/nav/10/"+ (rootIndexID + navIndex) + ((viewState == 0) ? "":("_"+viewState)) + imageExt;
doImageSwap(targetImage,imgSrc);
}
function doRoot_Image_Swap(navIndex, viewState,targetImage,currentLocale) {
	if (!document.images) {
	return;
	}
var temp;
var temp_1;
if(currentLocale == "fr")
	{
	temp = ext_fr;
	}
else 
	{
	temp =ext;
	}

if(navIndex == 1) {
temp_1=chan_img_1;
}
if(navIndex == 2) {
temp_1=chan_img_2;
}
if(navIndex == 3) {
temp_1=chan_img_3;
}
if(navIndex == 4) {
temp_1=chan_img_4;
}
if(navIndex == 5) {
temp_1=chan_img_5;
}
if(navIndex == 6) {
temp_1=chan_img_6;
}
if(navIndex == 7) {
temp_1=chan_img_7;
}
if(navIndex == 8) {
temp_1=chan_img_8;
}
if(navIndex == 9) {
temp_1=chan_img_9;
}


var imgSrc                         = imageRoot1+ temp_1 + (rootIndexID + navIndex) + ((viewState == 0) ? "":("_"+viewState)) + temp + imageExt;
doImageSwap(targetImage,imgSrc);
}
function doRootImageSwap(imgSrc,navIndex, viewState) {
	if (!document.images) {
	return;
	}
var targetImage							= rootImageNamePrefix + navIndex;
//var imgSrc							= imageRoot + (rootIndexID + navIndex) + ((viewState == 0) ? "":("_"+viewState)) + imageExt;
doImageSwap(targetImage,imgSrc);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CALLED FROM THE HTML WHEN WE ROLLOVER A SUB ITEM.  ENSURE WE DON'T ROLLOVER OUR SELECTED SUB OPTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function handleSubRollover(rootIndex, navIndex, viewState) {
	if (!document.images) {
	return;
	}
	// DO NOT ROLLOVER ON THE ACTIVE (CLICKED) ITEM
	if (activeRootIndex == rootIndex && activeSubIndex == navIndex) {
	return;
	}
doSubImageSwap(rootIndex,navIndex,viewState);
}

function doSubImageSwap(rootIndex, navIndex, viewState,currentLocale,temp_1) {
	if (!document.images) {
	return;
	}
var temp;
if(currentLocale == "fr")
	{
	   temp = ext_fr;
	}
 else 
	 {
	   temp =ext;
     }
var targetImage					   = rootNavPrefix + rootIndex + "Img" + navIndex;
//var imgSrc					   = imageRoot1+ temp_1 + (rootIndexID + rootIndex) + "_" + (subIndexID + navIndex) + ( "_" + viewState ) + imageExt;
var imgSrc                         = imageRoot1 +temp_1 + (rootIndexID + rootIndex) + "_" +(subIndexID + navIndex) + "_1" + temp + imageExt ;

doImageSwap(targetImage,imgSrc);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// PRIVATE FUNCTION (IF THERE WERE ACTUALLY A WAY TO ENFORCE THIS).  ASSERTIONS ARE DONE PRIOR TO THIS
// CALL IT IS NOT EXPECTED THAT AN EXTERNAL CLIENT OR HTML PAGE SHOULD CALL THIS FUNCTION DIRECTLY.
// NOTE THAT RATHER THAN PRELOADING ALL IMAGE ROLLOVERS ON PAGE LOAD, WE LOAD THEM ONCE AND DUMP THEM
// INTO A CACHE ARRAY SET ON THE DOCUMENT DOM OBJECT (document.)
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function doImageSwap(targetImage, imgSrc) {
var img									= lookupImageCache(imgSrc);
document.images[targetImage].src 		= img.src;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CHECK IF WE'VE ALREADY CACHED AN IMAGE BASED ON OUR ASSOCIATIVE ARRAY (WITH THE .SRC ATTIRBUTE AS KEY)
// AND IF SO USE IT, OTHERWISE CREATE IT AND ADD IT TO THE CASH SO WE DON'T CREATE ANOTHER ONE LATER.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function lookupImageCache(imgSrc) {
var img									= null;
	if (document.cachedImages[imgSrc] == null) {
	img									= new Image();
	img.src								= imgSrc;
	document.cachedImages[imgSrc] 		= img;
	return img;
	}
img										= document.cachedImages[imgSrc];
return img;
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// PARSE THE QUERYSTRING LOOKING FOR OUR ROOT AND SUB ARGUMENTS.  IF WE FIND THEM GREAT, 
// IF NOT THEN THE PAGE WAS CALLED WITHOUT THESE ARGUMENTS SO MOVE ON AND DO NOTHING.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function parseQueryString() {
var qs									= new Querystring();
var ni									= qs.get(rootIndexArgumentName);
var si									= qs.get(subIndexArgumentName);
	if (ni != null && ni != "") {
	activeRootIndex						= parseInt(ni);
	}
	if (si != null && si != "") {
	activeSubIndex						= parseInt(si);
	}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//// CALLED FROM THE HTML WHEN WE ROLLOVER A ROOT ITEM.  ENSURE WE DON'T ROLLOVER OUR SELECTED OPTION (IF WE
//// HAVE ONE THAT IS).
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function handleRootRollover_1(navIndex, viewState) {
	if (!document.images) {
	return;
	}
	// DO NOT ROLLOVER ON THE ACTIVE (CLICKED) ITEM
	if (activeRootIndex == 0 ) {
	return;
	}
doRootImageSwap_1(navIndex,viewState);
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//// CALLED FROM THE HTML WHEN WE ROLLOVER A ROOT ITEM.  ENSURE WE DON'T ROLLOVER OUR SELECTED OPTION (IF WE
//// HAVE ONE THAT IS).
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function handleRootRollover(navIndex, viewState,targetImage,imgSrc) {
	if (!document.images) {
	return;
	}
	// DO NOT ROLLOVER ON THE ACTIVE (CLICKED) ITEM
	if (activeRootIndex == navIndex || clickedIndex == navIndex) {
	return;
	}
	doImageSwap(targetImage,imgSrc);
 }

function doSwap(img_name, img_src)
   {
 
     document[img_name].src = img_src;
   }
   

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// COLLAPSE A GIVEN ROOT NAV ITEM (I.E.SLIDE IT OUT)
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function thecollapseSlider(rootIndex,targetImage,currentLocale) {
var ss									= document.sliderSet[rootIndex-1];
	if (ss) {
	ss.slideOut('vertical');
	}
doRoot_Image_Swap(rootIndex,0,targetImage,currentLocale);
}

function collapseSlider(rootIndex,targetImage,imgSrc) {
var ss									= document.sliderSet[rootIndex-1];
	if (ss) {
	ss.slideOut('vertical');
	}
  doImageSwap(targetImage,imgSrc);
   //doRootImageSwap(rootIndex,0);
}
function collapseSlider(rootIndex,currentLocale) {
var ss									= document.sliderSet[rootIndex-1];
	if (ss) {
	ss.slideOut('vertical');
	}
doRootSwapImage(rootIndex,0,currentLocale);
}
function doRootSwapImage(navIndex, viewState,currentLocale) {
	if (!document.images) {
	return;
	}
var temp;
var temp_1;
    if(currentLocale == "fr")
	    {
	      temp = ext_fr;
	    }
     else 
	    {
	       temp =ext;
	    }
if(navIndex == 1) {
temp_1=chan_img_1;
}
if(navIndex == 2) {
temp_1=chan_img_2;
}
if(navIndex == 3) {
temp_1=chan_img_3;
}
if(navIndex == 4) {
temp_1=chan_img_4;
}
if(navIndex == 5) {
temp_1=chan_img_5;
}
if(navIndex == 6) {
temp_1=chan_img_6;
}
if(navIndex == 7) {
temp_1=chan_img_7;
}
if(navIndex == 8) {
temp_1=chan_img_8;
}
if(navIndex == 9) {
temp_1=chan_img_9;
}

var targetImage							= rootImageNamePrefix + navIndex;
var imgSrc								= imageRoot1 + temp_1 + (rootIndexID + navIndex) + ((viewState == 0) ? "":("_"+viewState)) +temp+ imageExt;
doImageSwap(targetImage,imgSrc);
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ATTEMPT TO PERFORM THE WORK OF DROPPING DOWN A MENU AND HILIGHTING ONE OF IT'S CHILDREN (IF IT HAS ANY)
//////////////////////////////////////////////////////////////////////////////////////////////////////////////

function dropSelected(currentLocale) {
	if (activeRootIndex <= 0) {
	return;
	}
  var navIndex = activeRootIndex ;
    var temp;
    var temp_1;
    if(currentLocale == "fr")
	    {
	      temp = ext_fr;
	    }
     else 
	    {
	       temp =ext;
	    }

if(navIndex == 1) {
temp_1=chan_img_1;
}
if(navIndex == 2) {
temp_1=chan_img_2;
}
if(navIndex == 3) {
temp_1=chan_img_3;
}
if(navIndex == 4) {
temp_1=chan_img_4;
}
if(navIndex == 5) {
temp_1=chan_img_5;
}
if(navIndex == 6) {
temp_1=chan_img_6;
}
if(navIndex == 7) {
temp_1=chan_img_7;
}
if(navIndex == 8) {
temp_1=chan_img_8;
}
if(navIndex == 9) {
temp_1=chan_img_9;
}

  var imgSrc = imageRoot1 + temp_1  + "10" + activeRootIndex + "_2" + temp + imageExt;
  doRootImageSwap(imgSrc,activeRootIndex,2);
  if (activeSubIndex <= 0) {
   return;
	}

doSubImageSwap(activeRootIndex,activeSubIndex,1,currentLocale,temp_1);
drawArrow(activeRootIndex,activeSubIndex);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// IF WE'VE DROPPED DOWN A ROOT NAV, WELL ALSO ATTEMPT TO DRAW THE ARROW BESIDE THE SUBNAV ITEM (DEFAULT
// IS FIRST CHILD)
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function drawArrow(rootIndex,subIndex) {
	if (subIndex == 0) {
	return;
	}
var targetImage							= null;
	if (subIndex != 1) {
		for (var i=1; i<subIndex; i++) {
		targetImage						= document.images[arrowHolderPrefix + rootIndex + '_' + i];
			if (targetImage != null) {
			targetImage.src				= subArrow_1.src;
			}
		}
	}
targetImage								= document.images[arrowHolderPrefix + rootIndex + '_' + subIndex];
	if (targetImage != null && subArrow_1 != null) {
	targetImage.src						= subArrow_2.src;
	}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// MUST BE CALLED ONLOAD FOR EACH PAGE THAT WISHES TO INCLUDE THE NAV.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////

function loadNavMenu(currentLocale) {
// ONCE WE GET HERE ALL PAGE ASSETS WILL HAVE LOADED SO LET'S TURN ON THE NAV CONTAINER VISIBILITY
var c									= document.getElementById(rootNavContainer);
	if (c != null) {
	c.style.display = '';
	}
	
var slider								= null;
	for (var i=0; i<rootNavItemCount; i++) {
		if (rootChildren[i] != 0) {
		slider 							= new Fx.Slide(rootNavPrefix + (i+1), {duration: 250});
		document.sliderSet[i]			= slider;
		} else {
		document.sliderSet[i]			= null;
		}
	}
	
parseQueryString();
hideAll();
dropSelected(currentLocale);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CALLED WHEN WE CLICK ON A ROOT NAV ITEM.  IF SAID ROOT HAS CHILDREN LET'S DROP THEM INTO VIEW WITHOUT
// LEAVING THE PAGE, BEING CAREFUL TO COLLAPSE ANY PREVIOUSLY DROPPED NAV ITEM

function dropChildren(rootIndex,targetImage,currentLocale) {

var slider								= document.sliderSet[rootIndex-1];

	if (rootIndex == clickedIndex && rootIndex != activeRootIndex) {
	collapseSlider(clickedIndex,currentLocale);
	clickedIndex						= 0;
	return;
	}

	if (clickedIndex != 0 && clickedIndex != activeRootIndex) {
	collapseSlider(clickedIndex,currentLocale);
	}

	if (slider) {
	slider.slideIn('vertical'); 	//toggle the slider up and down.
	}
	
	if (rootIndex != activeRootIndex) {
	doRoot_Image_Swap(rootIndex,3,targetImage,currentLocale);
	}
	
clickedIndex							= rootIndex;
}


//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// HIDE ALL ROOT MENU ITEMS SO WE DON'T SEE THEM SLIDING ONLOAD
//////////////////////////////////////////////////////////////////////////////////////////////////////////////

function hideAll() {
	for (var i=0; i<rootNavItemCount; i++) {
		if (rootChildren[i] != 0) {
		var idx							= (i+1);
			if (idx != activeRootIndex) {
			var s						= document.sliderSet[i];
			s.hide();
			}
		}
	}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function doRollover(imgName,viewState) {
	if (!document.images) {
	return;
	}
document.images[imgName].src			= eval(imgName + "_" + viewState).src;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 3RD PARTY SCRIPT TO PARSE QUERYSTRING.  INCLUDED AS IS TO AVOID ADDITIONAL PAGE LEVEL INCLUDE DEPENDANCIES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Client-side access to querystring name=value pairs
	Version 1.2.3
	22 Jun 2005
	Adam Vandenberg
*/
function Querystring(qs) { // optionally pass a querystring to parse
	this.params = new Object()
	this.get=Querystring_get
	
	if (qs == null)
		qs=location.search.substring(1,location.search.length)

	if (qs.length == 0) return

// Turn <plus> back to <space>
// See: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1
	qs = qs.replace(/\+/g, ' ')
	var args = qs.split('&') // parse out name/value pairs separated via &
	
// split out each name=value pair
	for (var i=0;i<args.length;i++) {
		var value;
		var pair = args[i].split('=')
		var name = unescape(pair[0])

		if (pair.length == 2)
			value = unescape(pair[1])
		else
			value = name
		
		this.params[name] = value
	}
}

function Querystring_get(key, default_) {
	// This silly looking line changes UNDEFINED to NULL
	if (default_ == null) default_ = null;
	
	var value=this.params[key]
	if (value==null) value=default_;
	
	return value
}

function playVideo(url){
	var flashMovie = document.getElementById ? document.getElementById('videoPlayer') : document.all ? document.all['videoPlayer'] : null;
	flashMovie.playVideo(url);
}
function doRolloverAsimo(imgName,img_src) {
	if (!document.images) {
		return;
	}
	document.images[imgName].src = img_src;
}