var StretchyMenu = new Class({
		options: {
			width: 448,
			itemWidths: [],
			maxItemWidth: 0, // relative to menu width
			dividerStyle: "2px solid #f6f8f2",
			fxOptions: {wait: false, duration: 400, transition: Fx.Transitions.quadOut}
		},
	    initialize: function(element, options){
			element = $(element);
			this.setOptions(options);
			var menuItems = element.getElements("li a");
			if(menuItems.length < 2) return;
			
			var itemMaxWidth = this.options.width*this.options.maxItemWidth;
			var itemMinWidth = (this.options.width-itemMaxWidth)/(menuItems.length-1);
			var itemDefaultWidth = this.options.width/menuItems.length;
			
			var menuFx = new Fx.Elements(menuItems, this.options.fxOptions);
			var fillFxList = (function(type){
				var result = {};
				if(type == 'default' && this.options.itemWidths.length == menuItems.length)
				{
					for(var i = 0; i < menuItems.length; ++i) result[i] = {'width': this.options.itemWidths[i]};
					return result;
				}
				
				var iWidth = (type=='min')? itemMinWidth : itemDefaultWidth;
				for(var i = 0; i < menuItems.length; ++i) result[i] = {'width': iWidth};
				return result;
			}).bind(this);
			menuFx.set(fillFxList('default'));
			
			menuItems.each(function(menuItem, index){
				menuItem.set({
					styles:{'border-right': (index != menuItems.length-1) ? this.options.dividerStyle : 'none'},
					events:{'mouseenter': function(){
						var fxList = fillFxList('min');
						fxList[index] = {'width': itemMaxWidth};
						menuFx.start(fxList);
					}}});
			}, this);
			
			element.addEvent('mouseleave', function(){ menuFx.start(fillFxList('default')); });
	    }
	});
	StretchyMenu.implement(new Options);
	
	window.addEvent('domready', function(){
		new StretchyMenu('stretchyMenu', {maxItemWidth: 0.4, itemWidths: [112,112,112,112]});		
	});