﻿$(document).ready(function() {

    $("ul.topnav>li").mouseenter(
        function() { //When trigger is clicked...  

            //$(this).css("background-image", "url('/Style%20Library/HamiltonIsland/images/controls/DropDownNavigation/selectedmenuitem-gradient.jpg')");

            $(this).find("ul.subnav").show(); //show the subnav on mouseenter 
            //alert($(this).css('width'));

            $(this).hover(
                function() { }
                , function() {
                    $(this).find("ul.subnav").hide(); //When the mouse hovers out of the subnav, hide it
                });

            //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(
            function() {
                $(this).addClass("subhover"); //On hover over, add class ""subhover""  
            }
            , function() {  //On Hover Out  
                $(this).removeClass("subhover"); //On hover out, remove class ""subhover""  
                //$(this).css("background", "none");
            }
        );


    $("ul.topnav>li").each(function(index) {  //resize the subnav ul so all column ul's can display side by side
        var topnavwidth = $("ul.topnav").css("width");
        var dropdownwidth = ($(this).find(".newsubnav>ul").size() * 180) + "px"; //width the dropdown needs to be for all columns to sit side by side
        //alert("topnavwidth " + topnavwidth + ", dropdownwidth " + dropdownwidth + ", dropdownwidth > topnavwidth = " + (parseInt(dropdownwidth) > parseInt(topnavwidth)));
        if (parseInt(dropdownwidth) > parseInt(topnavwidth)) {
            dropdownwidth = (Math.floor(parseInt(topnavwidth) / 180) * 180) + "px";
        }
        $(this).find("ul.subnav").css("width", dropdownwidth);
    });

    var distanceFromLeft = 0;
    $("ul.topnav>li").each(function(index) {  //resize the subnav ul so all column ul's can display side by side
        var topnavwidth = parseInt($("ul.topnav").css("width"));
        var topnavitemwidth = parseInt($(this).outerWidth());
        var subnavwidth = parseInt($(this).find("ul.subnav").css("width"));
        //alert(distanceFromLeft);
        if ((topnavwidth - distanceFromLeft) < subnavwidth) //menu won't fit to the right
        {
            //alert(distanceFromLeft + " + " + topnavitemwidth + " - " + subnavwidth + " >= 0");
            if ((distanceFromLeft + topnavitemwidth - subnavwidth) >= 0) //menu will fit to the left
            {
                //alert(distanceFromLeft + " Will fit Left");
                $(this).find("ul.subnav").css("left", "-" + (subnavwidth - topnavitemwidth) + "px");
            }
            else {
                var rightoverhang = (distanceFromLeft + subnavwidth) - topnavwidth
                var nicefactor = (distanceFromLeft - rightoverhang) / 2; //if the nav doesn't need to sit flush with the left side it won't
                $(this).find("ul.subnav").css("left", "-" + (rightoverhang + nicefactor) + "px");
                //alert(rightoverhang + ", " + nicefactor);
            }
        }

        distanceFromLeft += topnavitemwidth;

    });

});
