var timeout = 0;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id) {
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

    if (id == 'm4') {

        document.getElementById("aDebt").className = "btnDebtSelected";
        document.getElementById("aMoney").className = "btnMoney";
        document.getElementById("aInsurance").className = "btnInsurance";
        document.getElementById("aUtilities").className = "btnUtilities";
    }
    
    if (id == 'm3') {

        document.getElementById("aDebt").className = "btnDebt";
        document.getElementById("aMoney").className = "btnMoney";
        document.getElementById("aInsurance").className = "btnInsuranceSelected";
        document.getElementById("aUtilities").className = "btnUtilities";
    }

    if (id == 'm2') {

        document.getElementById("aDebt").className = "btnDebt";
        document.getElementById("aMoney").className = "btnMoneySelected";
        document.getElementById("aInsurance").className = "btnInsurance";
        document.getElementById("aUtilities").className = "btnUtilities";
    }

    if (id == 'm1') {

        document.getElementById("aDebt").className = "btnDebt";
        document.getElementById("aMoney").className = "btnMoney";
        document.getElementById("aInsurance").className = "btnInsurance";
        document.getElementById("aUtilities").className = "btnUtilitiesSelected";
    }

}
// close showed layer
function mclose() {
    if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    if (document.getElementById("aDebt").className == "btnDebt") {

        // document.getElementById("aDebt").className = "btnDebt";

        document.getElementById("aMoney").className = "btnMoney";
        document.getElementById("aInsurance").className = "btnInsurance";
        document.getElementById("aUtilities").className = "btnUtilities";
    }

    if (document.getElementById("aMoney").className == "btnMoney") {

        document.getElementById("aDebt").className = "btnDebt";
        //document.getElementById("aMoney").className = "btnMoney";
        document.getElementById("aInsurance").className = "btnInsurance";
        document.getElementById("aUtilities").className = "btnUtilities";
    }

    if (document.getElementById("aInsurance").className == "btnInsurance") {

        document.getElementById("aDebt").className = "btnDebt";
        document.getElementById("aMoney").className = "btnMoney";
        //document.getElementById("aInsurance").className = "btnInsurance";
        document.getElementById("aUtilities").className = "btnUtilities";
    }

    if (document.getElementById("aUtilities").className == "btnUtilities") {

        document.getElementById("aDebt").className = "btnDebt";
        document.getElementById("aMoney").className = "btnMoney";
        document.getElementById("aInsurance").className = "btnInsurance";
        //document.getElementById("aUtilities").className = "btnUtilities";
    }
    

}

// go close timer
function mclosetime() {
    closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime() {
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

// close layer when click-out
document.onclick = mclose;