// JavaScript Document
function initFlyoutNav() { 
   var mainNav = document.getElementById( "mainNav" ); 
   if ( !mainNav ) return; 
    
   // addEvents and deal with browser incompatibilities: 
   mainNav.onmouseover = mainNav.onfocusin = unfoldMenu; 
   mainNav.onmouseout = mainNav.onfocusout = foldMenu; 
   if ( mainNav.addEventListener ) { 
      mainNav.addEventListener( "focus", unfoldMenu, true ); 
      mainNav.addEventListener( "blur", foldMenu, true ); 
   } 
} 

function unfoldMenu( e ) { 
   var item = getItem( e ); 
   if ( item ) addClass( item, "jsHover" ); 
} 

function foldMenu( e ) { 
   var item = getItem( e ); 
   if ( item ) removeClass( item, "jsHover" ); 
} 

function getItem( e ) { 
   // deal with browser incompatibilities (event object): 
   e = e || window.event; 
   var target;
   if (e.target) { target = e.target; }
   else if (e.srcElement) { target = e.srcElement; }
   // var target = e.target || e.srcElement; 
    
   // find containing <li>: 
   var mainNav = document.getElementById( "mainNav" ); 
   if ( !mainNav ) return false; 
    
   while ( target.parentNode != mainNav ) { 
      target = target.parentNode; 
   }; 
   return target; 
} 

function addClass( elem, name ) { 
   removeClass( elem, name );   // make sure there won't be any doubles 
   elem.className += " " + name; 
} 

function removeClass( elem, name ) { 
   var remain = []; 
   var values = elem.className.split(/\s+/);   // seperate class names (devided by one or more whitespaces) 
   for ( var v = 0; v < values.length; v++ ) { 
      if ( values[ v ] != name ) remain[ remain.length ] = values[ v ]; 
   } 
   elem.className = remain.join( " " ); 
} 

window.onload = initFlyoutNav;