$(document).ready(function() {
    var makeCool = true;

    if (jQuery.browser.msie)
        if (jQuery.browser.version < 8)
        makeCool = false;

    if (makeCool)
        $("#mainNav > ul > li > ul").dropShadow({ top: 42, left: 2, opacity: .2, blur: 2 });

    //$("#mainNav > ul > li > div.dropShadow").attr("style", "margin:0px; top:40px; left:0px; position:absolute; z-index:1; display:none;");

    $("#mainNav > ul > li").hoverIntent(showNav, hideNav);
    $("#mainNav > ul > li > a").focus(showNav);

    function showNav() {
        // Determine if this was triggered from "li" or "a"
        var context = $(this).context.nodeName == 'LI' ? this : $(this).parent('li')

        // HACK: Need to find a better way to do this
        //if ($(this).context.nodeName == 'A') {
        $("#mainNav > ul > li > a").removeClass("hovering");
        $(".dropShadow").hide();
        $("#mainNav > ul > li > ul").slideUp('slow');
        //}

        if (makeCool) {
            //$("ul", context).slideDown('fast', function() { $(this).parent().find(".dropShadow").show(); });

            $("ul", context).slideDown('fast')

            $("ul", context).queue(function() {
                $(this).parent().find(".dropShadow").show();
                $(this).dequeue();
            });
        }
        else
            $("ul", context).show();

        $("> a", context).addClass("hovering");
    }

    function hideNav() {
        if (makeCool) {
            //$(".dropShadow", this).hide();
            $("ul", this).queue(function() {
                $(".dropShadow", $(this).parent()).hide();
                $(this).dequeue();
            });
            $("ul", this).slideUp('slow');
        }
        else
            $("ul", this).hide();

        $("> a", this).removeClass("hovering");
    }
});