window.addEvent( 'load', function () {
	var scr = new AutoScreenshots( 'feature_item', 'feature_content', 'feature_nav', 500 );
} );

var AutoScreenshots = new Class( {
	initialize: function ( mainClass, imagesClass, linksClass, effectTime ) {
		this.mainClass = mainClass;
		this.imagesClass = imagesClass;
		this.linksClass = linksClass;
		this.effectTime = effectTime;
		
		this.actScreenshots = null;
		this.actScr = 1;
		
		$$( '.' + this.mainClass ).each( function ( obj ) {
			this.actScreenshots = new Screenshots( $E( '.' + this.imagesClass, obj ), this.effectTime );
			$ES( '.' + this.linksClass + ' a', obj ).each( function ( lobj, num ) {
				if( lobj.getProperty( 'rel' ) == 'screenshot' )
					lobj.onclick = this.actScreenshots.showScreenshot.bindAsEventListener( this.actScreenshots, num );
			}, this );
		}, this );
	}
} );

var Screenshots = new Class( {
	initialize: function ( obj, effectTime ) {
		this.container = $(obj);
		this.container.setStyles( { position: 'relative', overflow: 'hidden' } );
		this.bar = new Element( 'div' ).setStyles( { height: this.container.getSize().size.y + 'px', position: 'absolute', top: '0px', left: '0px' } );
		
		this.effectTime = effectTime;
		this.elements = new Array();
		this.actLeft = 0;
		$A(this.container.childNodes).each( function ( obj ) {
			if( obj.nodeType == 1 )
			{
				obj = $(obj);
				obj.setProperty( 'align', 'left' );
				var size = obj.getSize().size.x;
				this.actLeft += size;
				this.elements.push( {
					element: obj.injectInside( this.bar ),
					width: size,
					position: this.actLeft - size
				} );
			}
		}, this );
		
		this.bar.setStyle( 'width', this.actLeft + 'px' );
		this.bar.injectInside( this.container );
		
		this.actElement = 0;
		this.lastElement = null;
		this.effect = this.bar.effect( 'left', { duration: this.effectTime, transition: Fx.Transitions.quartInOut } );
		this.actPosition = 0;
	},
	
	showScreenshot: function ( event, num ) {
		if( num != this.actElement )
		{
			this.lastElement = this.actElement;
			this.actElement = num;
			
			var delta = ( this.elements[this.actElement].position - this.elements[this.lastElement].position );
			this.effect.custom( this.actPosition, this.actPosition - delta );
			
			this.actPosition = this.actPosition - delta;
		}
		return false;
	}
	
} );