var Menu = new Class({
  
  sMenuItemBaseDir: "/images/layout/menu/",
	  
	initialize: function(sMenuHolder)
	{
		this.oMenuHolder = $(sMenuHolder);		
		this.aMenuitems = this.oMenuHolder.getElements("*[class^=menuitems]");
		
		this.aMenuitems.each(function(element) 
		{
			var aClasses = element.getProperty("class").split(' ');
			aClasses.each(function(klass) 
			{
				if(klass.match(/^menuitems(\[.+\])$/)) 
				{
					sCategory = klass.match(/^menuitems\[(.+)\]$/)[1];
					this.register(sCategory);
				}
			}.bind(this));
		}.bind(this));
	},
	
	register: function(sMenuItem)
	{	
		oMenuItem = $(sMenuItem);
		oMenuItem.addEvent("mouseover", function() 
		{			
			this.switchImage(sMenuItem, "on");
		}.bind(this));
		
		oMenuItem.addEvent("mouseout", function() 
		{
			this.switchImage(sMenuItem, "off");
		}.bind(this));
	},
	
	switchImage: function(sMenuItem, sState)
	{		
		oMenuItem = $(sMenuItem);
		//var myFx = new Fx.Style(oMenuItem, 'opacity').start(50);
		//var marginChange = new Fx.Style(oMenuItem, 'opacity',{duration:500});
		//marginChange.start(0);		
		oMenuItem.src = this.sMenuItemBaseDir + sState + "/" + sMenuItem + ".gif";
		//marginChange.addEvent('onComplete', this.FadeSwitch(sMenuItem) );
	},
	
	FadeSwitch: function(sMenuItem, sState)
	{
		oMenuItem = $(sMenuItem);
		var marginChange = new Fx.Style(oMenuItem, 'opacity',{duration:500});
		marginChange.start(100);
	}
});

Menu.implement(new Events); // Implements addEvent(type, fn), fireEvent(type, [args], delay) and removeEvent(type, fn)
Menu.implement(new Options);// Implements setOptions(defaults, options)
 
var oMenu;
window.addEvent("domready", function() 
{ 		
	oMenu = new Menu("menu");  	
});