var Slideshow = new Class({
	initialize: function(elementId, buttonElementId, buttonElementItemClass, buttonElementItemClassOver, slideDuration, fadeDuration){
		
		// -- PROPERTIES --
		
		this.elementId = 'slideshow';
		if(elementId != undefined) {
			this.elementId = elementId;
		}
		
		this.buttonElementId = 'slideshow-buttons';
		if(buttonElementId != undefined) {
			this.buttonElementId = buttonElementId;
		}
		
		this.buttonElementItemClass = '';
		if(buttonElementItemClass != undefined) {
			this.buttonElementItemClass = buttonElementItemClass;
		}
		
		this.buttonElementItemClassOver = 'active';
		if(buttonElementItemClassOver != undefined) {
			this.buttonElementItemClassOver = buttonElementItemClassOver;
		}
        
		this.slideDuration = 5000;
		if(slideDuration != undefined) {
			this.slideDuration = slideDuration;
		}
		
		this.fadeDuration = 1000;
		if(fadeDuration != undefined) {
			this.fadeDuration = fadeDuration;
		}
		
		this.isActive = true;
		
		// -- ELEMENTS --
		
		this.slideshowElement 	= $(this.elementId);
		this.itemElements 		= this.slideshowElement.getChildren('div');
		
		this.buttonElement 		= $(this.buttonElementId);
		this.itemButtonElements = this.buttonElement.getChildren('div');
		
		if((this.slideshowElement != null) && (this.itemElements.length != 0) && (this.buttonElement != null) && (this.itemButtonElements.length != 0)) {
			this.start();
		} else {
			this.tracer('ERROR');
		}
    },
	start: function() {
		this.tracer('start()');
		
		// -- PROPERTIES --
		
		this.currentSlideIndex = 0;
		this.currentSlide = this.itemElements[0];
		
		this.timeout = null;
		this.myEffect = 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.itemButtonElements.addEvent('click', this.onButtonClick.bind(this));
		
		this.itemElements.setStyles({
			'display': 'none'
		});
		
		//this.tracer(this.itemElementsImages);
		//this.itemElementsImages.addEvent('onload', this.onChange.bind(this));
		
		// -- START --
		
		this.showSlide(0);
	},
	stop: function() {
		this.tracer('stop()');
		
		$clear(this.timeout);
		
		if(this.myEffect != null) {
			this.myEffect.cancel();
		}
		
		this.isActive = false;
		
	},
	showSlide: function(index) {
		this.tracer('showSlide()');
		
		this.currentSlideIndex = index;
		this.currentSlide = this.itemElements[index];
		
		// button style
		this.itemButtonElements.set('class', this.buttonElementItemClass);
		this.itemButtonElements[index].set('class', this.buttonElementItemClassOver);
		
		// displays the current item
		this.currentSlide.setStyles({
			'display': 'inline',
			'opacity': 0
		});
		
		if(this.myEffect != null) {
			this.myEffect.cancel();
		}
		this.myEffect = new Fx.Morph(this.currentSlide, {duration: this.fadeDuration, transition: Fx.Transitions.Sine.easeOut});
		
		this.myEffect.start({
			'opacity': [0, 1]
		});
		
		if (this.isActive == true) {
			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.slideshowElement.fireEvent('end', '', this.fadeDuration);
		}
		
		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
		});
		
	},
	centerAllItems: function() {
		this.tracer('centerAllItems()');
		
		var itemElementsLength = this.itemElements.length;
		
		for(var i = 0; i < itemElementsLength; i++) {
			var itemElement = this.itemElements[i];
			
			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
			});
		}
		
	},
	onButtonClick: function(event) {
		this.tracer('onButtonClick(event)');
		
		var index = this.itemButtonElements.indexOf(event.target);
		
		// button style
		this.itemButtonElements.set('class', this.buttonElementItemClass);
		event.target.set('class', this.buttonElementItemClassOver);
		
		// disable the slideshow
		this.isActive = false;
		
		// hide the current item
		if(this.myEffect != null) {
			this.myEffect.cancel();
		}
		this.myEffect = new Fx.Morph(this.currentSlide, {duration: this.fadeDuration, transition: Fx.Transitions.Sine.easeOut});
	
		this.myEffect.start({
			'opacity': [this.currentSlide.getStyle('opacity'), 0]
		});
		
		this.timeout = $clear(this.timeout);
		this.timeout = this.showSlide.delay(this.fadeDuration, this, index);
		
	},
	reset: function(event) {
		this.tracer('reset()');
		
		// enable the slideshow
		this.isActive = true;
		
		this.timeout = $clear(this.timeout);
		
		this.centerAllItems();
		
		this.itemElements.setStyles({
			'display': 'none'
		});
		
		if((this.slideshowElement != null) && (this.itemElements.length != 0) && (this.buttonElement != null) && (this.itemButtonElements.length != 0)) {
			this.showSlide(0);
		} else {
			this.tracer('ERROR');
			this.slideshowElement.fireEvent('end', '', this.fadeDuration);
		}
	},
	tracer: function(toTrace) {
		//alert(console);
		if(typeof console != 'undefined') {
			//console.log(toTrace);
		}
	}
});

/*
window.addEvent('domready', function() { 
	
	var mySlideshow = new Slideshow('slideshow', 'slideshow-buttons', '', 'active', 5000, 1000);
	
	$('reset_btn').addEvent('click', mySlideshow.reset.bind(mySlideshow));
	
});
*/