Menu = function() {
}

Menu.prototype.init = function(idContainerElement, onStartExpand, onStartCollapse) {
    this.menuContainerElement = DOM.get(idContainerElement);
    this.onStartExpand = onStartExpand;
    this.onStartCollapse = onStartCollapse;
    this.menuOptions = [];
    this.getMenuOptions();
    this.addOptionsEventListeners();
    this.animas = [];
    this.mousemoveCallBack = DOM.createEventHandler(this, 'onMouseMove');
    
}

Menu.prototype.getMenuOptions = function() {
    var firstLevel = DOM.getElementsByClassName(this.menuContainerElement, 'menuOption');
    for (var i = 0; i < firstLevel.length; ++i) {
        optionsContainer = this.getOptionsContainerElement(firstLevel[i]);
        this.menuOptions.push({
            container: firstLevel[i],
            title: this.getTitleMenu(firstLevel[i]),
            menus: this.getSubMenuOptions(firstLevel[i]),
            optionsContainer: optionsContainer,
            optionsContainerHeight: optionsContainer.offsetHeight
        });
            }
}

Menu.prototype.getOptionsContainerElement = function(menu) {
    return DOM.getElementsByClassName(menu, 'subOptions')[0];
}

Menu.prototype.getTitleMenu = function(menu) {
    return DOM.getElementsByClassName(menu, 'title')[0];
}

Menu.prototype.getSubMenuOptions = function(menu) {
    var options = DOM.getElementsByClassName(menu, 'option');
    return options;
}

Menu.prototype.addOptionsEventListeners = function() {
    for (var i = 0; i < this.menuOptions.length; ++i) {
        for (var j = 0; j < this.menuOptions[i].menus.length; ++j) {
            DOM.addEventListener(this.menuOptions[i].menus[j], 'mouseover', DOM.createEventHandler(this, 'onOptionMouseOver', [ i, j ]))
            DOM.addEventListener(this.menuOptions[i].menus[j], 'mouseout', DOM.createEventHandler(this, 'onOptionMouseOut', [ i, j ]))
        }
    }
}

Menu.prototype.onOptionMouseOver = function(event, parameters) {
    this.menuOptions[parameters[0]].menus[parameters[1]].style.color = '#f15f7c';
    this.menuOptions[parameters[0]].menus[parameters[1]].parentNode.style.backgroundColor = '#f0f0f0';
}

Menu.prototype.onOptionMouseOut = function(event, parameters) {
    this.menuOptions[parameters[0]].menus[parameters[1]].style.color = '#00235D';
    this.menuOptions[parameters[0]].menus[parameters[1]].parentNode.style.backgroundColor = '#F7F7F7';
}

Menu.prototype.onMouseMove = function(event) {
    if (DOM.mouseIsInside(this.menuContainerElement, event)) {
        if (!this.opened) {
            this.openMenu();
        }
    } else {
        if (this.opened) {
            this.closeMenu();
        }
    }
}

Menu.prototype.openMenu = function() {
    this.opened = true;
    for (var i = 0; i < this.menuOptions.length; ++i) {
        if (this.animas[i]) { this.animas[i].cancel(); };
        var element = this.menuOptions[i].optionsContainer;
        var endHeight = this.menuOptions[i].optionsContainerHeight;
        this.animas[i] = EFF.slideDown(element, {
            totalTime: ,
            endHeight: endHeight,
            timeStep: ,
            startHeight: element.offsetHeight
        });
    }
    if (this.onStartExpand) {
        this.onStartExpand();
    }
}

Menu.prototype.closeMenu = function() {
    this.opened = false;
    for (var i = 0; i < this.menuOptions.length; ++i) {
        if (this.animas[i]) { this.animas[i].cancel(); };
        var element = this.menuOptions[i].optionsContainer;
        this.animas[i] = EFF.slideUp(element, {
            totalTime: ,
            endHeight: 0,
            timeStep: ,
            startHeight: element.offsetHeight
        });
    }
    if (this.onStartCollapse) {
        this.onStartCollapse();
    }
}

function isChild(parent, child) {
    while (child.parentNode && child.parentNode != parent) {
        child = child.parentNode;
    }
    return child.parentNode == parent;
}