// Diaporama Class /////////////////////////////////////////////////////////////

function Diaporama(id, d, w, p, ars, arb) {

	// VARS
	this.ID = id;	
	this.currentPosition = 0;
	this.Pause = (p!=null ? p : false);
	this.First = true;
	this.User = false;
	this.crossFade = true;
	this.diapoWidth = w;
	this.diapos = d;
	this.numberOfDiapos = this.diapos.length;
	this.timeoutID = {};
	this.arrowSize = (ars!=null ? ars : 24);
	this.showArrows = (arb!=null ? arb : false);
	
	// METHODS
	this.fade = function() {
		var self = this;
		// control position to fall within number of diapos
		if (this.currentPosition == this.numberOfDiapos)
			this.currentPosition = 0;
		else if (this.currentPosition < 0)
			this.currentPosition = this.numberOfDiapos-1;
		// do the fading
		$("#nextDiapo"+self.ID)
			.css({opacity:0})
			.html(self.diapos[self.currentPosition].innerHTML)
			.animate({opacity:1},750);
		$("#diapo"+self.ID).animate({opacity:0}, 750, "linear", function() {
			if (self.crossFade)
				$(this).html(self.diapos[self.currentPosition].innerHTML).css({opacity:1});
			else
				$(this).load(function(){$(this).css({opacity:1})}).html(self.diapos[self.currentPosition].innerHTML);
			bindImgLightboxLinks("#diapo"+self.ID);
		});
	}
	
	this.diaporama = function() {
		var self = this;
		if (this.User || !this.Pause) {
			this.currentPosition += 1;
			this.fade();
			this.User = false;
		}
			
		if (!this.Pause)
			this.timeoutID = setTimeout(function(){self.diaporama();}, 5000);
	}
	
	// BINDING & LAUNCHING
	this.launch = function() {
		var self = this;
		
		$('#diaposContainer'+self.ID).css('overflow', 'hidden');
		this.diapos.wrapAll('<div id="diapoInner'+self.ID+'"></div>')
				   .css({'float' : 'left', 'width' : self.diapoWidth});
		$('#diapoInner'+self.ID).css({'width' : self.diapoWidth * (self.numberOfDiapos+1), 'opacity' : 0});
		this.diapos.css({'visibility' : 'visible'});
		$('#diapoInner'+self.ID).animate({'opacity' : 1}, 1000, 'linear', function(){
                                                                $('#loadingDiaporama'+self.ID).remove();
                                                            });
		$('#diaporama'+self.ID)
			.prepend('<div class="control'+self.ID+'" id="leftControl'+self.ID+'"></div>')
			.append('<div class="control'+self.ID+'" id="rightControl'+self.ID+'"></div>'); // pas de <a> pour éviter les pointillés autour générés par les browsers qd on clique
		$('#leftControl'+self.ID).bind('mouseenter mouseover', function(){$(this).css('background-position',-self.arrowSize+'px 0px')});
		$('#leftControl'+self.ID).bind('mouseleave mouseout', function(){$(this).css('background-position','0px 0px')});
		$('#rightControl'+self.ID).bind('mouseenter mouseover', function(){$(this).css('background-position','0px 0px')});
		$('#rightControl'+self.ID).bind('mouseleave mouseout', function(){$(this).css('background-position',-self.arrowSize+'px 0px')});
		$('#diaporama'+self.ID)
			.bind('mouseenter mouseover', function(){
				clearTimeout(self.timeoutID);
				//self.Pause = true;
		        $('.control'+self.ID).show();
			})
			.bind('mouseleave mouseout', function(){
				clearTimeout(self.timeoutID);
		        if (!self.Pause)
			        self.timeoutID = setTimeout(function(){self.diaporama();}, 1500);
				if (!self.showArrows)
			        $('.control'+self.ID).hide();
			});
		$('.control'+self.ID)
			.bind('click', function(){
	        	self.currentPosition += ($(this).attr('id')=='rightControl'+self.ID ? 1 : -1);
	        	self.User = true;
	        	self.fade();
    		});
		if (!self.showArrows)
	        $('.control'+self.ID).hide();
		else
			$('.control'+self.ID).show();
    		
		this.timeoutID = setTimeout(function(){self.diaporama();}, 5000);
	}
}