var tabpane = new Class( {
	
	presets: {
			container: 'tabpane',
			panes: '.panes',
			tabs: '.tabspane',
			arrownext :'',
			arrowprevious : '',
			display: 0,
			transition: Fx.Transitions.Back.easeOut,
			duration: 800,
			spacer : 0,
			auto: false,
			fixedHeight: false,
			timer: 6000
	},

	initialize: function(presets) {
		this.presets = $merge(this.presets, presets);
		this.options = {};

		this.setOptions(this.presets);
		if( !$(this.options.container) ) return;
		this.element = $(this.options.container);
		this.panes = $(document.body).getElements( this.options.panes );
		this.tabs = $(document.body).getElements( this.options.tabs );
		if( this.panes.length<2 ) return;
		
		if( this.options.arrownext && this.options.arrowprevious ){
			this.arrownext = $(this.options.arrownext );
			this.arrowprevious = $(this.options.arrowprevious );
		}
		if( this.panes[0].get('tag') != 'img' )
			this.width = this.element.getSize().x.toInt();
		else this.width = this.panes[0].getSize().x.toInt();
	
		this.element.setStyles({
			'position' : 'relative',
			'overflow' : 'hidden',
			'width': this.element.getStyle('width')
		});
		this.slider = new Element( 'div' ).setStyles({
			'position' : 'relative',
			'width'	   : ( this.width * this.panes.length )+'px'
		});
		this.slider.inject( this.element );
		
		this.panes.each(function(el, i) {
			if( this.options.fixedHeight ) {
				this.options.fixedHeight = ( el.getSize().y.toInt() > this.options.fixedHeight ) ?
					el.getSize().y :
					this.options.fixedHeight;
			}		
		}.bind(this) );
		
		this.panes.each(function(el, i) {
			this.slider.grab( el );
			el.setStyles({ 
				'position' : 'absolute',
				'width': this.width+'px',
				'left': ( i* (this.width+this.options.spacer) )+'px'
			});
			if( this.options.fixedHeight ) {
				el.setStyle('margin-top', ( this.options.fixedHeight  - el.getSize().y) / 2 );
			}		
		}.bind(this) );
		
		this.fx = new Fx.Morph( this.slider, { 'duration' : this.options.duration, 'transition' : this.options.transition } );
		
		if( this.arrownext ) {
			if( this.options.fixedHeight )
				this.arrownext.setStyle('margin-top', ( this.options.fixedHeight  - this.arrownext.getSize().y) / 2 );
			this.arrownext.addEvent('click', function() {
				this.goto( this.options.display+1 );
			}.bind(this));
		}

		if( this.arrowprevious ) {
			if( this.options.fixedHeight )
				this.arrowprevious.setStyle('margin-top', ( this.options.fixedHeight  - this.arrowprevious.getSize().y) / 2 );
			this.arrowprevious.addEvent('click', function() {
				this.goto( this.options.display-1 );
			}.bind(this));
		}
		
		this.tabs.each(function(el, i) {
			el.addEvent( 'click', function (event) {
				this.goto( i );
			}.bind(this) );
			el.setStyle( 'cursor', 'pointer' );
		}.bind(this) );
		this.goto( this.options.display );
		
		if( this.options.auto==true ) {
			this.goto.periodical( this.options.timer, this, 'next' );
		}
	},
	
	goto: function( i ) {
		if( i=='next' ) i = this.options.display+1;
		if ( i > this.panes.length-1 || i<0 ) i = 0;
		this.fx.options.duration = ( this.options.duration * ( (i>this.options.display) ? i-this.options.display: this.options.display-i ));
		this.options.display = i;
		this.sliderX = '-'+( i * (this.width+this.options.spacer) )+'px';
		this.fx.start( {
			'margin-left' : this.sliderX,
			'height' : (this.options.fixedHeight) ? this.options.fixedHeight : this.panes[i].getSize().y
		});
		return;
	},
	reload: function() {
		i = this.options.display;
		this.sliderX = '-'+( i * this.width )+'px';
		this.fx.start( {
			'margin-left' : this.sliderX,
			'height' : this.panes[i].getSize().y
		});
	}	
} );

tabpane.implement(new Events); // Implements addEvent(type, fn), fireEvent(type, [args], delay) and removeEvent(type, fn)
tabpane.implement(new Options);// Implements setOptions(defaults, options)