var productsTimeout;
var productsMenu;
var howToMenuTimeout;
var howToMenu;
var serviceMenuTimeout;
var serviceMenu;
var productsSubMenuTimeout;

$(
    function() {
        $("#products-menu-interior span").mouseover(function() { $(this).addClass('menu-item-hover'); });
        $("#products-menu-interior span").mouseout(function() { $(this).removeClass('menu-item-hover'); });
        $(".sub-menu div").mouseover(function() { $(this).addClass('menu-item-hover'); });
        $(".sub-menu div").mouseout(function() { $(this).removeClass('menu-item-hover'); });
        
        productsMenu = $('#products-menu');
        howToMenu = $('#how-to-sub-menu');
        serviceMenu = $('#service-sub-menu');

        var leftContent = $('#interior-left-content');
        var rightContent = $('#interior-right');

        if (leftContent.height() < rightContent.height())
            leftContent.height(rightContent.height() - 12);
    }
);

function ShowProductsMenu() {
    productsMenu.show();
    clearTimeout(productsTimeout);
    howToMenu.hide();
    clearTimeout(howToMenuTimeout);
    serviceMenu.hide();
    clearTimeout(serviceMenuTimeout);
}

function HideProductsMenu() {
    if($('.products-section').length == 0)    
        productsTimeout = setTimeout("productsMenu.hide();", 500);
}

function ShowHowToMenu() {
    if ($('.products-section').length == 0)
        productsMenu.hide();
    clearTimeout(productsTimeout);
    howToMenu.show();
    clearTimeout(howToMenuTimeout);
    serviceMenu.hide();
    clearTimeout(serviceMenuTimeout);
}

function HideHowToMenu() {
    howToMenuTimeout = setTimeout("howToMenu.hide();", 500);
}

function ShowServiceMenu() {
    if ($('.products-section').length == 0)
        productsMenu.hide();
    clearTimeout(productsTimeout);
    howToMenu.hide();
    clearTimeout(howToMenuTimeout);
    serviceMenu.show();
    clearTimeout(serviceMenuTimeout);
}

function HideServiceMenu() {
    howToMenuTimeout = setTimeout("serviceMenu.hide();", 500);
}

function ShowProductsSubMenu(elementId) {
    var element = $('#' + elementId);
    clearTimeout(productsSubMenuTimeout);
    $('#products-menu .sub-menu').hide();
    $(element).show();
}

function HideProductsSubMenu(elementId) {
    var element = $('#' + elementId);
    productsSubMenuTimeout = setTimeout(function() { $(element).hide(); }, 500);
}