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

function TwitterDiaporama(id, diapoList, ars, arb) {
	
	// VARS
	this.ID = id;
	this.currentPosition = 0;
	this.Pause = false;
	this.First = true;
	this.crossFade = true;
	this.Speed = 7000;
	this.DiapoList = diapoList;
	this.numberOfDiapos = 0;
	this.timeoutID = {};
	this.arrowSize = (ars!=null ? ars : 24);
	this.showArrows = (arb!=null ? arb : false);
	
	
	// METHODS
	this.manageControls = function(position) {
		var self = this;
		if (position==0) {$('#rightDiapoControl'+self.ID).css('opacity',.25).data('active',false)} else {$('#rightDiapoControl'+self.ID).css('opacity',1).data('active',true)}
		if (position==this.numberOfDiapos-1) {$('#leftDiapoControl'+self.ID).css('opacity',.25).data('active',false)} else { $('#leftDiapoControl'+self.ID).css('opacity',1).data('active',true)}
	}

	this.fade = function() {
		var self = this;
		this.manageControls(this.currentPosition);
		var nextHtml = this.DiapoList[this.currentPosition]['message']+"<p class='date'>"+this.DiapoList[this.currentPosition]['date']+"</p>";
		$("#diapo"+self.ID)
							.css({opacity:0})
							.html(nextHtml);
		$("#diapo"+self.ID).animate({opacity:1}, 750, "linear", function(){});
	};
	
	this.diaporama = function() {
		if (this.First) {
		
		    if (!this.First) {
		        if (this.currentPosition == this.numberOfDiapos-1)
		          this.currentPosition = 0;
		        else
		          this.currentPosition += 1;
		    }
		    
		    this.fade();
		    
		    this.First = false;
		    
		    var self = this;
		    if (!this.Pause)
		        this.timeoutID = setTimeout(function(){self.diaporama();}, self.Speed);
		        
		}
	};
	
	
	// BINDS & CO
	
	// Insert controls in the DOM
	this.bindDiapoControls = function() {
		var self = this;
		
		$('#diaporama'+self.ID)
	    	.prepend('<div class="diapoControl'+self.ID+'" id="leftDiapoControl'+self.ID+'"></div>')
	    	.append('<div class="diapoControl'+self.ID+'" id="rightDiapoControl'+self.ID+'"></div>'); // pas de <a> pour éviter les pointillés autour générés par les browsers qd on clique
		$('#leftDiapoControl'+self.ID).bind('mouseenter mouseover', function(){$(this).css('background-position',-self.arrowSize+'px 0px')});
		$('#leftDiapoControl'+self.ID).bind('mouseleave mouseout', function(){$(this).css('background-position','0px 0px')});
		$('#rightDiapoControl'+self.ID).bind('mouseenter mouseover', function(){$(this).css('background-position','0px 0px')});
		$('#rightDiapoControl'+self.ID).bind('mouseleave mouseout', function(){$(this).css('background-position',-self.arrowSize+'px 0px')});
	  
		// Create event listeners for #diaporama rollovers
		$('#diaporama'+self.ID)
	    	.bind('mouseenter mouseover', function() {
	        	clearTimeout(self.timeoutID);
	        	self.Pause = true;
				$('.diapoControl'+self.ID).show();
	    	});
		$('#diaporama'+self.ID)
			.bind('mouseleave mouseout', function() {
				clearTimeout(self.timeoutID);
				self.Pause = false;
				self.timeoutID = setTimeout(function(){self.diaporama();}, 1500); // on attend 1500ms avant de renvoyer le diaporama
				if (!self.showArrows)
			        $('.diapoControl'+self.ID).hide();
	    	});
	
		// Create event listeners for .control clicks
		$('.diapoControl'+self.ID)
			.bind('click', function(){
				if (!$(this).data('active')) return;
				self.currentPosition += ($(this).attr('id')=='rightDiapoControl'+self.ID ? -1 : 1);
				self.fade();
			});
			
		// setup control visibility at start
    	if (this.showArrows)
    		$('.diapoControl'+self.ID).show();
    	else
    		$('.diapoControl'+self.ID).hide();
	};
	
	
	// LAUNCHING
	
	// Launching diaporama
	this.launchDiaporama = function(crossFade) {
		this.numberOfDiapos = this.DiapoList.length;
		var self = this;
		self.crossFade = crossFade;
		$('#loadingDiaporama'+self.ID)
	    	.animate({'opacity' : 0}, 1000, 'linear', function(){
				$(this).remove();
			});
		this.manageControls(this.currentPosition);
		this.diaporama();
	};
}