var VerticalMenu = Class.create({
    //Callback function
    onMenuItemClick: null,
    
    //Style
    menuItemPadding: '',
    background:'',
    width:'100%',
    
    //Private
    menuItems: new Array(),
    wrapper: null,
    selectedMenuItem: null,
    selectedSubMenuItem: null,
    
    initialize: function(){
        
    },
    
    addMenuItem: function(){
        var newMenuItem = new _MenuItem();
        newMenuItem.padding = this.menuItemPadding;
        newMenuItem.width = this.width;
        newMenuItem.parentMenu = this;
        this.menuItems[this.menuItems.length] = newMenuItem;
        
        return newMenuItem;
    },
    
    selectItem: function(menuItemId,subMenuItemId){
        var menuItem = this.menuItems[menuItemId];
        menuItem.select();
        
        if(typeof subMenuItemId == 'number'){
            var subMenuItem = this.menuItems[menuItemId].subMenuItems[subMenuItemId];
            subMenuItem.select();
            this._selectionChange(subMenuItem);
        }else{
            this._selectionChange(menuItem);
        }
    },
    
    display: function(container){
        var wrapperStyle = 'width:' + this.width + ';background:' + this.background;
        this.wrapper = new Element('DIV',{style:wrapperStyle});
        
        this.menuItems.each(_getMenuItemElement.bind(this.wrapper));
        
        container.update(this.wrapper);
    },
    
    //Private
    _selectionChange: function(menuItem){
        var newMenuItem = null;
        var newSubMenuItem = null;
        
        if(menuItem.parentMenuItem){
            newMenuItem = menuItem.parentMenuItem;
            newSubMenuItem = menuItem;
        }else{
            newMenuItem = menuItem;
        }
        
        if(this.selectedMenuItem == newMenuItem){
            if(this.selectedSubMenuItem != newSubMenuItem && this.selectedSubMenuItem)
                this.selectedSubMenuItem.unselect();
        }else{
            if(this.selectedMenuItem)
                this.selectedMenuItem.unselect();
            if(this.selectedSubMenuItem)
                this.selectedSubMenuItem.unselect();
        }
        
        if(this.selectedMenuItem != newMenuItem || this.selectedSubMenuItem != newSubMenuItem){
            if(this.onMenuItemClick)
                this.onMenuItemClick(menuItem.value);
        }
        
        this.selectedMenuItem = newMenuItem;
        this.selectedSubMenuItem = newSubMenuItem;
    }
});

var _MenuItem = Class.create({
    //Settings
    imageNormal: null,
    imageRollover: null,
    imageSelected:null,
    imageOpened: null,
    bkgImageNormal: null,
    bkgImageSelected: null,
    bkgImageRollover: null,
    value:null,
    
    //Vars
    isSelected: false,
    parentMenuItem: null,
    parentMenu:null,
    subMenuItems: null,
    subMenuOpened: false,
    selectedSubMenuItem: null,
    
    //Elements
    menuItemWrapper: null,
    menuItemImage:null,
    subMenuWrapper: null,
    
    //style
    padding: '',
    width: '100%',
    
    initialize: function(){
        
    },
    
    addMenuItem: function(){
        var newMenuItem = new _MenuItem();
        newMenuItem.padding = this.padding;
        newMenuItem.width = this.width;
        newMenuItem.bkgImageNormal = this.bkgImageNormal;
        newMenuItem.bkgImageSelected = this.bkgImageSelected;
        newMenuItem.bkgImageRollover = this.bkgImageRollover;
        newMenuItem.parentMenu = this.parentMenu;
        newMenuItem.parentMenuItem = this;
        if(!this.subMenuItems)
            this.subMenuItems = new Array();
        this.subMenuItems[this.subMenuItems.length] = newMenuItem;
        
        return newMenuItem;
    },
    buildElement: function(){
        var mainWrapper = new Element('DIV',{style:'width:' + this.width});
        
        //Menu Item
        var menuItemStyle = 'background: url(' + this.bkgImageNormal + ') no-repeat 1px 0; padding:' + this.padding;
        this.menuItemWrapper = new Element('DIV',{style:menuItemStyle});
        
        this.menuItemImage = new Element('IMG',{src:this.imageNormal, style: 'cursor:pointer'});
        Event.observe(this.menuItemImage,'click',_menuItemClick.bindAsEventListener(this));
        Event.observe(this.menuItemImage,'mouseover',_menuItemMouseOver.bindAsEventListener(this));
        Event.observe(this.menuItemImage,'mouseout',_menuItemMouseOut.bindAsEventListener(this));
        
        this.menuItemWrapper.update(this.menuItemImage);
        mainWrapper.appendChild(this.menuItemWrapper);
        
        //Sub menu
        if(this.subMenuItems){
            this.subMenuWrapper = new Element('DIV');
            
            this.subMenuItems.each(_getMenuItemElement.bind(this.subMenuWrapper));
            /*for(var i = 0;i < this.subMenuItems.length;i++){
                this.subMenuWrapper.appendChild(this.subMenuItems[i].buildElement());
            }*/
            
            mainWrapper.appendChild(this.subMenuWrapper);
            this.subMenuWrapper.hide();
        }
        
        //mainWrapper
        return mainWrapper;
    },
    select: function(){
        this.isSelected = true;
        if(this.bkgImageSelected)
            this.menuItemWrapper.setStyle({backgroundImage:'url(' + this.bkgImageSelected + ')'});
            
        if(this.imageSelected)
            this.menuItemImage.writeAttribute('src',this.imageSelected);
            
        if(this.subMenuItems)
            this.openSubMenu();
    },
    unselect: function(){
        this.isSelected = false;
        this.menuItemWrapper.setStyle({backgroundImage:'url(' + this.bkgImageNormal + ')'});
        this.menuItemImage.writeAttribute('src',this.imageNormal);
        
        if(this.subMenuItems)
            this.closeSubMenu();
    },
    openSubMenu:function(){
        this.subMenuWrapper.show();
        if(this.imageOpened)
            this.menuItemImage.writeAttribute('src',this.imageOpened);
        this.subMenuOpened = true;
    },
    closeSubMenu:function(){
        this.subMenuWrapper.hide();
        this.menuItemImage.writeAttribute('src',this.imageNormal);
        this.subMenuOpened = false;
        
        if(this.selectedSubMenuItem){
            this.selectedSubMenuItem.unselect();
            this.selectedSubMenuItem = null;
        }
    },
    
    //Events
    _onClick: function(){
        this.parentMenu._selectionChange(this);
        
        this.select();
        
    },
    _onRollOver: function(){
        if(this.isSelected)
            return;
            
        if(this.imageRollover)
            this.menuItemImage.writeAttribute('src',this.imageRollover);
        
        if(this.bkgImageRollover)
            this.menuItemWrapper.setStyle({backgroundImage:'url(' + this.bkgImageRollover + ')'});
        
    },
    
    _onRollOut: function(){
        if(this.isSelected)
            return;
            
        this.menuItemImage.writeAttribute('src',this.imageNormal);
        this.menuItemWrapper.setStyle({backgroundImage:'url(' + this.bkgImageNormal + ')'});
    }
    
    //Private
    
});

function _getMenuItemElement(menuItem){
    this.appendChild(menuItem.buildElement());
}

function _menuItemMouseOver(e){
    this._onRollOver();
}
function _menuItemMouseOut(e){
    this._onRollOut();
}
function _menuItemClick(e){
    this._onClick();
}