/// <reference path="jquery-1.2.6-vsdoc.js" />

var topMenuItem;
var clickedTopmenuItem;
var submenuitems;
var submenuleftmargin = 22;

$(document).ready(function() {

    // Run through all the topmenu items and get the one that is selected    
    $("#Header #TopMenu ul li").each(function() {
        if ($(this).hasClass("selected")) {
            topMenuItem = $(this).children("span");
            $(this).children("span").css("font-weight", "bold");
            $(this).css("background", "transparent url(/Images/Icons/TopMenuHoveredDot.gif) no-repeat scroll center bottom")
        }
    });

    // Remove the right margin from the last menu item
    $("#Header #TopMenu ul li:last").prev().attr("last", "true");
    $("#Header #TopMenu ul li:last").css("margin-right", "0px");

    // Run through all the submenu items and determine which ones to show
    // The submenu item id's are based on the topmenu item title's, therefor we need to match the item id with the topmenu item title.
    //    submenuitems = $("#Header #TopMenu .SubMenuDiv .SubMenuText");
    //    submenuitems.each(function() {
    //        var text = $(topMenuItem).text().replace(/ /g, '_');
    //        if ($(this).attr("id").split("-", 1) == text) {
    //            $(this).show();
    //            $(this).attr("shown", "true");
    //        }
    //        else {
    //            $(this).hide();
    //            $(this).attr("shown", "false");
    //        }
    //    });
        
    SubmenuItemsToShowHoverVersion(true);

    //CheckIfOnlyOneSubmenuItem(true);


    // We need to dertermine the size of the submenulayer on init to ensure a smooth fade effect
    // We are passing in 2 variables - the first should be true, since this is the first time the size of the submenulayer is being determined.
    // The second should be true of false depending if we have a selected topmenu item or not.        
    if (topMenuItem == null)
        DetermineLayerSize(true, true);
    else
        DetermineLayerSize(true, false);

    // On click run through all the topmenu items and remove their class attribute, then add the class 
    // "selected" to the clicked topmenu item. Then we save the clicked subitem (span) in a variable for later use.
    // At last we call the SubmenuItemsToShow function to carry out the rest of the code after a slight delay matching the fadein delay.
    //    var skipfirstfade = true;
    //    $("#Header #TopMenu ul li span").click(function() {
    //        $("#Header #TopMenu ul li").each(function() {
    //            $(this).removeAttr("class");
    //        });
    //        $("#Header #TopMenu ul li:last").prev().attr("last", "true"); // Small hack to make sure the last menu item always has the class "last"
    //        $("#Header #TopMenu ul li:last").css("margin-right", "0px"); // Smal hack to remove the right margin from the last entry
    //        $(this).parent("li").addClass("selected");
    //        clickedTopmenuItem = $(this);
    //        if (topMenuItem == null && skipfirstfade) {
    //            // if these conditions are true, we are on the fronpage and havent selected any topmenu items.
    //            // Therefor we should skip the fadein and the following timeout.
    //            // The skipfirstfade variable makes sure that we only skip the fade on the very first click.
    //            SubmenuItemsToShow(true);
    //            skipfirstfade = false;
    //        }
    //        else {
    //            $(".SubMenuDivLayer").fadeIn(500);
    //            setTimeout("SubmenuItemsToShow(false);", 500);
    //        }
    //    });    

    var skipfirstfade = true;
    var skipfirstblink = true;
    $("#Header #TopMenu ul li span").hover(function() {

        if (topMenuItem != null && skipfirstblink) {
            skipfirstblink = false;
            if ($(topMenuItem).text() == $(this).text()) {
                clickedTopmenuItem = $(this);
                return;
            }
        }

        if ($(clickedTopmenuItem).text() == $(this).text()) {
            return;
        }

        clickedTopmenuItem = $(this);

        $("#Header #TopMenu ul li span").each(function() {
            //if (!$(this).parent().hasClass("selected"))
            $(this).parent().css("background", "");
        });

        //if (!$(this).parent().hasClass("selected"))
        $(this).parent().css("background", "transparent url(/Images/Icons/TopMenuHoveredDot.gif) no-repeat scroll center bottom")

        if (topMenuItem == null && skipfirstfade) {
            SubmenuItemsToShowHoverVersion(false);
            skipfirstfade = false;
        }
        else {
            $(".SubMenuDivLayer").fadeIn(500);
            setTimeout("SubmenuItemsToShowHoverVersion(false);", 500);
        }
    },
    function() {
    });

    $("#MainContent div").children("p:last").css("margin-bottom", "0px");
        
});

function SubmenuItemsToShowHoverVersion(FirstLoad) {
    var topmenuItem;
    if (FirstLoad)
        topmenuItem = topMenuItem;
    else
        topmenuItem = clickedTopmenuItem;

    if (topmenuItem == null)
    { }
    else {        
        var allsubmenutexts = $("#Header #TopMenu .SubMenuDiv .SubMenuText");
        allsubmenutexts.each(function() {
            var text = $(topmenuItem).text().replace(/ /g, '_');
            if ($(this).attr("id").split("-", 1) == text) {
                $(this).show();
                $(this).attr("shown", "true");
            }
            else {
                $(this).hide();
                $(this).attr("shown", "false");
            }
        });        

        var topmenu = $("#TopMenu");
        var topmenuleft = topmenu.offset().left;
        var hovereditem = $(topmenuItem);
        var hovereditemleft = $(topmenuItem).offset().left;

        var topmenurightmargin = $("#TopMenu").css("margin-right");
        topmenurightmargin = topmenurightmargin.substring(0, topmenurightmargin.length - 2);
        
        RemoveLeftMarginOnFirstSubmenuItem();
        
        var submenuwidth = 0;
        $("#Header #TopMenu .SubMenuDiv span[shown='true']").each(function() {            
            if (submenuwidth == 0)
                submenuwidth = submenuwidth + $(this).width();
            else
                submenuwidth = submenuwidth + ($(this).width() + submenuleftmargin);
        });
        
        var availablewidth = topmenu.width() - (hovereditemleft - topmenuleft) - topmenurightmargin;
        var calculatedwidth = availablewidth - submenuwidth;
        
        var leftalign;        
        if (calculatedwidth < 0)
            leftalign = false
        else
            leftalign = true;
        
        if (leftalign) {
            var submenuleft = hovereditemleft - topmenuleft;
            $("#Header #TopMenu .SubMenuDivLayer").css("left", submenuleft);
            $("#Header #TopMenu .SubMenuDiv").css("left", submenuleft);
            $("#Header #TopMenu .SubMenuDiv").css("right", "");
            $("#Header #TopMenu .SubMenuDiv").css("text-align", "left");
        }
        else {
            var submenuright = topmenu.width() - ((hovereditemleft + hovereditem.width()) - topmenuleft);
            $("#Header #TopMenu .SubMenuDivLayer").css("right", submenuright);
            $("#Header #TopMenu .SubMenuDiv").css("right", submenuright);
            $("#Header #TopMenu .SubMenuDiv").css("left", "");
            $("#Header #TopMenu .SubMenuDiv").css("text-align", "right");
        }

        DetermineLayerSize(false, false);

        $(".SubMenuDivLayer").fadeOut(500);
    }
}

function RemoveLeftMarginOnFirstSubmenuItem() {
    var firstitem = $("#Header #TopMenu .SubMenuDiv .SubMenuText[shown='true']:first");    
    if (firstitem.length == 1) {        
        firstitem.css("margin-left", "0px");
    }    
}

function DetermineLayerSize(firstTime, noTopMenuSelected) {
    var subMenuDiv = $(".SubMenuDiv");
    var subMenuDivLayer = $(".SubMenuDivLayer");

    $(subMenuDivLayer).width($(subMenuDiv).width());
    $(subMenuDivLayer).height($(subMenuDiv).height());

    var x = $(subMenuDiv).position().left;
    var y = $(subMenuDiv).position().top;
    $(subMenuDivLayer).css("left", x);
    $(subMenuDivLayer).css("top", y);
    // If its the first time we are determining the layer size we need to make sure its not displayed
    // Otherwise it will hide the submenu. We should only do this if we have a topmenu selected and we are showing the menu for the first time.
    if (firstTime && noTopMenuSelected) {
    }
    else if (firstTime) {        
        $(subMenuDivLayer).css("display", "none");
    }    
}

function SubmenuItemsToShow(noTopMenuSelected) {
    // First we get all the submenu items
    // Then we run through them matching their id with the title of the clicked topmenu item ("clickedTopmenuItem")
    // and determine if they should be show or not. At last we determine the new layer size and fade out the layer.
    var allsubmenutexts = $("#Header #TopMenu .SubMenuDiv .SubMenuText");
    for (var i = 0; i < allsubmenutexts.length; i++) {
        var text = $(clickedTopmenuItem).text().replace(/ /g, '_');
        if ($(allsubmenutexts[i]).attr("id").split("-", 1) == text) {
            $(allsubmenutexts[i]).show();
            $(allsubmenutexts[i]).attr("shown", "true");
        }
        else {
            $(allsubmenutexts[i]).hide();
            $(allsubmenutexts[i]).attr("shown", "false");
        }
    }
    // Dertermine what parameters to pass to the DetermineLayerSize function depending if we have a topmenu selected.
    if (noTopMenuSelected) {        
        DetermineLayerSize(false, true);
    }
    else {        
        DetermineLayerSize(false, false);
    }

    var onlyone = CheckIfOnlyOneSubmenuItem(false);
    
    if (!onlyone) {
        $("#Header #TopMenu .SubMenuDivLayer").css("left", "").css("right", "0px");
        $("#Header #TopMenu .SubMenuDiv").css("left", "").css("right", "0px");
        $("#Header #TopMenu .SubMenuDiv span").css("margin-left", "22px");
    }
    $("#Header #TopMenu .SubMenuDivLayer").fadeOut(500);
}

function CheckIfOnlyOneSubmenuItem(first) {
    // Calculates if the submenu items shown is equal to 1. If thats the case we should place it under the topmenu item
    if (topMenuItem == null && clickedTopmenuItem == null) {
    }
    else {
        var menuitem;
        if (first)
            menuitem = $(topMenuItem);
        else
            menuitem = $(clickedTopmenuItem);
        var onlyone = false;
        var header = $("#Header");
        var leftpos = (menuitem.offset().left - header.offset().left - 44); // the margin is 44px    
        var shownsubmenuitems = 0;
        submenuitems.each(function() {
            if ($(this).attr("shown") == "true") {
                shownsubmenuitems++;
            }
        });

        if (shownsubmenuitems == 1 && menuitem.parent().attr("last") != "true") {
            $("#Header #TopMenu .SubMenuDivLayer").css("left", leftpos);
            $("#Header #TopMenu .SubMenuDiv").css("left", leftpos);
            $("#Header #TopMenu .SubMenuDiv span").css("margin-left", "0px");
            onlyone = true;
        }
        return onlyone;
    }
}