function loadPage(id) {
    var content = $(".content");

    if($("#" + id).length == 0) { return; }
    if(content.data("loaded") == id) { return; }

    content
        .data("loaded", "")
        .clearQueue()
        .animate({ 
            opacity:  0 
        }, {
            complete: function(){
                $.ajax({
                    url:     "/page-" + id + ".html",
                    success: function(data){
                        $("<div></div>")
                            .height(content.height())
                            .html(data)
                            .appendTo(
                                content
                                    .empty()
                                    .animate({ opacity: 1 })
                                    .data("loaded", id)
                            )
                            .jScrollPane({
                                scrollbarWidth: 12,
                                scrollbarMargin: 10
                            });
                    }
                });
            }
        });
}

function updateSubmenu(menuItem) {
    var content = $(".content"),
        cBottom = content.position().top + content.height(),
        hHeader = $(".header"),
        hHeight = hHeader.height(),
        hBottom = hHeader.position().top + hHeight - 15,
        sHeader = $(".subheader"),
        sHeight = sHeader.height();

    sHeader
        .clearQueue()
        .animate({ top: hBottom - sHeight }, {
            complete: function(){
                var div = $("<div class='subheader-menu'></div>").appendTo(sHeader.empty()),
                    offset = 0,
                    hasItems = false;

                $(".submenu > li", menuItem).each(function(){
                    if(hasItems) {
                        div.append("<span class='helper helper-separator'></span>");
                    }

                    div.append($("<span></span>").append($(this).html()));

                    hasItems = true;
                });

                if(!hasItems) {
                    content.css({
                        top:    hHeight, 
                        height: cBottom - hHeight
                    });
                } else {
                    sHeader
                        .clearQueue()
                        .animate({ top: hBottom });

                    content.css({
                        top:    hBottom + sHeight,
                        height: cBottom - (hBottom + sHeight)
                    });
                }

                $(".submenu-item-content")
                    .bind("click", function(){
                        var menuItem = $(this);

                        if(menuItem.hasClass("submenu-selected")) { return; }

                        clearSubmenuSelected();
                        loadPage(menuItem.attr("id"));

                        menuItem.addClass("submenu-selected submenu-item-active");
                    })
                    .bind("mouseover", function(){
                        var menuItem = $(this);

                        menuItem.addClass("submenu-item-active");
                    })
                    .bind("mouseout", function(){
                        var menuItem = $(this);

                        if(!menuItem.is(".submenu-selected")) {
                            menuItem.removeClass("submenu-item-active");
                        }
                    });
            }
        });

    clearSubmenuSelected();
}

function clearSubmenuSelected() {
    $(".submenu-selected")
        .removeClass("submenu-selected submenu-item-active");
}

function clearMenuSelected() {
    var opacity = $(".overlay").css("opacity");

    $(".menu-item-back")
        .clearQueue()
        .animate({ opacity: opacity / 2 })

    $(".menu-selected").removeClass("menu-selected");
}

$(document).ready(function(){
    var opacity = $(".overlay").css("opacity");

    $(".header-content") 
        .bind("click", function(){
            var menuItem = $(this);

            if(menuItem.hasClass("menu-selected")) { return; }

            clearMenuSelected();
            loadPage(menuItem.attr("id"));
            updateSubmenu(menuItem);

            menuItem.addClass("menu-selected");
        });

    $(".menu-item")
        .append("<div class='menu-item-content'></div>");

    $(".menu-item:not(.menu-item-noback)")
        .append($("<div class='menu-item-back'></div>").css({opacity: opacity / 2}));

    $(".menu-item-content")
        .bind("click", function(){
            var menuItem = $(this).parent(),
                menuBack = $(".menu-item-back", menuItem);

            if(!menuBack.hasClass("menu-selected")) { 
                clearMenuSelected();
                menuBack
                    .clearQueue()
                    .animate({ opacity: opacity })
                    .addClass("menu-selected");

                updateSubmenu(menuItem);
            } else {
                clearSubmenuSelected();
            }

            if($(".submenu-item-selected", menuItem).length == 1) {
                loadPage($(".submenu-item-selected")
                    .addClass("submenu-selected submenu-item-active")
                    .attr("id")
                );
            } else {
                loadPage(menuItem.attr("id"));
            }
        })
        .bind("mouseover", function(){ 
            var menuItem = $(this).parent();

            $(".menu-item-back", menuItem)
                .clearQueue()
                .animate({ opacity: opacity })
        })
        .bind("mouseout", function(){ 
            var menuItem = $(this).parent();

            if(!$(".menu-item-back", menuItem).hasClass("menu-selected")) {
                $(".menu-item-back", menuItem)
                    .clearQueue()
                    .animate({ opacity: opacity / 2 })
            }
        });

    loadPage($(".menu-item-selected:first")
        .find(".menu-item-back")
            .clearQueue()
            .animate({ opacity: opacity })
            .addClass("menu-selected")
        .end()
        .attr("id")
    );
});