$(document).ready(function() {
    $("#hlProducten").mouseover(function() {
        showMenu(this,"producten_fo");
    });
    $("#hlOplossingen").mouseover(function() {
        showMenu(this,"oplossingen_fo");
    });
    $("#hlTechniek").mouseover(function() {
        showMenu(this,"techniek_fo");
    });
    $("#hlPartners").mouseover(function() {
        showMenu(this,"partners_fo");
    });
    $("#hlHelpdesk").mouseover(function() {
        showMenu(this,"helpdesk_fo");
    });
    $("#hlContact").mouseover(function() {
        showMenu(this,"contact_fo");
    });
    
    /* set clearing spaces */
    $("#logo").mouseover(function() { clearSelected(); });
    $("#oneLiner").mouseover(function() { clearSelected(); });
    $("#hlHome").mouseover(function() { clearSelected(); });
    $("#hlLogout").mouseover(function() { clearSelected(); });
    $("#mainContent").mouseover(function() { clearSelected(); });
});

function clearSelected() {
    $("#mainMenu").find("a.mainMenuHover").removeClass("mainMenuHover");
    $("div.mainMenuFlyout").hide();
}

function showMenu(el, sub) {
    //cleanup
    clearSelected();
    //add placeholder class
    $(el).addClass("mainMenuHover");
    //get the position of the placeholder element
    var pos = $(el).offset();  
    //show the menu on the placeholder position
    $("#"+sub).css( { "left":(pos.left-2) + "px", "top":(pos.top+30) + "px" } );
    $("#"+sub).show();
}