var Banner = Class.create(
	{
		link	: '',
		image	: '',
		
		initialize:
		function( link, image )
		{
			this.link = link;
			this.image = image;
		}
	}
);


var FadeGallery = Class.create(
	{
	  objectName: '',	
	  outputId: '',
 	  banners: new Array(),
 	  timeout: 5,			// sec
 	  fadeDuration: 2,		// sec
 	  currentStep: null,
 	  nextTimeout: null,
 	  showTimeout: null,
 	  isJump: false,
 	  effect: null,
	  
	  //==========================================
	  //===============   INIT   =================
	  //==========================================
	  initialize: 
	  function( objectName, outputId, jsonValues )
		{
			this.objectName 	= objectName;
			this.outputId 		= outputId;	
			
			
		    jsonObj = jsonValues.evalJSON();

			var thisObject = this;
			
			  if( jsonObj.nrValues > 0 )
			  {
				  jsonObj.values.each( 
						function( o )
						{
							//PRELOAD
							var img;
							img = new Image(  );
							img.src = o.image;
							//PRELOAD
							
							
							thisObject.banners.push( new Banner( o.link, o.image ) );
						}
					);
			  }
			
			if( this.banners.length == 1 )	
			{
			 	$("prodSelector").hide();
			 	$( "bannerProdLink" ).href = this.banners[0].link;
				$( "bannerProdImage").src = this.banners[0].image;
				this.effect = Effect.Appear( "bannerProdLink", { duration: this.fadeDuration, from: 0, to: 1 } );
			}
			else
			{
				for( i=0; i < this.banners.length; i++ )
				{
					var className = '';
					if( i == 0 ) className = 'first';
					if( i == this.banners.length - 1 ) className = 'last';
					
					var a = new Element( 'a', { 'class': className, href: 'javascript:' + this.objectName + '.jumpToStep(' + i +');' }).update( i + 1);
					a.id = 'prodSelector' + i;
					$("prodSelector").insert( a );
				}
				this.start();
			}	
		},
		
	   start :
	   function ()
	   {
			this.currentStep = 0;
			this.showStep( null );
	   },
	   
	   jumpToStep:
	   function( stepNr )
	   {
		   clearTimeout( this.showTimeout );
		   clearTimeout( this.nextTimeout );
		   this.currentStep = stepNr;
		   
		   //Effect.Fade( "bannerProdLink", { duration: 1, from: 1, to: 0 } );		   
		   //setTimeout ( this.objectName + '.showImage( ' + stepNr + ' )', 2 );
		   
		   this.isJump = true;
		   this.showImage( stepNr );
	   },
	   
	   nextStep :
	   function( )
	   {
		   //alert("NEXT");
		   
		   this.currentStep++;
		   if( this.currentStep == this.banners.length ) this.currentStep = 0;
		   
		   this.showStep(this.currentStep);
		   
	   },
		
		
	   showStep : 
	   function( stepNr )
		{
			var thisObject = this;
			
			if( stepNr != null )
			{
				this.hideImage();
				this.showTimeout = setTimeout ( this.objectName + '.showImage( ' + stepNr + ' )', this.fadeDuration * 1000 );
			}
			else
			{
				this.showImage( 0 );
			}
		},
		
	   
	   
	   showImage : 
	   function( stepNr )
		{
			$( "bannerProdLink" ).href = this.banners[stepNr].link;
			$( "bannerProdImage").src = this.banners[stepNr].image;
			
			if( this.isJump )
			{
				this.effect.cancel();
				this.effect = Effect.Appear( "bannerProdLink", { duration: 1, to: 1 } );
				this.isJump = false;
			}	
			else
			{
				this.effect = Effect.Appear( "bannerProdLink", { duration: this.fadeDuration, from: 0, to: 1 } );				
			}
			this.selectMenu( stepNr );
			
			var thisObject = this;
			this.nextTimeout = setTimeout ( this.objectName + '.nextStep( )', this.timeout * 1000 );
		},
		
		
	   hideImage : 
	   function()
		{
			this.effect = Effect.Fade( "bannerProdLink", { duration: this.fadeDuration, from: 1, to: 0 } );
		},
		
	   selectMenu :
	   function( stepNr )
	   {
			for( i=0; i < this.banners.length; i++ )
			{
				if( $('prodSelector' + i).hasClassName( 'on' ) )
				{
					$('prodSelector' + i).removeClassName( 'on' );
				}
				
				if( i == stepNr)
					$('prodSelector' + i).addClassName( 'on' );
			}
	   }
		
	}
);