/**/

var VisualCycler = new Class({
	
	options: {
		cycle_duration: 5000,
		visual_duration: 1000,
		image_duration: 100,
		
		visual_min: 0,
		visual_max: 1,
		
		image_min: 0.875,
		image_max: 1
	},
	
	initialize: function( options )
	{
		window.addEvent( 'domready', this.domready.bind( this ));
		this.setOptions( options );
	},
	
	
	active: false,
	images: false,
	
	front: false,
	back: false,
	
	over: false,
	
	
	domready: function ()
	{
		var preload = [];
		
		
		if( $('content_left_wrapper_visual') == false )
			return;
		if( !$('content_left_wrapper_visual').getProperty( 'src' ).test( "350x430" ))
			return;
		
		
		this.active = 0;
		this.images = $('imageOverview').getElements( 'img' );
		this.images.each(
			function ( image, key )
			{
				
				image.fx = new Fx.Style( image, 'opacity', { duration: this.options.image_duration, wait: false }).set( this.options.image_min );
				image.setProperty( 'cycle', image.getProperty( 'src' ).replace( "67x67", "350x430" ));
				preload.push( image.getProperty( 'cycle' ));
				
				if( image.getProperty( 'cycle' ) == $('content_left_wrapper_visual').getProperty( 'src' ))
					this.active = key;
				
				
				image.addEvent(
					'mouseover',
					function ()
					{
						this.over = true;
						
						if( this.active == key )
						{
							return
						}
						else
						{
							try { console.log( 'Fade to mouse over image ' + key ); } catch( e ) {}
							this.images[ this.active ].fx.start( this.options.image_min );
							
							this.active = key;
							this.cycle( true );
						}
					}.bind( this )
				);
				
				image.addEvent(
					'mouseout',
					function ()
					{
						this.over = false;
					}.bind( this )
				);
				
				
			}.bind( this )
		);
		
		
		this.front = $('content_left_wrapper_visual');
		this.back = new Element(
			'img',
			{
				id: 'content_left_wrapper_visual_copy',
				src: this.front.getProperty( 'src' ),
				styles :
				{
					'position': 'relative',
					'margin-top': -(this.front.getStyle( 'height' ).toInt()),
					'width': this.front.getStyle( 'width' ),
					'height': this.front.getStyle( 'height' )
				}
			}
		).injectAfter( this.front );
		this.front.fx = new Fx.Style( this.front, 'opacity', { duration: this.options.visual_duration, wait: false }).set( this.options.visual_max );
		this.back.fx = new Fx.Style( this.back, 'opacity', { duration: this.options.visual_duration, wait: false }).set( this.options.visual_min );
		
		
		
		this.images[ this.active ].fx.start( this.options.image_max );
		
		
		new Asset.images(
			preload,
			{
				onComplete: function()
				{
					try { console.log( 'Completed preloading images' ); } catch( e ) {}
					try { console.log( 'Setting cycle to ' + this.options.cycle_duration ); } catch( e ) {}
					this.cycle.periodical( this.options.cycle_duration, this );
				}.bind( this )
			}
		);
	},
	
	cycle: function ( force )
	{
		if( this.over !== false && ( force === false || force === undefined ))
		{
			try { console.log( 'Deny fading to next image' ); } catch( e ) {}
			return;
		}
		
		this.images[ this.active ].fx.start( this.options.image_min );
		
		
		
		if( this.over === false )
		{
			if( this.active < this.images.length-1 )
			{
					this.active++;
			}
			else
			{
				this.active = 0;
			}
		}
		
		if( this.front.getStyle( 'opacity' ) >= 0 && this.front.getStyle( 'opacity' ) <= 0.5 )
		{
			this.back.fx.start( this.options.visual_min );
			
			
			try { console.log( 'Fading FRONT to next image ' + this.active ); } catch( e ) {}
			
			this.front.setProperty( 'src', this.images[ this.active ].getProperty( 'cycle' ));
			this.front.fx.start( this.options.visual_max );
			
			this.images[ this.active ].fx.start( this.options.image_max );
		}
		else
		{
			this.front.fx.start( this.options.visual_min );
			
			
			try { console.log( 'Fading BACK to next image ' + this.active ); } catch( e ) {}
			
			this.back.setProperty( 'src', this.images[ this.active ].getProperty( 'cycle' ));
			this.back.fx.start( this.options.visual_max );
			
			this.images[ this.active ].fx.start( this.options.image_max );
		}
		
	}
});

VisualCycler.implement( new Options );

new VisualCycler();