var SlideshowMini = new Class({
	initialize: function(elementId, slideDuration, fadeDuration){
		
		// -- PROPERTIES --
		
		this.elementId = 'slideshowMini';
		if(elementId != undefined) {
			this.elementId = elementId;
		}
        
		this.slideDuration = 5000;
		if(slideDuration != undefined) {
			this.slideDuration = slideDuration;
		}
		
		this.fadeDuration = 1000;
		if(fadeDuration != undefined) {
			this.fadeDuration = fadeDuration;
		}
		
		// -- ELEMENTS --
		
		this.slideshowElement 	= $(this.elementId);
		this.itemElements 		= this.slideshowElement.getChildren('div');
		
		if((this.slideshowElement != null) && (this.itemElements.length != 0)) {
			this.start();
		}
    },
	start: function() {
		this.tracer('start()');
		
		// -- PROPERTIES --
		
		this.currentSlideIndex = 0;
		this.currentSlide = this.itemElements[0];
		
		this.timeout = null;
		
		// -- STYLES --
		
		this.slideshowElement.setStyles({
			'position': 'relative'
		});
		
		var itemElementsLength = this.itemElements.length;
		for(var i = 0; i < itemElementsLength; i++) {
			this.itemElements[i].setStyles({
					'position': 'absolute', 
					'left': '50%',  
					'top': '50%',
					'margin-top': (-(this.itemElements[i].getSize().y.toInt() / 2)) + 'px',
					'margin-left': (-(this.itemElements[i].getSize().x.toInt() / 2)) + 'px'
			});
			
			// si les images ne sont pas chargées
			//this.itemElements[i].getElements('img').addEvent('load', this.centerItem.bind(this));
			this.itemElements[i].getElements('img').addEvent('load', this.centerItem_dirty.bind(this.itemElements[i]));
		}
		
		this.itemElements.setStyles({
			'display': 'none'
		});
		
		//this.tracer(this.itemElementsImages);
		//this.itemElementsImages.addEvent('onload', this.onChange.bind(this));
		
		// -- START --
		
		this.showSlide(0);
	},
	showSlide: function(index) {
		this.tracer('showSlide()');
		
		this.currentSlideIndex = index;
		this.currentSlide = this.itemElements[index];
		
		// displays the current item
		this.currentSlide.setStyles({
			'display': 'inline',
			'opacity': 0
		});
		
		var myEffect = new Fx.Morph(this.currentSlide, {duration: this.fadeDuration, transition: Fx.Transitions.Sine.easeOut});
		
		myEffect.start({
			'opacity': [0, 1]
		});
		
		if (this.itemElements.length > 1) {
			this.timeout = this.hideSlide.delay(this.fadeDuration + this.slideDuration, this);
		}
	},
	hideSlide: function() {
		this.tracer('hideSlide()');
		
		this.currentSlide.setStyles({
			'display': 'inline'
		});
		
		var myEffect = new Fx.Morph(this.currentSlide, {duration: this.fadeDuration, transition: Fx.Transitions.Sine.easeOut});
		
		myEffect.start({
			'opacity': [1, 0]
		});
		
		// find the index of the next element to display
		this.currentSlideIndex++;
		
		if (this.currentSlideIndex >= this.itemElements.length) {
			this.currentSlideIndex = 0;
		}
		
		this.timeout = this.nextSlide.delay(this.fadeDuration, this);
	},
	nextSlide: function() {
		this.tracer('nextSlide()');
		
		this.currentSlide.setStyles({
			'display': 'none'
		});
		
		this.currentSlide = this.itemElements[this.currentSlideIndex];
		
		this.showSlide(this.currentSlideIndex);
	},
	centerItem: function(event) {
		this.tracer('centerItem()');
		
		this.tracer(event);
		
		/*
		// commenté car :
		// event n'est pas envoyé en paramètre sur l'évènement onload d'une image
		
		var itemElement = event.target;
		
		this.tracer(itemElement);
		
		var currentDisplayStyle = itemElement.getStyle('display');
		
		itemElement.setStyles({
			'display': 'inline'
		});
		
		itemElement.setStyles({
			'position': 'absolute', 
			'left': '50%',  
			'top': '50%',
			'margin-top': (-(itemElement.getSize().y.toInt() / 2)) + 'px',
			'margin-left': (-(itemElement.getSize().x.toInt() / 2)) + 'px'
		});
		
		itemElement.setStyles({
			'display': currentDisplayStyle
		});
		*/
		
	},
	centerItem_dirty: function() {
		//console.log('centerItem_dirty()');
		
		//  méthode de bidouille pour corriger le fait que event ne soit pas envoyé en paramètre sur l'évènement onload d'une image
		// this = le div contenant l'image
		
		var itemElement = this;
		
		var currentDisplayStyle = itemElement.getStyle('display');
		
		itemElement.setStyles({
			'display': 'inline'
		});
		
		itemElement.setStyles({
			'position': 'absolute', 
			'left': '50%',  
			'top': '50%',
			'margin-top': (-(itemElement.getSize().y.toInt() / 2)) + 'px',
			'margin-left': (-(itemElement.getSize().x.toInt() / 2)) + 'px'
		});
		
		itemElement.setStyles({
			'display': currentDisplayStyle
		});
		
	},
	tracer: function(toTrace) {
		//console.log(toTrace);
	}
});

/*
window.addEvent('domready', function() { 
	
	var mySlideshowMini = new SlideshowMini('slideshowMini', 5000, 1000);
	
});
*/