var xSlide = new Class({
	
	options : {
		target : null,
		duration : 300,
		time : 2000
	},
	
	items : null,
	container : null,
	width : null,
	current : 0,
	
	initialize : function( obj )
	{
			
		for( var a in obj )
			this.options[a] = obj[a];
		
		if ( !this.options.target )	
			throw 'xSlide : Must provide a target!';
		
		this.items = this.options.target.getChildren();
		
		this.width = this.options.target.getSize().x;
		
		this.options.target.setStyle( 'overflow', 'hidden' );
		
		this.container = new Element( 'div', {
			styles : {
				position : 'absolute',
				width : this.width * 2,
				left : -( this.width )
			}
		}).injectInside( this.options.target )
		
		$each( this.items, function( item )
		{
			item.setStyles({
				position : 'absolute',
				top : 0,
				left : 0,
				opacity : 0
			})
			item.injectInside( this.container );
		}.bind( this ));
		
		this.animate();
		
	},
	
	animate : function()
	{	
		new Fx.Morph( this.items[this.current], {
			duration : this.options.duration
		}).start({
			left : this.width,
			opacity : 1
		}).chain( function()
		{
			(function()
			{
				new Fx.Morph( this.items[this.current], {
					duration : this.options.duration
				}).start({
					opacity : 0
				}).chain( function()
				{
					this.items[this.current].setStyle( 'left', 0 );
					this.current = this.current == this.items.length - 1 ? 0 : ( this.current + 1 );
					this.animate();
				}.bind( this ))
			}).delay( this.options.time, this )	
		}.bind( this ));
		
	}
	
});