function sfHover() {
    if (document.getElementById("nav") != null) {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i = 0; i < sfEls.length; i++) {
            sfEls[i].onmouseover = function() {
                this.className += " sfhover";
                // hide selects
                //toggleSelects('hidden');
            }
            sfEls[i].onmouseout = function() {
                this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
                // show selects
                //toggleSelects('visible');
            }
        }
    }
}

function animateMenu() {
    //run the effect
	var options = { direction: 'right' };
	$("#nav").show('slide', options, 500, showInnerUL);

    function showInnerUL() {
        $("#nav ul li").hide();
        $("#nav ul li").css('visibility', 'hidden');
        $("#nav ul").show('slide', options, 300, showInnerLI);
    }

    function showInnerLI() {
        $("#nav ul li").slideDown(300, appearLI);
    }

    function appearLI() {
        $("#nav ul li").css('visibility', 'visible');
    }
}

$(document).ready(function() {
	// Enable hovering
    sfHover();
    // Animate menu
    animateMenu();

});


function toggleSelects(visibility) {
    var selects = document.getElementById('content-wrapper').getElementsByTagName("select");
    var i = selects.length;
    while (i--)
        selects[i].style.visibility = visibility;
}