var StretchyMenu = new Class({
	options: {
		height: 360,
		itemHeights: [],
		maxItemHeight: 0.75, // relative to menu height
		dividerStyle: "none",
		fxOptions: {wait: false, duration: 500, transition: Fx.Transitions.quadOut}
	},
    initialize: function(element, options){
		element = $(element);
		this.setOptions(options);
		var menuItems = element.getElements("div");
		if(menuItems.length < 2) return;
		
		var itemMaxHeight = this.options.height*this.options.maxItemHeight;
		var itemMinHeight = (this.options.height-itemMaxHeight)/(menuItems.length-1);
		var itemDefaultHeight = this.options.height/menuItems.length;
			
		var menuFx = new Fx.Elements(menuItems, this.options.fxOptions);
		var fillFxList = (function(type){
		var result = {};
		if(type == 'default' && this.options.itemHeights.length == menuItems.length)
		{
			for(var i = 0; i < menuItems.length; ++i) result[i] = {'height': this.options.itemHeights[i]};
			return result;
		}
				
		var iHeight = (type=='min')? itemMinHeight : itemDefaultHeight;
		for(var i = 0; i < menuItems.length; ++i) result[i] = {'height': iHeight};
		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] = {'height': itemMaxHeight};
						menuFx.start(fxList);
					}}});
			}, this);
			
			element.addEvent('mouseleave', function(){ menuFx.start(fillFxList('default')); });
	    }
	});
	StretchyMenu.implement(new Options);
		StretchyMenu.implement(new Options);
	
	window.addEvent('domready', function(){
		new StretchyMenu('slidercontent', {maxItemHeight: 0.75, itemHeights: [270,45,45]});			
	});