var Menu = Class.create(
{
	initialize:function(ele,options){
		this.ele = $(ele);
		this.menu_clicked = false;
		this.submenu = $$('.div_title_content').first();
		
		var thisObj = this;
		
		//define menu btn
		//this.menus = $$('.div_menu_main_btn');
		this.menus = $$('.div_menu_main').first().select('dd');
		//this.menus.invoke('setStyle', 'cursor:pointer');
		this.menus.each(
			function(e){
				e = e.down().down();
				Event.observe(e, 'mouseover', function() { thisObj.btnover(this) });
				Event.observe(e, 'mouseout', function() { thisObj.btnout(this) });
				Event.observe(e, 'click', function() { thisObj.btnclick(this) });
			}.bind(this)	
		);
		//this.submenus = $$('.div_menu_sub_list');
		this.submenus = $$('.div_menu_sub').first().select('dd');
		this.submenus.invoke('hide');
		//this.submenus.invoke('setStyle', 'cursor:pointer');
		
		var selected = $$('.div_menu_sub').first().down('.menu_current_page') ? $$('.div_menu_sub').first().down('.menu_current_page').up('dd') : '';
		if (selected) {
			selected.show();
			this.menu_clicked = true;
			this.submenu = selected;
			//new Effect.Move(selected, { y:42, mode: 'absolute', duration:0});
		}
			
	},
	btnover:function(ele){
		ele = ele.up().up();
		ele.addClassName('menu_hover');
	},
	btnout:function(ele){
		ele = ele.up().up();
		ele.removeClassName('menu_hover');
	},
	btnclick:function(ele){
		ele = ele.up().up();
		if (this.is_submenu_effecting>0) return;
		this.menus.each( function(e){ e.removeClassName('menu_selected') });
		ele.addClassName('menu_selected');
		if (this.menu_clicked==false) $$('.div_slideshow_title').invoke('hide');
		var thisObj = this;
		var new_submenu = this.submenus[ele.readAttribute('showtype')-1];
		var last_submenu = this.submenu;
		var tmp_y = this.menu_clicked==false ? -42 : 0;	
		if (new_submenu==last_submenu) return;
		this.menu_clicked = true;
		this.submenu = new_submenu;
		this.is_submenu_effecting = 2;
		if ($(new_submenu)) {
			new Effect.Appear(new_submenu, { duration:0.5, afterFinish:function(){
				thisObj.is_submenu_effecting--;
				new_submenu.show();
			}.bind(this)});
			/*
			new_submenu.show();
			new Effect.Move(new_submenu, { y:42, mode: 'absolute', transition:Effect.Transitions.easeOutQuint, afterFinish:function(){
				thisObj.is_submenu_effecting--;
				new_submenu.show();
			}.bind(this)});
			*/
		} else {
			thisObj.is_submenu_effecting--;
		}
		if ($(last_submenu)) {
			new Effect.Fade(last_submenu, { duration:0.3, afterFinish:function(){
				thisObj.is_submenu_effecting--;
				last_submenu.hide();
			}.bind(this)});
			/*
			last_submenu.show();
			new Effect.Move(last_submenu, { y:tmp_y, mode: 'absolute', duration:0.5, afterFinish:function(){
				thisObj.is_submenu_effecting--;
				last_submenu.hide();
			}.bind(this)});
			*/
		} else {
			thisObj.is_submenu_effecting--;
		}
	}
}
);

Component.init('.div_menu','Menu');