/**
 * register MwJsMenu with dom:loaded
 */
document.observe("dom:loaded", function() {
	oMwJsMenu = new MwJsMenu();
});

/**
 * Simple JS Menu - MwJsMenu
 */
var MwJsMenu = Class.create({
	opts: {
		/** mix some effects! */
		showEffects: ['Effect.Appear'],
		hideEffects: ['Effect.Fade'],
		/** note: sync: true will be set in Effect.Mixed */
		showEffectsOptions: { },
		hideEffectsOptions: { },
		parallelEffectOptions: { duration: 0.3, delay: 0 },
		useClass: 'ul.hmenu2'
	},
	/**
	 * initialize the observers
	 */
	initialize: function(opts) {
		this.opts = Object.extend(this.opts, opts||{});
		$$(this.opts.useClass).each(function($r,$k){
			$r.writeAttribute({'id':this.opts.useClass.gsub(/\w+\./,'')+'_'+$k});
			$r.up().observe('mouseover', function($EV) {
				this.show($r);
			}.bind(this));
			$r.up().observe('mouseout', function($EV) {
				if (!$EV.relatedTarget.descendantOf($r)) {
					this.hide($r);
				}
			}.bind(this));
		}.bind(this));
	},
	/**
	 * show the item
	 */
	show: function($E) {
		new Effect.Mixed($E,this.opts.showEffects,
			Object.extend(this.opts.showEffectsOptions||{},{
				afterSetup:function(){
					$E.removeClassName('nodisplay');
				}.bind(this),
			}),
			this.opts.parallelEffectOptions
		);
	},
	/**
	 * hide the item
	 */
	hide: function($E) {
		new Effect.Mixed($E,this.opts.hideEffects,
			Object.extend(this.opts.hideEffectsOptions||{},{
				afterFinish:function(){
					$E.addClassName('nodisplay');
				}.bind(this)
			}),
			this.opts.parallelEffectOptions
		);
	}
});

Effect.Mixed = Class.create(Effect.Base, {
  initialize: function(ele,effects,opts,parallelopts) {
	cEffects = effects.clone();
	cEffects.each(function(o,i){
		eval('cEffects[i] = new '+o+'(ele,Object.extend(opts||{},{sync:true}));');
	});
	new Effect.Parallel(cEffects,parallelopts||{});
  }
});