var timeout     = 500;
var closetimer  = 0;
var opentimer   = 0;
var ddmenuitem  = 0;
var ddhoveritem = null;

// open hidden layer
function mopen(id, el) {

    // cancel close timer
    mcancelclosetime();
    mcancelopentime();

    opentimer = window.setTimeout(function() { mopentime(id, el); } , 300);
}

function mopentime(id, el) {

    var tmpClass = el.className;

    var classNameStyle = 'header_menu_a_hover';

    if(tmpClass.indexOf(classNameStyle) == -1) {
        el.className = el.className + ' ' + classNameStyle;
    }

    // close old layer
    if(ddmenuitem) {
        if(id != ddmenuitem.id) {
            if(ddhoveritem.className.indexOf(classNameStyle) != -1) {
                ddhoveritem.className = ddhoveritem.className.replace(' ' + classNameStyle, '');
            }
        }
        ddmenuitem.style.visibility = 'hidden';
    }

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

// close showed layer
function mclose() {

    var classNameStyle = 'header_menu_a_hover';

    if(ddmenuitem) {

        if(ddhoveritem.className.indexOf(classNameStyle) != -1) {

            var splitClassName = ddhoveritem.className.split(' ');

            if(splitClassName.length > 0) {
                ddhoveritem.className = ddhoveritem.className.replace(' ' + splitClassName[splitClassName.length-1], '');
            }
        }

        ddmenuitem.style.visibility = 'hidden';
    }
}

// go close timer
function mclosetime() {

    mcancelopentime();

    closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime() {

    if(closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

function mcancelopentime() {

    if(opentimer) {
        window.clearTimeout(opentimer);
        opentimer = null;
    }

}

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