var timer = null;
var menuTimer = null;
var oMenu = null;
     
addEventMan(window, "load", function(){initNavigation();}, true);   

function initNavigation(){
    var oNav = document.getElementById('navigation');
    var oLi = oNav.getElementsByTagName('li');
 
    for(var i = 0; i < oLi.length; i++){
        addEventMan(oLi[i], "mouseover", function(e){showMenu(e);}, true);
        addEventMan(oLi[i], "mouseout", function(e){hideMenu(e);}, true);
        addEventMan(oLi[i], "click", function(e){rippleClickEvent(e);}, true);
    }     
    
     var oA = oNav.getElementsByTagName('a');
     for(var i = 0; i < oA.length; i++){
        if(window.location.href.indexOf(oA[i].href) >= 0){
            element = oA[i];
            while(element.parentNode.parentNode.id != "navigation"){
                element = element.parentNode;
            }
            element.className += ' active';
        }
     }
    
    addEventMan(document, "mouseover", function(){if(timer == null){timer =  setTimeout("hideAll()", 500);}}, true);   
    
    /* Fix border issue for IE 6.0 */
    var IE6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) && (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1)

    if (IE6){
       var oUl = oNav.getElementsByTagName('ul');
        for(var i = 0; i < oUl.length; i++){
            var olis = oUl[i].getElementsByTagName('li');
            olis[0].style.border = '0px';
        } 
    }
    
     setWidths()
}
      
function setWidths(){
    var oNav = document.getElementById('navigation');
    var oUl = oNav.getElementsByTagName('ul');
    
   for(var i = 0; i < oUl.length; i++){
        var width = getMaxWidth(oUl[i]) + 20; 
        if( i != 0){
            oUl[i].style.width  = width + 'px';
        }
        
        // find any divs and set them to t
        var subULs = oUl[i].getElementsByTagName('div');
        for(var a = 0; a < subULs.length; a++){
            subULs[a].style.left = width + 'px';
        }
    }
}
      
function getMaxWidth(el){    
    var oli = el.childNodes;
    var width = 0;
    var thisWidth = 0;

    for(var c = 0; c < oli.length; c++){
        atags = oli[c].childNodes;
        
        for(var i = 0; i < atags.length; i++){
            if(atags[i].nodeName.toLowerCase() == 'a'){ thisWidth = atags[i].offsetWidth; } 
            if (thisWidth > width){ width = thisWidth; }
        }
    }
   return width; 
}

function showMenu(e){
   if (!e) var e = window.event;
   var target = (typeof event!=='undefined')? event.srcElement : e.target;  
  
   // If the item is not the li but an object within the li then we need to get the li
   while(target && !/^li$/i.test(target.nodeName) ) {target = target.parentNode;}
   
   var thisdiv = target;     
     
   while(thisdiv && !/^div$/i.test(thisdiv.nodeName) ) {thisdiv = thisdiv.parentNode;}
    
    var oDiv = thisdiv.getElementsByTagName('div');
    for(var i = 0; i < oDiv.length; i++){
        oDiv[i].style.display='none';
        // remove the style from the li and the 
        removeSelectedClass(oDiv[i].parentNode);
    }
           
    thisdiv.style.display = 'block';
    addSelectedClass(target);
    addSelectedClass(thisdiv.parentNode);
   
    var liChildren = target.childNodes;
    
    // check to see if the li item has a div in it.
    for(var c = 0; c < liChildren.length; c++){
        if(liChildren[c].nodeName.toLowerCase() == 'div'){ liChildren[c].style.display = 'block'; }
    }
    
    setWidths();
    e.cancelBubble = true;
    clearTimeout(timer);  timer = null;
    clearTimeout(menuTimer);  menuTimer = null;
}
    
function hideMenu(e){
    if (!e) var e = window.event;
    var target = (typeof event!=='undefined')? event.srcElement : e.target;  
    var dontChangeClass = false; 
         
    // If the item is not the li but an object within the li then we need to get the li
    while(target && !/^li$/i.test(target.nodeName) ) {target = target.parentNode;}

    var liChildren = target.childNodes;
    // check to see if the li item has a div in it.
    for(var c = 0; c < liChildren.length; c++){
        if(liChildren[c].nodeName.toLowerCase() == 'div'){
            oMenu = liChildren[c];
            if(menuTimer == null){menuTimer =  setTimeout( "oMenu.style.display = 'none'", 100);}    
            dontChangeClass = true;      
        }
    }
    e.cancelBubble = true;
    if(!dontChangeClass){  removeSelectedClass(target);}
}

function rippleClickEvent(e){
   if (!e) var e = window.event;
   
   var target = (typeof event!=='undefined')? event.srcElement : e.target;  
  
   // If the item is not the li but an object within the li then we need to get the li
   while(target && !/^li$/i.test(target.nodeName) ) {target = target.parentNode;}
   // This will currently only work if the first node in the li is the a tag
   if(target.firstChild.target != "blank")
   {
        location.replace(target.firstChild.href);
   }

   e.cancelBubble = true;
}
    
function hideAll(){
    // Hide all popup menu's
    var oDiv = document.getElementById('navigation').getElementsByTagName('div');
    for(var i = 0; i < oDiv.length; i++){ oDiv[i].style.display='none'; }  
    
    // Set all Selected classes to blank
    var oli = document.getElementById('navigation').getElementsByTagName('li');
    for(var i = 0; i < oli.length; i++){ removeSelectedClass(oli[i]); }  
}

function removeSelectedClass(oEl){
    oEl.className = oEl.className.replace(/selected/gi, '').replace(/^\s*|\s*$/g,''); 
}

function addSelectedClass(oEl){
    if(oEl.nodeName.toLowerCase() != 'div' && oEl.className.indexOf('selected') == -1){  oEl.className += ' selected';}  
}