var timeVisible = 1000;
var timerRunning = false;
var resetTimer;
var mover = false;
var clicked = false;
var menu_selector = null;

$(document).ready(function () {
    menu_selector = $(".menu .menu_selector");
    resetSelector(true);
    $(".menu ul:first li a").hover(function () {
        clearTimeout(resetTimer);
        timerRunning = false;
        var ems = $(this).parent().padding()["left"];
        var pos = $(this).position().left - $(".menu").position().left + $(this).width() / 2 - ems;
        menu_selector.stop().animate({ backgroundPosition: pos + "px", opacity: 1 }, 250, 'easeInOutSine');
        var submenuID = "sub" + $(this).parent().attr("id");
        showSubmenu(submenuID);
    });

    $(".menu ul:first li a").mouseout(function () {
        resetTimer = setTimeout(resetSelector, timeVisible, false);
        timerRunning = true;
    });

    $(".menu ul:first li a").click(function () {
        clicked = true;
    });
});


function resetSelector(forceReset) {
    if ((!clicked && timerRunning) || (forceReset != null && forceReset)) {
        var selectedMenuItem = $(".menu ul:first .selected");
        if (selectedMenuItem.length > 0) {
            var posOld = selectedMenuItem.position().left - $(".menu").position().left + selectedMenuItem.width() / 2;
            menu_selector.stop().animate({ backgroundPosition: posOld + "px", opacity: 1 }, 500, 'easeInOutSine');
            var submenuID = "sub" + selectedMenuItem.attr("id");
            showSubmenu(submenuID);
        }
        else {
            selectedMenuItem = $(".menu ul:first li:first");
            var posOld = selectedMenuItem.position().left - $(".menu").position().left + selectedMenuItem.width() / 2;
            menu_selector.stop().animate({ backgroundPosition: posOld + "px", opacity: 1 }, 500, 'easeInOutSine');
            var submenuID = "sub" + selectedMenuItem.attr("id");
            showSubmenu(submenuID);
        }
    }
}

function showSubmenu(submenuID) {
    $(".submenu").hide();
    if ($("#" + submenuID)) {
        $("#" + submenuID).show();
        activateSubmenu(submenuID);
    }
}

function activateSubmenu(submenuID) {
    if ($("#" + submenuID).length == 0)
        return;

    var submenu_selector = $("#" + submenuID + " .submenu_selector");
    var selectedSubMenuItem = $("#" + submenuID + " ul:first .selected");
    if (selectedSubMenuItem.length == 0) {
        var ems = $("#" + submenuID + " ul li a:first").parent().parent().parent().margin()["left"] + $("#" + submenuID + " ul li a:first").parent().padding()["left"];
        var posInit = $("#" + submenuID + " ul li a:first").position().left - $("#" + submenuID).position().left + $("#" + submenuID + " ul li a:first").width() / 2 - ems;
        submenu_selector.stop().animate({ backgroundPosition: posInit + "px", opacity: 1 }, 250, 'easeInOutSine');
    }
    else {
        var ems = selectedSubMenuItem.children("a:first").parent().parent().parent().margin()["left"] + selectedSubMenuItem.children("a:first").parent().padding()["left"];
        var posInit = selectedSubMenuItem.children("a:first").position().left - $("#" + submenuID).position().left + selectedSubMenuItem.children("a:first").width() / 2 - ems;
        submenu_selector.stop().animate({ backgroundPosition: posInit + "px", opacity: 1 }, 250, 'easeInOutSine');
    }

    $("#" + submenuID + " ul:first li a").hover(function () {
        clearTimeout(resetTimer);
        timerRunning = false;
        var ems = $(this).parent().parent().parent().margin()["left"] + $(this).parent().padding()["left"];
        var pos = $(this).position().left - $("#" + submenuID).position().left + $(this).width() / 2 - ems;
        submenu_selector.stop().animate({ backgroundPosition: pos + "px", opacity: 1 }, 250, 'easeInOutSine');
    });
    $("#" + submenuID + " ul:first li a").mouseout(function () {
        resetTimer = setTimeout(resetSelector, timeVisible, false);
        timerRunning = true;
    });
    $("#" + submenuID + " ul:first li a").click(function () {
        clicked = true;
    });
}
function activateMenu(menuID, submenuID) {
    if ($("#menu_" + menuID).length == 0)
        return;
    $("#menu_" + menuID).addClass("selected");
    showSubmenu("submenu_" + menuID);
    if (submenuID != null) {
        activateSubMenu(menuID + "_" + submenuID);
    }
    resetSelector(true);
}

function activateSubMenu(submenuID) {
    if ($("#submenu_" + submenuID).length == 0)
        return;
    $("#submenu_" + submenuID).addClass("selected");
}