$jq(document).ready(function () {

    function createMenu(data) {
        if (typeof (data) != "object" || data == null || data.length == 0) {
            return null;
        }

        var menu = $jq("<div class='jqMenuList'></div>");
        for (var i = 0; i < data.length; ++i) {
            var item = data[i];

            var menuItem = $jq("<div class='jqMenuListItem' id=" + item.Url + ">" + item.Text + "</div>");
            if (i == 0) {
                $jq(menuItem).addClass('jqMenuListItemDefault');
            }
            menu.append(menuItem);
            $jq(menuItem).bind("click", function () { window.open($jq(this).attr("id"), "_top") });
            $jq(menuItem).bind("mouseover", function () { $jq(this).addClass("jqMenuListItemSelected"); });
            $jq(menuItem).bind("mouseout", function () { $jq(this).removeClass("jqMenuListItemSelected"); });

        }

        return menu;
    };

    // create menus 
    var menuApps = createMenu(TabsMasterHeaderMenu_AppsDataSource);
    var menuGames = createMenu(TabsMasterHeaderMenu_GamesDataSource);
    var menuEnterprise = createMenu(TabsMasterHeaderMenu_EnterpriseMenuDataSource);

    var tb = $jq('<div id="MainNavContent"></div>');

    if (typeof (TabsMasterHeaderMenu_Selection) != "string") {
        TabsMasterHeaderMenu_Selection = "home";
    }

    var div = $jq("<div class='" + ('TabContainer' + ((TabsMasterHeaderMenu_Selection == 'home') ? ' TabContainerSelected' : ' TabContainerUnselected')) + "' rel='home'></div>");
    var innerDiv = $jq("<div class='x-btn-text'><span class='main-nav-shadow'><span class='main-nav-shadow-text'>Home</span><span class='main-nav-overlay-text'>Home</a></span></span></div>");
    $jq(div).bind("click", function () { window.location = "/"; });
    $jq(div).bind("mouseover", function () { $jq(this).addClass("TabContainerHover"); });
    $jq(div).bind("mouseout", function () { $jq(this).removeClass("TabContainerHover"); });
    div.append(innerDiv);
    tb.append(div);

    var divApps = $jq("<div class='jqMenuHead " + ('TabContainer TabContainerMenu' + ((TabsMasterHeaderMenu_Selection == 'apps') ? ' TabContainerSelected' : ' TabContainerUnselected')) + "' rel='apps'></div>");
    var innerDiv = $jq("<div class='x-btn-text' rel='/Apps'><span class='main-nav-shadow'><span class='main-nav-shadow-text'>Apps</span><span class='main-nav-overlay-text'>Apps</a></span></span></div>");
    $jq(divApps).bind("mouseover", function () { $jq(this).addClass("TabContainerMenuHover"); });
    $jq(divApps).bind("mouseout", function () { $jq(this).removeClass("TabContainerMenuHover"); });
    divApps.append(innerDiv);
    tb.append(divApps);
    tb.append(menuApps);

    var divGames = $jq("<div class='jqMenuHead " + ('TabContainer TabContainerMenu' + ((TabsMasterHeaderMenu_Selection == 'games') ? ' TabContainerSelected' : ' TabContainerUnselected')) + "' rel='games'></div>");
    var innerDiv = $jq("<div class='x-btn-text' rel='/Games'><span class='main-nav-shadow'><span class='main-nav-shadow-text'>Games</span><span class='main-nav-overlay-text'>Games</a></span></span></div>");
    $jq(divGames).bind("mouseover", function () { $jq(this).addClass("TabContainerMenuHover"); });
    $jq(divGames).bind("mouseout", function () { $jq(this).removeClass("TabContainerMenuHover"); });
    divGames.append(innerDiv);
    tb.append(divGames);
    tb.append(menuGames);

    var divEnterprise = $jq("<div class='jqMenuHead " + ('TabContainer TabContainerMenu' + ((TabsMasterHeaderMenu_Selection == 'enterprise') ? ' TabContainerSelected' : ' TabContainerUnselected')) + "' rel='enterprise'></div>");
    var innerDiv = $jq("<div class='x-btn-text' rel='/Server'><span class='main-nav-shadow'><span class='main-nav-shadow-text'>Enterprise</span><span class='main-nav-overlay-text'>Enterprise</a></span></span></div>");
    $jq(divEnterprise).bind("mouseover", function () { $jq(this).addClass("TabContainerMenuHover"); });
    $jq(divEnterprise).bind("mouseout", function () { $jq(this).removeClass("TabContainerMenuHover"); });
    divEnterprise.append(innerDiv);
    tb.append(divEnterprise);
    tb.append(menuEnterprise);

    $jq("#" + TabsMasterHeaderMenu_PlaceHolderId).append(tb);

    if (TabsMasterHeaderMenu_Selection == 'games') {
        var arrowSrc = '-games';
        var arrowClass = 'jqTabNavArrowGames';
        var normalPillSrc = '-games';
        var hoverPillSrc = '-hover-games';
    } else {
        var arrowSrc = '';
        var arrowClass = '';
        var normalPillSrc = '';
        var hoverPillSrc = '-hover';
    }

    var pillEdgeWidth = 13;
    var arrowWidth = 8;

    $jq('.TabContainer').each(function (index) {
        var container = $jq(this);
        var pill = $jq("<div class='pill-background' style='display: none'></div>");
        var pillLeft = $jq("<img class='pill-left'></img>");
        var pillMiddle = $jq("<img class='pill-middle'></img>");
        var pillRight = $jq("<img class='pill-right'></img>");
        var pillArrow = $jq("<img class='jqTabNavArrow " + arrowClass + "' src='/Global/Images/arrow-gray" + arrowSrc + ".png'></img>");

        //Chrome has incorrect width until window.load
        var width = parseInt(container.find('.x-btn-text').width()) + pillEdgeWidth * 2 + arrowWidth;
        var pillSrc = '';

        if (container.attr('rel') == 'home') {
            width = width - arrowWidth;
        }

        if (container.attr('rel') == TabsMasterHeaderMenu_Selection) {
            pillSrc = normalPillSrc;
            pill.css('display', 'block');
        } else {
            pillSrc = hoverPillSrc;
        }
        pillLeft.attr('src', '/Global/Images/pill-left' + pillSrc + '.png');
        pillMiddle.attr('src', '/Global/Images/pill-middle' + pillSrc + '.png');
        pillMiddle.css('left', pillEdgeWidth);
        pillMiddle.css('width', width - (pillEdgeWidth * 2));
        pillRight.attr('src', '/Global/Images/pill-right' + pillSrc + '.png');
        pillRight.css('left', width - pillEdgeWidth);
        pill.append(pillLeft);
        pill.append(pillMiddle);
        pill.append(pillRight);
        if (container.attr('rel') != 'home') {
            container.append(pillArrow);
        }

        container.prepend(pill);



        menuApps.css("left", $jq(divApps).position().left + "px"); //Align dropdown with left of pill
        menuApps.css("top", 41);
        menuGames.css("left", $jq(divGames).position().left + "px");
        menuGames.css("top", 41);
        menuEnterprise.css("left", $jq(divEnterprise).position().left + "px");
        menuEnterprise.css("top", 41);

    });


});