var ImageMenu = new Class(
{
	getOptions: function()
	{
		return{
			onOpen: Class.empty,
			onClose: Class.empty,
			openWidth: 200,
			transition: Fx.Transitions.quadOut,
			duration: 400,
			open: null,
			border: 0
		};
	},

	initialize: function(elements, options)
	{
		this.setOptions(this.getOptions(), options);
		this.elements = $$(elements);
		this.widths = {};
		this.widths.closed = this.elements[0].getStyle('width').toInt();
		this.widths.openSelected = this.options.openWidth;
		this.widths.openOthers = 30;
		this.child = this.elements.getElement('div.inner');
		this.fx = new Fx.Elements(this.elements,
		{
			wait: false,
			duration: this.options.duration,
			transition: this.options.transition,
			onComplete: this.effect
		});

		this.elements.each(function(el,i)
		{			
			el.addEvent('click', function(e)
			{
				if(!el.hasClass('current'))
				{
					this.reset(i);
				}
			}.bind(this));
			
		}.bind(this));

		if(this.options.open)
		{
			if($type(this.options.open) == 'number')
			{
				this.reset(this.options.open);
			}
			else
			{
				this.elements.each(function(el,i)
				{
					if(el.id == this.options.open)
					{
						this.reset(i);
					}
				},this);
			}
		}

	},

	reset: function(num)
	{
		if($type(num) == 'number')
		{
			var width = this.widths.openOthers;
			if(num+1 == this.elements.length)
			{
				width += this.options.border;
			}
		}
		else
		{
			var width = this.widths.closed;
		}

		var obj = {};
		this.elements.each(function(el,i)
		{
			var w = width;
			if(i == this.elements.length-1)
			{
				w = width;
			}
			obj[i] = {'width': w};
		}.bind(this));

		if($type(num) == 'number')
		{
			obj[num] = {'width': this.widths.openSelected};
		}

		this.appear(num,obj);
	},

	appear: function(num,obj)
	{
		this.elements.removeClass('current');
		this.elements[num].addClass('current');
		$$('#imageMenu div.inner').each(function(el,i)
		{
			if( el.hasClass('on') )
			{
				var fx = new Fx.Style(el, 'opacity',
				{
					wait: false,
					duration: 300/*,
					onComplete: function(){ this.child.setStyle('display','none') }.bind(this)*/
				});
				if(!window.ie)fx.start(0);
			}
			else
			{
				this.fx.start(obj);
			}
		},this);
	},
	
	effect: function()
	{
		$$('#imageMenu div.inner').removeClass('on');
		
		var leChild = $$('.current')[0].getElement('div.inner');
		if(!window.ie)var childfx = new Fx.Style(leChild, 'opacity', {wait:false}).set(0);
		leChild.setStyle('display','block').addClass('on');
		if(!window.ie)childfx.start('1');
	}

});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events);