
var Diaporama = new Class({
	Implements: [ Options, Chain, Events ],

	defaultOptions: function(){
		return {
			tag: 'img',
			effet: 'fondu',
			transition: 1000,
			pause: 3000
		};
	},

	initialize: function(el, options){

		this.diaporama = $(el);

		if ($defined(this.diaporama))
		{
			this.setOptions(this.defaultOptions(), options);

			this.imageDivs = this.diaporama.getElementsByTagName(this.options.tag);
			this.numberOfElements = this.imageDivs.length;
			this.count = this.numberOfElements;
			
			this.setup();
			this.timerDiaporama = this.play.periodical(this.options.pause + this.options.transition, this);
		}
	},

	setup: function(){
		var imageStyle;
		var position = 0;
		for(i=0; i < this.numberOfElements; i++){
	
			imageStyle = this.imageDivs[ i ].style; 
			imageStyle.position='absolute'; 
			
			imageStyle.top = "0px";
			imageStyle.left = "0px";
		}
		this.play();
	},
	
	fondu: function(){
		var currentImage;
		var nextImage;
		
		this.diaporama.style.background = "none";
		currentImage = this.imageDivs[ this.count ];
		
		if  (this.count == 0)
			this.count = this.numberOfElements;
			
		nextImage = this.imageDivs[ this.count - 1 ];

		var myEffect = new Fx.Morph(currentImage, {duration: this.options.transition, transition: Fx.Transitions.linear});
		var myAntiEffect = new Fx.Morph(nextImage, {duration: this.options.transition, transition: Fx.Transitions.linear});
		 
		myEffect.start({ 'opacity': [1,0] });
		myAntiEffect.start({ 'opacity': [0,1] });		
	},
	
	play: function(){
		this.count--;
		if (this.options.effet == "fondu")
			this.fondu();
	}

});
