$(document).ready(function() {
    $(".maparea").mouseenter(function() {
        var elementID = $(this)[0].id;
        if (elementID == "mitigationmenu") {
            $("#mitigation").css({ 'opacity': '0', 'display': 'block' }).stop().animate({ 'opacity': '1' });
            $("#preparedness").css({ 'opacity': '1', 'display': 'none' });
            $("#response").css({ 'opacity': '1', 'display': 'none' });
            $("#recovery").css({ 'opacity': '1', 'display': 'none' });
        }
        else if (elementID == "preparednessmenu") {
            $("#preparedness").css({ 'opacity': '0', 'display': 'block' }).stop().animate({ 'opacity': '1' });
            $("#mitigation").css({ 'opacity': '1', 'display': 'none' });
            $("#response").css({ 'opacity': '1', 'display': 'none' });
            $("#recovery").css({ 'opacity': '1', 'display': 'none' });
        }
        else if (elementID == "responsemenu") {
            $("#response").css({ 'opacity': '0', 'display': 'block' }).stop().animate({ 'opacity': '1' });
            $("#mitigation").css({ 'opacity': '1', 'display': 'none' });
            $("#preparedness").css({ 'opacity': '1', 'display': 'none' });
            $("#recovery").css({ 'opacity': '1', 'display': 'none' });
        }
        else if (elementID == "recoverymenu") {
            $("#recovery").css({ 'opacity': '0', 'display': 'block' }).stop().animate({ 'opacity': '1' });
            $("#mitigation").css({ 'opacity': '1', 'display': 'none' });
            $("#preparedness").css({ 'opacity': '1', 'display': 'none' });
            $("#response").css({ 'opacity': '1', 'display': 'none' });
        }
    });

    $(".maparea").mouseleave(function(e) {
        var elementID = $(this)[0].id;
        if (elementID == "mitigationmenu") {
            $("#mitigation").stop().animate({ opacity: 1.0 }, 400, function() {
                if (!($("#mitigation").hasClass("Active"))) {
                    $("#mitigation").fadeOut();
                }
            });
        }
        else if (elementID == "preparednessmenu") {
            $("#preparedness").stop().animate({ opacity: 1.0 }, 400, function() {
                if (!($("#preparedness").hasClass("Active"))) {
                    $("#preparedness").fadeOut();
                }
            });
        }
        else if (elementID == "responsemenu") {
            $("#response").stop().animate({ opacity: 1.0 }, 400, function() {
                if (!($("#response").hasClass("Active"))) {
                    $("#response").fadeOut();
                }
            });
        }
        else if (elementID == "recoverymenu") {
            $("#recovery").stop().animate({ opacity: 1.0 }, 400, function() {
                if (!($("#recovery").hasClass("Active"))) {
                    $("#recovery").fadeOut();
                }
            });
        }
    });

    $("#mitigation").hover(function() { $("#mitigation").addClass("Active"); }, function() { $("#mitigation").removeClass("Active").fadeOut(); });
    $("#preparedness").hover(function() { $("#preparedness").addClass("Active"); }, function() { $("#preparedness").removeClass("Active").fadeOut(); });
    $("#response").hover(function() { $("#response").addClass("Active"); }, function() { $("#response").removeClass("Active").fadeOut(); });
    $("#recovery").hover(function() { $("#recovery").addClass("Active"); }, function() { $("#recovery").removeClass("Active").fadeOut(); });
});