var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
var arrowicon = 0;

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

    // close old layer
    if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    if (arrowicon) {
        arrowicon.style.background = "url('http://localhost:49301/IC/App_Themes/Default/images/darrow.gif') no-repeat top left";
        arrowicon.style.color = "#000";
    }

    // change arrow icon to uparrow
    changeicon(id);

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
    //ddmenuitem.style.left = 240 + document.getElementById(di).parentNode.offsetLeft;

}
// close showed layer
function mclose() {
    if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    if (arrowicon) {
        arrowicon.style.background = "url('http://localhost:49301/IC/App_Themes/Default/images/darrow.gif') no-repeat top left";
        arrowicon.style.color = "#000";
    }
}

// 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;

// change arrow icon
function changeicon(id) {
    var changeid;

    if (id == "submenu1") {
        changeid = "sm1"
    } else { changeid = "sm2" }

    //arrowicon = document.getElementById(changeid);
    //arrowicon.style.background = "url('http://localhost:49301/IC/App_Themes/Default/images/uparrow.gif') no-repeat top left";
    //arrowicon.style.color = "#ff9900";
    //arrowicon.style.cursor = "hand";
}