//PB 16/10/2006 - script to change colours of the top navigation buttons
//PB 23/12/2006 - new version...less messy than previous version
/******************************************************************************
	Uses the following CSS classes to change colours....
	1. currentnav - currently selected nav item
	2. currentnavlast - the currently selected last naivgation button
	3. currentleftnav - the previous button to the one thats been highlighted (hover)
	4. currentleftnavhigh - the previous button to the one thats been selected (clicked)
	5. last - the last navigation button (far right hand side)
	6. parentnav - the default
******************************************************************************/


//attachEvent for IE... addEventListener for the rest...onload...
if(window.attachEvent){
	window.attachEvent("onload", init);
}else if(window.addEventListener){
	window.addEventListener("load", init, false);
}

var oNavBar;
var navigationItem = new Array();

function NavigationItem(nodePosition, nodeRef, nodeClassName){
    this.nodePosition = nodePosition;
    this.nodeRef = nodeRef;
    this.nodeClassName = nodeClassName;   
}

function NavigationBar(currentNode, currentNodePosition, nodeLength){
    this.currentNode = currentNode;
    this.currentNodePosition = currentNodePosition;
    this.nodeLength = nodeLength;
}

//set some stuff to start off with..including a collection (0 based) of nav items...
function init(){
    preloadimages();
    
    var elem = document.getElementById("topnavul");
	var liTags = elem.getElementsByTagName("li");
    var menuLength = liTags.length;
    var currentItemPosition = getCurrentItem(liTags, menuLength);
    var currentItem = liTags[currentItemPosition];  
      
    oNavBar = new NavigationBar(currentItem, currentItemPosition ,menuLength);
    //create a collection for each navigation item
    
    //alert(oNavBar);
    for(var col=0; col<menuLength; col++){
        navigationItem[col] = new NavigationItem(col, liTags[col], null);
    }
   
   updateMenuBar();
}


function updateMenuBar(){
	//set CSS class for the currently selected Navigation Item
	oNavBar.currentNode.className = "currentnav";
	if(oNavBar.currentNodePosition != 0){
		navigationItem[oNavBar.currentNodePosition-1].nodeRef.className = "currentleftnav";
	}
	
	//if is the last menu item..then
	if(oNavBar.currentNodePosition == navigationItem.length-1){
		navigationItem[oNavBar.currentNodePosition].nodeRef.className = "currentnavlast";
	}
}

//set apropriate css classes when hovering over item
function hoverOutItem(oElement){

    var currentHoverOut = getPosition(oElement.id, navigationItem.length);
    if(undefined == currentHoverOut){
		currentHover=0;
    }
    var previousNodeClassName = "parentnav";
    var nextNodeNameClassName = "parentnav";
    //is next to the current node so we need to set a diifferent CSS class
    if(oNavBar.currentNodePosition+1==currentHoverOut){
        previousNodeClassName = "currentnav";
    }
    if(oNavBar.currentNodePosition-1==currentHoverOut){
        nextNodeNameClassName = "currentleftnav";
    }
    
    //SET THE CSS CLASS NAMES AS APPROPRIATE
    if(oElement.id != oNavBar.currentNode.id){//if not the same as selected
        if(navigationItem[currentHoverOut].nodePosition==0){ //if the first menu item (home button)
            navigationItem[currentHoverOut].nodeRef.className = nextNodeNameClassName;
        }else if(navigationItem[currentHoverOut].nodePosition == navigationItem.length-1){ //if the last menu item
            navigationItem[currentHoverOut].nodeRef.className = "last";
            navigationItem[currentHoverOut-1].nodeRef.className = previousNodeClassName;
        }else{ //all the inbetween items
            navigationItem[currentHoverOut].nodeRef.className = nextNodeNameClassName; //"parentnav";
            navigationItem[currentHoverOut-1].nodeRef.className = previousNodeClassName;
        }
    }
}

//set apropriate css classes when hovering off item
function hoverOverItem(oElement){
    var currentHover = getPosition(oElement.id, navigationItem.length);
  
    if(undefined == currentHover){
		currentHover=0;
    }
    
    var previousNodeClassName = "currentleftnav";
    var nextNodeNameClassName = "currentnav"
    //is next to the current node so we need to set a diifferent class
    //keeps erroring here on link5 if mouse is held over it while loading...
    try{
		if(oNavBar.currentNodePosition+1==currentHover){
			previousNodeClassName = "currentleftnavhigh";
		}
	}catch(e){
		init();
	}
	
    
    if(oNavBar.currentNodePosition != 0){  //if current node isn't the first menue item
        if(oNavBar.currentNodePosition-1==currentHover){
            previousNodeClassName = "currentleftnav";
            nextNodeNameClassName = "currentleftnavhigh";
        }
    }
    
     //SET THE CSS CLASS NAMES AS APPROPRIATE
    if(oElement.id != oNavBar.currentNode.id){
        if(navigationItem[currentHover].nodePosition==0){   //if the first menu item (home button)
            navigationItem[currentHover].nodeRef.className = nextNodeNameClassName;
        }else if(navigationItem[currentHover].nodePosition == navigationItem.length-1){ //if the last menu item
            navigationItem[currentHover].nodeRef.className = "currentnavlast";
            navigationItem[currentHover-1].nodeRef.className = previousNodeClassName;           
        }else{ //all the inbetween items
            navigationItem[currentHover].nodeRef.className = nextNodeNameClassName; //"currentnav"; //"currentleftnavhigh";
            navigationItem[currentHover-1].nodeRef.className = previousNodeClassName;
        }
   }
}

function getPosition(menuItemID, menuLength){    
    for(var x=0; x<menuLength; x++){
        if(menuItemID == navigationItem[x].nodeRef.id){
            return x;
        }
    }
}

function getCurrentItem(oMenuItems, menuLength){
    for(var x=0;x<menuLength;x++){
        if(oMenuItems[x].className == "currentnav" || oMenuItems[x].className == "currentnavlast" || oMenuItems[x].className == "current"){
            return x;
        }
    }
}

var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var img6 = new Image();
	
function preloadimages(){
	img1.src = "/public/styles/assurewebcorporate/images/topnav_midcurve.gif";
	img2.src = "/public/styles/assurewebcorporate/images/topnav_midcurveleft_high.gif";
	img3.src = "/public/styles/assurewebcorporate/images/topnav_rightcurve_high.gif";
	img4.src = "/public/styles/assurewebcorporate/images/topnav_midcurveright_high.gif";
	img5.src = "/public/styles/assurewebcorporate/images/topnav_midcurve_high.gif";
	img6.src = "/public/styles/assurewebcorporate/images/topnav_rightcurve_1.gif";
}