﻿var MenuItem = Class.create({
    initialize: function(id, menu, parentMenuItem) {
        this._id = id;
        this._menu = menu;
        this._parentMenuItem = parentMenuItem;

        this._content = $$('#' + id + ' > .menuContent')[0];
        this._slider = $$('#' + id + ' > .menuSlider')[0];

        this._children = [];


        var topLevelItem = $$('#' + id + ' > .menuSlider' + ' > ul' + ' > li' + ' > .menuContent');
        if (topLevelItem.length > 0) {
            for (var i = 0; i < topLevelItem.length; i++) {
                this._children[this._children.length] = new MenuItem(topLevelItem[i].parentNode.id, menu, this);
                //topLevelItem[i].parentNode.parentNode.setStyle({ left: '223px', opacity: 1.0 });
            }
        }

        Event.observe(this._content, 'mouseover', this.hover.bind(this));
        Event.observe(this._content, 'mouseout', this.unhover.bind(this));
        //Event.observe(this._content, 'mouseover', this.expand.bind(this));
    },
    isHavingChildren: function() {
        return (this._children.length > 0);
    },
    isHovered: function() {
        return $(this._id).hasClassName(this._menu.getDisabledItemCssClass());
    },
    isDisabled: function() {
        return $(this._id).hasClassName(this._menu.getDisabledItemCssClass());
    },
    hover: function() {
        $(this._id).addClassName(this._menu.getHoveredItemCssClass());
        this._content.fire('menuItem:hovered');
        //this.expand();
    },
    unhover: function() {
        $(this._id).removeClassName(this._menu.getHoveredItemCssClass());
        this._content.fire('menuItem:unhovered');
        //this.collapse();
    },
    onUnhover: function() { },
    expand: function() {
        if (this.isHavingChildren() /*&& !this._menu.getIsInAnimation()*/) {
            //this._menu.setIsInAnimation(true);
            var animation = new Effect.Opacity(this._slider, {
                from: 0.0,
                to: 1.0,
                duration: this._menu.getExpandAnimationDuration(),
                mode: 'absolute',
                transition: this._menu.getExpandAnimationType(),
                afterFinish: function() {
                    //this._menu.setIsInAnimation(false);
                    //this._menu.setIsExpanded(true);
                    this._slider.setStyle({ opacity: 1.0 });
                } .bind(this)
            });
        }
    },
    collapse: function() {
        if (this.isHavingChildren() /*&& !this._menu.getIsInAnimation()*/) {
            //this._menu.setIsInAnimation(true);
            var animation = new Effect.Opacity(this._slider, {
                from: 1.0,
                to: 0.0,
                duration: this._menu.getCollapseAnimationDuration(),
                mode: 'absolute',
                transition: this._menu.getCollapseAnimationType(),
                afterFinish: function() {
                //this._menu.setIsInAnimation(false);
                //this._menu.setIsExpanded(false);
                    this._slider.setStyle({ opacity: 0.0 });
                } .bind(this)
            });
        }
    },
    getMenuItemContent: function() {
        return this._content;
    }
});