var Carousel = new Class( {
	initialize: function ( mainClass, imagesClass, linksClass, effectTime, setSize ) {
		this.actImages = null;
		this.actScr = 0;
		
		$('carousel_main').setStyles( { height: '29px' } );
		
		var navigation = new Element('div').setProperty('class', 'carousel_frame').injectInside($('carousel_main'));
		var anchorLeft = new Element('a').setProperty('href', '#-').setProperty('rel', 'screenshot').setProperty('class', 'carousel_previous').injectInside(navigation);
		var anchorRight = new Element('a').setProperty('href', '#+').setProperty('rel', 'screenshot').setProperty('class', 'carousel_next').injectInside(navigation);
		var imgLeft = new Element('img').setProperty('class', 'disabled').setProperty('src', '/Style Library/VSDRR/img/cronologicArrowBack.gif').setProperty('alt', 'img/cronologicArrowBack.gif').setProperty('alt', '<').setProperty('title', '').injectInside(anchorLeft);
		var imgRight = new Element('img').setProperty('src', '/Style Library/VSDRR/img/cronologicArrowForward.gif').setProperty('alt', 'img/cronologicArrowBack.gif').setProperty('alt', '>').setProperty('title', '').injectInside(anchorRight);

		$$( '.' + mainClass ).each( function ( obj ) {
			this.actImages = new imageBar( $E( '.' + imagesClass, obj ), effectTime, (setSize || 1) );
			$ES( '.' + linksClass + ' a', obj ).each( function ( lobj, num ) {
				if( lobj.getProperty( 'rel' ) == 'screenshot' )
					lobj.onclick = this.actImages.showImage.bindAsEventListener( this.actImages, lobj.getProperty('href').replace(/.*#/, '') || num );
			}, this );
		}, this );
	}
} );

var imageBar = new Class( {
	initialize: function ( obj, effectTime, setSize ) {
		this.effectTime = effectTime;
		this.setSize = setSize;
		this.elements = new Array();
		this.actLeft = 0;
		this.disabled = false;

		this.container = $(obj);
		this.container.setStyles( { overflow: 'hidden', margin: '0 29px 0 29px', width: '485px', height: '29px' } );
		this.bar = $E('.carousel_content',obj);
		this.bar.setStyles( { margin: '0 0 0 -9px', height: this.container.getSize().size.y + 'px' } );
		
		$A(this.bar.childNodes).each( function ( obj ) {
			if( obj.nodeType == 1 )
			{
				obj = $(obj);
				var size = obj.getSize().size.x + parseInt((obj.getStyle("margin-left") || "0").replace(/\D*/g, "")) + parseInt((obj.getStyle("margin-right") || "0").replace(/\D*/g, ""));
				this.actLeft += size;
				this.elements.push( {
					element: obj,
					width: size,
					position: this.actLeft - size
				} );
			}
		}, this );
		
		this.bar.setStyle( 'width', this.actLeft + 'px' );
		
		this.actElement = 0;
		this.lastElement = null;
		this.effect = this.bar.effect( 'left', {
			duration: this.effectTime,
			transition: Fx.Transitions.quartInOut,
			onStart: function(){
							this.disabled = true;
			}.bind(this),
			onComplete: function(){	
							this.disabled = false;
			}.bind(this)
		} );
		this.actPosition = 0;
	},
	
	showImage: function ( event, target ) {
		if( target != this.actElement && !this.disabled)
		{
			this.lastElement = this.actElement;
			var actElement = this.actElement;
			if (target == '-')
			{
				actElement -= this.setSize;
			}
			else if (target == '+')
			{
				actElement += this.setSize;
			}
			else
			{
				actElement = target * this.setSize;
			}

			if (-1 < actElement && actElement < this.elements.length)
			{
				this.actElement = actElement;
				var delta = ( this.elements[this.actElement].position - this.elements[this.lastElement].position );
				this.effect.start( this.actPosition, this.actPosition - delta );
				this.actPosition = this.actPosition - delta;
			}
		}
		return false;
	}
} );