var browserFilter = new BrowserFilter();
function BrowserFilter(){
	this.W3CDOM = (document.createElement && document.getElementsByTagName && !document.all);
	this.IE5up = (document.getElementsByTagName && document.all && !window.opera);
	this.IE5Mac = ( (navigator.appVersion.indexOf("Mac") != -1) && document.all);
	this.Opera = (document.getElementsByTagName && document.all && window.opera);
	this.OTHER = (!document.getElementsByTagName || !document.createElement);
	return this;
}

/* Opera can't figure out the nav width on its own, so let's give it some help */
function setNavWidth(rootElement,tags){
    var rootNode = document.getElementById(rootElement);
    var navNodes = rootNode.getElementsByTagName(tags);
    var navWidth = 0;
    for (var i=0; i < navNodes.length; i++){
           navWidth += parseInt( navNodes[i].getAttribute("width") );
    }
    rootNode.style.width = navWidth + "px";
}

/* 
sets the primary nav to highlighted based on an ID set on the BODY tag.
each primary nav image tag also has an ID set. This ID is dependent on
numerical order. The id begins with "nav" and as the function moves through
the loop, i is incrementing. when the ID matches the string at the array
index, i is concatenated to "nav", producing the img ID to highlight.
e.g. the insights nav image has an ID = nav2
 */
function doNavOnState(){
    var list = new Array('approach','products','insights','advisor', // ind
        'overview','retirement','fined','distributor','perspective', // corp
        'about','press','investor','careers','customer'); // global
    var b = document.body.getAttribute("ID");
    for (var i=0; i < list.length; i++){
        if(b == list[i]){ 
            var imgObj = document.getElementById("nav" + i);
            var src = imgObj.getAttribute("src");
            imgObj.setAttribute("src", src.substring(0,src.lastIndexOf('-off.gif')) + "-on.gif");
        }
    }
}

/* 
this rather complicated function will recursively attach event handlers to the children of a root element.
it consists of wireTriggerElements, the recursor, and several other helper functions. I've tried to make it
modular, but a few dependcies have crept in. Things to note: images must be named with -off.gif -on.gif -over.gif
for the script to indentify them properly. Also, you may added or remove nested UL's, but you must not introduce
other containers, like wrapping them in a DIV. You're HTML must also be structurally valid as the script is very
DOM dependent. All this allows us to keep the HTML free of mouseovers and such.
Initially it was quite a bit smaller, but as features were added... it bloated a little.
*/
function doNavEffects(rootElement,trigger,subContainer){
    if(browserFilter.OTHER) return;
    var mouseOvers = new Array();
    var mouseOuts = new Array();
    var rootNode = document.getElementById(rootElement);
    
    if(!rootNode){ alert("root node is not defined!"); return;}
   
    buildSwapHandlers();
    wireTriggerElements(rootNode,trigger);
    
    // wire nav handlers
    function wireTriggerElements(rn,te){
		var trigger = te;
		var currentNodeList = rn.getElementsByTagName(trigger);
		for (var i=0; i < currentNodeList.length; i++) { 
			var currentNode = currentNodeList[i];
			if ( currentNode.childNodes.length > 0 ) // we've got submenus, recurse
				wireTriggerElements( currentNode,trigger ); 
			if ( currentNode.getElementsByTagName(subContainer)[0] ) // if it's a parent, show/hide
				createElementListeners(currentNode, 1);
            else
              createElementListeners(currentNode, 0); // or, just do color effects
		}
	}
    
    function createElementListeners(cNode, effect){
        if(effect){
    		cNode.onmouseover=doSubNavOver;
    		cNode.onmouseout=doSubNavOut;
        }
        else{
    		cNode.onmouseover=doHighOver;
    		cNode.onmouseout=doHighOut;
        }
	} 
    // wire img handlers
    function buildSwapHandlers(){
    	var imgs = rootNode.getElementsByTagName('img');
    	if(!imgs) {alert("images nodeList not found!");  return;}
    	for (var i=0; i< imgs.length; i++){
            if( imgs[i].src.indexOf('-off.') != -1  || imgs[i].src.indexOf('-on.') != -1) {
                mouseOuts[i] = new Image();
                mouseOuts[i].src = imgs[i].src;
                mouseOvers[i] = new Image();
                mouseOvers[i].src = getImgSrcPath( imgs[i].src);
                imgs[i].number = i;
                imgs[i].onmouseover=doMouseOver;
                imgs[i].onmouseout=doMouseOut;
            }
         }
    }
    /* get img src information from img object itself. check if state is off or on, use relevant one. */
    function getImgSrcPath(src){
        var path = null;
        if( src.lastIndexOf('-off.gif') != -1 ){
           path = src.substring(0,src.lastIndexOf('-off.gif')) + "-over.gif";}
        else if( src.lastIndexOf('-on.gif') != -1 ){
           path = src.substring(0,src.lastIndexOf('-on.gif')) + "-over.gif";}
       return path;
    }
    
    // show/hide nav functions
    function doSubNavOver(event){ 
        
        var sc = this.getElementsByTagName(subContainer)[0];
        var img = this.getElementsByTagName("img")[0];
        sc.style.visibility="visible";
        
        // set colors on secondary LI elements
        this.style.backgroundColor="#330000";
        this.style.color="#ffffcc";
        // if this LI has an image, it's one of the primary navs. call sticky to keep
        // its "over" state active while over the sub menus.
        if(typeof(img) != "undefined")
            stickyMouseOver(img, img.number);
    }
    function doSubNavOut(event){ 
        var sc = this.getElementsByTagName(subContainer)[0];
        var img = this.getElementsByTagName("img")[0];
        sc.style.visibility="hidden";
        this.style.backgroundColor="#330000";
        this.style.color="#ffffcc";
        if(typeof(img) != "undefined")
            stickyMouseOut(img, img.number);
    }
    // highlight handler functions for third level LI elements
    function doHighOver(event){
        this.childNodes[0].style.backgroundColor="#330000";
        this.childNodes[0].style.color="#ffffcc";
    }
    function doHighOut(event){ 
        this.childNodes[0].style.backgroundColor="#330000";
        this.childNodes[0].style.color="#ffffcc";
    }
    
    // image swap handler functions
    function doMouseOver() { this.src = mouseOvers[this.number].src; }
    function doMouseOut() { this.src = mouseOuts[this.number].src; }
    
    // these keep the primary nav over states active while over the popout menus
	function stickyMouseOver(imgObj, imgObjNum) { 
	    imgObj.src = mouseOvers[imgObjNum].src; 
	}
	function stickyMouseOut(imgObj, imgObjNum) {
	    imgObj.src = mouseOuts[imgObjNum].src; 
	}
}