sfHover = function() {   
    var timeout = 600;   
    var cssClass = "sfhover";   
  
    var queue = [];   
    var reCSS = new RegExp("\\b" + cssClass + "\\b");   
    var sfEls = document.getElementById("nav").getElementsByTagName("li");   
    for (var i=0; i<sfEls.length; i++) {   
  
        // mouseover and mouseout handlers for regular mouse based interface.   
        sfEls[i].onmouseover = function() {   
            queueFlush();   
            this.className += " " + cssClass;   
        }   
        sfEls[i].onmouseout = function() {   
            queue.push([setTimeout(queueTimeout, timeout), this]);   
        }   
  
        // focus and blur handlers for keyboard based navigation.   
        sfEls[i].onfocus = function() {   
            queueFlush();   
            this.className += " " + cssClass;   
        }   
        sfEls[i].onblur = function() {   
            queue.push([setTimeout(queueTimeout, timeout), this]);   
        }   
  
        // click event handler needed for tablet type interfaces (e.g. Apple iPhone).   
        sfEls[i].onclick = function(e) {   
            if (this.className.search(reCSS) == -1) {   
                // CSS not set, so clear all sibling (and decendants) menus, and then set CSS on this menu...   
                var elems = this.parentNode.getElementsByTagName("li");   
                for (var i=0; i<elems.length; i++) {   
                    elems[i].className = elems[i].className.replace(reCSS, "");   
                }   
                this.className += " " + cssClass;   
            } else {   
                // CSS already set, so clear all decendant menus and then this menu...   
                var elems = this.getElementsByTagName("li");   
                for (var i=0; i<elems.length; i++) {   
                    elems[i].className = elems[i].className.replace(reCSS, "");   
                }   
                this.className = this.className.replace(reCSS, "");   
            }   
            if (e && e.stopPropagation)   
                e.stopPropagation();   
            else  
                window.event.cancelBubble = true;   
        }   
    }   
  
    queueFlush = function () {   
        while (queue.length) {   
            clearTimeout(queue[0][0]);   
            queueTimeout();   
        }   
    }   
  
    queueTimeout = function() {   
        if (queue.length) {   
            var el = queue.shift()[1];   
            el.className = el.className.replace(reCSS, "");   
        }   
    }   
}   
addLoadEvent(sfHover);  

function addLoadEvent(func) {   
    var oldonload = window.onload;   
    if (typeof window.onload != 'function') {   
        window.onload = func;   
    } else {   
        window.onload = function() {   
            oldonload();   
            func();   
        }   
    }   
}  

