var last_popped = null;
var popped_in_use = false;

var last_timeout = null;

function prepareLastPopped(evt) {

    last_popped.onmouseleave = removeLastPopped;

    popped_in_use = true;

}

function removeLastPopped(evt) {

    if (last_popped != null) {

        last_popped.parentNode.removeChild(last_popped);
        last_popped = null;

    }

}

function forcePoppedHiding(evt) {

    function cancelPopping() {

        last_timeout = null;

        if (!popped_in_use) {

            removeLastPopped(null);

        }

    }

    last_timeout = setTimeout(cancelPopping, 500);

}

function showMenu(target, inner) {

    function waitForEvent(evt) {

        if (last_timeout != null) {

            clearTimeout(last_timeout);
            last_timeout = null;

        }

        removeLastPopped(null);

        if (inner == null)
            return;

        var menubar = document.createElement('div');

        menubar.id = 'myMenu';
        menubar.className = 'menu_arrow_box'
        menubar.innerHTML = inner ;
        document.body.insertBefore(menubar, document.body.childNodes[0]);

        var rect = target.getBoundingClientRect();
        var menu_rect = menubar.getBoundingClientRect();

        menubar.style.left = (rect.left - (menu_rect.width - rect.width) / 2) + "px";
        menubar.style.top = (rect.bottom + 20) + "px";

        last_popped = menubar;
        popped_in_use = false;

        menubar.onmouseenter = prepareLastPopped;
        target.onmouseleave = forcePoppedHiding;

    }

    return waitForEvent;

}

function addMenuToID(id, inner) {

    var target = document.getElementById(id);

    target.onmouseenter = showMenu(target, inner);

}