var Menu = Class.create({
	initialize:function(options){
		this.options={
			menuContainer:'menu-container',
			subMenuStep:5,
			subMenuDelay:100,
			duration:0.4,
			menuIndex:0,
			submenuIndex:"none"
		};
		Object.extend(this.options, options || { });	
		this.initVar();
		this.initFirstActiveItem();
		this.initListener();
		
	},
	
	initVar:function(){
		this.menuContainer = $(this.options.menuContainer);
		this.arrMenuItem = this.menuContainer.select(".menu-item");
		this.arrSubMenuItem = this.menuContainer.select(".sub-menu-item");
		this.rolledMenu = null;
		this.lastSubMenuItem=false;
	},
	
	initListener:function(){
		//init menu actions
		this.menuOverListener = this.menuOver.bindAsEventListener(this);
		this.menuOutListener = this.menuOut.bindAsEventListener(this);
		
		for(i=0;i<this.arrMenuItem.length;i++){
			this.arrMenuItem[i].observe('mouseover',this.menuOverListener);
			this.arrMenuItem[i].observe('mouseout',this.menuOutListener);
		}
		
		//init submenu actions
		this.subMenuOverListener = this.subMenuOver.bindAsEventListener(this);
		this.subMenuOutListener = this.subMenuOut.bindAsEventListener(this);
		
		for(i=0;i<this.arrSubMenuItem.length;i++){
			this.arrSubMenuItem[i].observe('mouseover',this.subMenuOverListener);
			this.arrSubMenuItem[i].observe('mouseout',this.subMenuOutListener);
		}		
	},
	
	
	// LISTENERS *****************************
	
	menuOver:function(event){
		if(this.options.menuIndex!="none")this.deactivate(this.firstActiveItem);
		var _item = Event.findElement(event);
		var _itemID = _item.id;
		var subMenu=$("sub_"+_itemID);
		
		if(this.rolledContainer!=null&&_item!=this.rolledMenu&&subMenu)this.rollUpMenu();

		if(subMenu)this.rollDownMenu(subMenu,_item);
		
		this.activate(_item);
	},
	
	menuOut:function(event){
		if(this.options.menuIndex!="none")this.activate(this.firstActiveItem);
		var _item = Event.findElement(event);
		this.deactivate(_item);
	},
	
	subMenuOver:function(event){
		// keep main menu state
		this.deactivate(this.firstActiveItem);
		this.activate(this.rolledMenu);
		var _item = Event.findElement(event);
		if(this.lastSubMenuItem)this.deactivateSub(this.firstActiveSubItem);
		
		
		this.activateSub(_item);
		
	},
	
	subMenuOut:function(event){
		// keep main menu state
		this.activate(this.firstActiveItem);
		if(this.firstActiveSubItem)this.activateSub(this.firstActiveSubItem)
		this.deactivate(this.rolledMenu);
		
		var _item = Event.findElement(event);
		this.deactivateSub(_item);
	},
	
	
	// ACITONS *****************************
	
	initFirstActiveItem:function(){
		if(this.options.menuIndex=="none")return;
		this.firstActiveItem=this.arrMenuItem[this.options.menuIndex];
		this.activate(this.firstActiveItem);
		if(this.options.submenuIndex!="none"){
			this.firstActiveSubItem=this.arrSubMenuItem[this.options.submenuIndex]
			this.activateSub(this.firstActiveSubItem);
			var _itemID = this.firstActiveItem.id;
			var subMenu=$("sub_"+_itemID);
			this.rollDownMenu(subMenu,this.firstActiveItem,0);
		}
	},
	
	activate:function(_item){
		var src = _item.src;
		src = src.replace("menu/","menu/over/");
		_item.src=src;	
	},
	
	deactivate:function(_item){
		var src = _item.src;
		src = src.replace("menu/over/","menu/");
		_item.src=src;	
	},
	
	activateSub:function(_item){
		this.lastSubMenuItem=_item;
		var src = _item.src;
		var tab = src.split("/");
		var name = tab[tab.length-1];
		src = src.replace(name,"over/"+name);
		_item.src=src;	
	},
	
	deactivateSub:function(_item){
		if(!_item)return;
		var src = _item.src;
		src = src.replace("over/","");
		_item.src=src;	
	},	
	
	rollUpMenu:function(){
		var _item = this.rolledContainer;
		this.rolledContainer= null;
		_item.morph('height:0px',{
			transition:"linear"	,
			duration:this.options.duration
		});
	},
	
	rollDownMenu:function(_item,menuItem,duration){
		var dur = duration!=undefined?duration:this.options.duration
		var container = _item.down();
		var height = container.getHeight();
		this.rolledMenu = menuItem;
		this.rolledContainer = _item;
		if(duration==0){
			_item.setStyle({'height':height+"px"});
		}else{
			_item.morph('height:'+height+"px",{
				transition:"linear"	,
				duration:dur
			});
		}
	}
	
});