$(function() {
    // MEGA MENU CODE - first things first, get the number of sub navs in the menu

    var numberOfSubNavs = $("#nav ul li div.sub-items-wrapper div div");

    // Style each parent sub nav anchor tag - this adds a lovely little arrow
    $("#nav ul li div.sub-items-wrapper").parent().children("a").addClass("inactive-with-sub-nav");

    // IE 6 needs each sub nav container to have a width. To make this dynamic I get all of the nav columns 
    // and multiply the number of columns but the width to each column. This value is now the set width of the container.
    for (i = 0; i < numberOfSubNavs.length; i++) {
        var newWidth = numberOfSubNavs.eq(i - 1).children("ul").length * 170;
        numberOfSubNavs.eq(i - 1).width(newWidth + "px");
    }

    // all sub nav anchors have a mouse over event added - this event fades in the nav
    $("#nav ul li div.sub-items-wrapper").parent().mouseover(function() {
        clearInterval(this.fadeIntervalID);
        $(this).children("a", this).addClass("active-with-sub-nav");
        $(this).children("div.sub-items-wrapper", this).fadeIn(300, function() {
            $(this).addClass("sub-items-transparency");
        });
    });
    // all sub nav anchors have a mouse over event added - this event fades out the nav
    $("#nav ul li div.sub-items-wrapper").parent().mouseleave(function() {
        var global = this;
        this.fadeIntervalID = setTimeout(function() {
            $(global).children("div.sub-items-wrapper", global).removeClass("sub-items-transparency");
            $(global).children("a", global).removeClass("active-with-sub-nav");
            $(global).children("div.sub-items-wrapper", global).fadeOut(150);
        }, 200);

    });
});