/*var hoverDecorator = Class.create ({
	root: null,
	hoveritems: null,
	initialize: function(element) {
		this.root = $(element);

		this.hoveritems = this.root.getElementsByTagName("li");

		for(var e in this.hoveritems){
			var item = this.hoveritems[e];
			if(item){
				Event.observe(item,'mouseover',this.change.bindAsEventListener(this));
				Event.observe(item,'mouseout', this.revert.bindAsEventListener(this));
			}
		}
	},
	change: function() {
		this.style.backgroundColor = "#FFFFFF";
	},
	revert: function() {
		this.style.backgroundColor = "#CCCBB9";
	}
});
*/

var FlyoutMenu = Class.create({
	root: null,
	menu: null,
	//decorator: null,
	initialize: function(element) {
		this.root = $(element);

		// A workaround for IE6 and undefined height & width
		/*this.root.absolutize();
		this.root.relativize();
		*/

		this.menu = this.root.select('.flyout');
		this.menu = this.menu[0]; // Save the 1st
		this.menu.hide();

		//this.decorator = new hoverDecorator(this.menu);

		Event.observe(this.root,'mouseover',this.show.bindAsEventListener(this));
		Event.observe(this.root,'mouseout', this.hide.bindAsEventListener(this));
	},
	show: function() {
		this.menu.style.display='inline';
	},
	hide: function() {
		this.dohide();
	},
	dohide: function() {
		this.menu.hide();
	}

});

var FlyoutFactory = {
	createAll: function() {
		var menus = $$('.menu');
		menus.each(function(e) { new FlyoutMenu(e); });
	}
}

Event.observe(window, 'load', FlyoutFactory.createAll);