var Dropdown = function (dropdownIdList) {
    this.timeoutId = null;
    this.dropdownIdList = dropdownIdList;
    this._initMenus();
};


Dropdown.prototype.show = function (dropdownId) {
    this._hideAll();
    if (this.timeoutId) {
        clearTimeout(this.timeoutId);
    }
    document.getElementById(dropdownId).style.display = 'block';    
};


Dropdown.prototype.hide = function (dropdownId) {
    this.timeoutId = setTimeout(
        function () {
            document.getElementById(dropdownId).style.display = 'none';
        },
        500
    );
};


Dropdown.prototype._hideAll = function () {
    var dropdownId;
    for (var i=0; i < this.dropdownIdList.length; i++) {
        dropdownId = this.dropdownIdList[i];
        document.getElementById(dropdownId).style.display = 'none';
    }
};


Dropdown.prototype._initMenus = function () {
    var dropdownId;
    for (var i=0; i < this.dropdownIdList.length; i++) {
        dropdownId = this.dropdownIdList[i];
        var menu = document.getElementById(dropdownId);
        menu.onmouseover = this._createMouseover(dropdownId);
        menu.onmouseout = this._createMouseout(dropdownId);
    }
};



Dropdown.prototype._createMouseover = function (dropdownId) {
    var thisDropdown = this;
    return function () {
        thisDropdown.show(dropdownId);
    }
}

Dropdown.prototype._createMouseout = function (dropdownId) {
    var thisDropdown = this;
    return function () {
        thisDropdown.hide(dropdownId);
    }
}