var AnimatedSlideShow = new $OO.Class( {
	__construct: function( slide, prev, next, thumbs, selected, steps  ){
		this.thumbs = $( thumbs );
		this.setNavigation( slide, prev, next, steps||1 );
		this.showCurrent( thumbs, selected, steps||1 );
	},
	triggerNext: function(){
		this.next.trigger( 'click' );
	},
	triggerPrev: function(){
		this.prev.trigger( 'click' );		
	},
	setNavigation: function( slide, prev, next, steps ){
		var slide = this.slide = $( slide );
		var next = this.next = $( next );
		var prev = this.prev = $( prev );		
		
		var number = this.thumbs.length;
		var width = ( this.thumbs.width() );
		var offset = Math.round( slide.width() / width );

		slide.css( 'width', number*width );
		slide.data( 'clicks', 0 );
		
		number -= offset;
		number = Math.ceil(number/steps);
		width *= steps;

		prev.click( function(){								 
			var clicks = slide.data( 'clicks' )-1;	
			
			if( clicks < 0 ){
				$( this ).addClass( 'disabled' );
				return false;
			}else
			if( clicks <= 0 ){
				$( this ).addClass( 'disabled' );
			}else{
				$( this ).removeClass( 'disabled' );	
			}
			next.removeClass( 'disabled' );
			
			slide.animate( { marginLeft: width * clicks *-1 + 'px' }, steps*150, 'swing' );
			slide.data( 'clicks', clicks )
			return false;
		} ).addClass( 'disabled' );
		next.click( function(){
			var clicks = slide.data( 'clicks' )+1;	
			
			if( clicks > number ){
				$( this ).addClass( 'disabled' );
				return false;
			}else			
			if( clicks >= number ){
				$( this ).addClass( 'disabled' );
			}else{
				$( this ).removeClass( 'disabled' );	
			}	
			prev.removeClass( 'disabled' );
			
			slide.animate( { marginLeft:  width * clicks *-1 + 'px' }, steps*150, 'swing' );
			slide.data( 'clicks', clicks );
			return false;
		} )
	},
	showCurrent: function( thumbs, selected, steps ){
		this.current = Math.floor( $( thumbs ).index( $( selected ) ) / steps );
		for( var i = 0; i < this.current; i++ ){
			this.triggerNext();	
		}		
	}
} );