var carousel = new Class( {
	defaultOptions: function() {
		return {
			container: $('carouselContainer'),
			slider : $('carouselSlider'),
			targetClass: ".sliderElement",
			tabsClass: ".tabElement",
			display: 0,
			transition: Fx.Transitions.backOut,
			transitionDuration: 600
		};
	},

	initialize: function(options) {
		this.setOptions(this.defaultOptions(), options);
		this.elements = $$(this.options.targetClass);
		this.tabs = $$(this.options.tabsClass);
		
		this.width = this.options.slider.getStyle('width').toInt();
		
		//this.options.slider.setStyle( 'overflow', 'hidden' );
		this.options.container.setStyle( 'overflow', 'hidden' );
		this.options.slider.setStyle( 'width', ( this.width * this.elements.length )+'px' );
		
		this.elements.each(function(el, i) {
			el.setStyles( {
					width: (this.width)+'px',
					'left': ( i*this.width )+'px'
				} );	
		}.bind(this) );
		
		this.tabs.each(function(el, i) {
			el.addEvent( 'click', function (event) {
				this.allerA( i );
				this.toggleTabs(el, i);
			}.bind(this) );
		}.bind(this) );
		
		this.allerA( this.options.display );
	},
	
	allerA: function( i ) {
		this.options.display = i;
		var fx = new Fx.Styles( this.options.slider, {duration: this.options.transitionDuration, transition: this.options.transition } );
		this.sliderX = '-'+( i * this.width )+'px';
		fx.start( { 'margin-left' : this.sliderX } );
	},
	
	toggleTabs: function( el, i ) {
		this.tabs.each( function(el, j) {
		}.bind(this) );
	}
	
} );

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