var VerticalMenu = Class.create({
    vers: '1.1',
    revisionDate: '2008-04-14',
    
    //Callback function
    onMenuItemClick: null,
    
    //Style
    style: {},
    
    //Settings
    settings: {
        blindDuration: 0.75
    },
    
    //Private
    menuItems: new Array(),
    wrapper: null,
    selectedMenuItem: null,
    selectedSubMenuItem: null,
    
    initialize: function(){
        
    },
    
    addMenuItem: function(){
        var newMenuItem = new _MenuItem();
        newMenuItem.parentMenu = this;
        newMenuItem.style = this.style;
        newMenuItem.id = this.menuItems.length;
        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 = '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
    id: null,
    imageNormal: null,
    imageRollover: null,
    imageSelected:null,
    imageOpened: null,
    bkgImageNormal: null,
    bkgImageSelected: null,
    bkgImageRollover: null,
    value:null,
    style:null,
    defaultSubMenuItem: null,
    
    //Vars
    isSelected: false,
    parentMenuItem: null,
    parentMenu:null,
    subMenuItems: null,
    subMenuOpened: false,
    selectedSubMenuItem: null,
    
    //Elements
    menuItemWrapper: null,
    menuItemImage:null,
    subMenuWrapper: null,
    
    initialize: function(){
        
    },
    
    addMenuItem: function(){
        var newMenuItem = new _MenuItem();
        newMenuItem.bkgImageNormal = this.bkgImageNormal;
        newMenuItem.bkgImageSelected = this.bkgImageSelected;
        newMenuItem.bkgImageRollover = this.bkgImageRollover;
        newMenuItem.style = this.style;
        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');
        
        //Menu Item
        this.menuItemWrapper = new Element('DIV');
        
        this.menuItemWrapper.setStyle(this.style);
        this.menuItemWrapper.setStyle({backgroundImage:'url(' + this.bkgImageNormal + ')'});
        
        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.subMenuWrapper.id = 'VMSubMenu' + this.id;
            
            this.subMenuItems.each(_getMenuItemElement.bind(this.subMenuWrapper));
            
            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.subMenuOpened)
            this.openSubMenu();
    },
    unselect: function(){
        this.isSelected = false;
        this.menuItemWrapper.setStyle({backgroundImage:'url(' + this.bkgImageNormal + ')'});
        this.menuItemImage.writeAttribute('src',this.imageNormal);
        
        if(this.subMenuItems && this.subMenuOpened)
            this.closeSubMenu();
    },
    openSubMenu:function(){
        if(this.imageOpened)
            this.menuItemImage.writeAttribute('src',this.imageOpened);
        this.subMenuOpened = true;
        
        Effect.BlindDown(this.subMenuWrapper.id,{duration: this.parentMenu.settings.blindDuration});
    },
    closeSubMenu:function(){
        this.menuItemImage.writeAttribute('src',this.imageNormal);
        this.subMenuOpened = false;
        
        if(this.selectedSubMenuItem){
            this.selectedSubMenuItem.unselect();
            this.selectedSubMenuItem = null;
        }
        
        Effect.BlindUp(this.subMenuWrapper.id,{duration: this.parentMenu.settings.blindDuration});
    },
    
    //Events
    _onClick: function(){
        this.select();
   
        if(this.subMenuItems && this.defaultSubMenuItem){
            this.defaultSubMenuItem._onClick();
        }else{
            this.parentMenu._selectionChange(this);
        }
        
        
    },
    _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();
}