/*

Affichage en fondu de plusieurs images.

*** Utilisation standard :

$(document).ready(function ()
{
	var l_pFondu = new HC_Fondu($('#Diapo'), false); // Conteneur, la première image est-elle déjà affichée ?
	
	l_pFondu.addImage('img/img1.png');
	l_pFondu.addImage('img/img2.png');
	l_pFondu.addImage('img/img3.png');
	l_pFondu.addImage('img/img4.png');
	l_pFondu.addImage('img/img5.png');
	
	l_pFondu.start(iTemps, bImmediat); // Temps entre deux animations, la transition doit-elle être lancée immédiatement
});

*** Si la première image est déjà dans le code HTML

 - Remplacer le deuxième paramêtre par true
 - Ne pas appeler addImage pour cette image

*** Contrôle de l'animation

 - Ne pas appeler start
 - Fonction callback avant affichage : l_pFondu.m_pCallbackAvantAffichage = fonction avant(pointeur fondu, num image);
 - Fonction callback après affichage : l_pFondu.m_pCallbackApresAffichage = fonction apres(pointeur fondu);

*** Autres actions

 - Vitesse d'apparition et disparition : l_pFondu.m_iTempsTransition = xxxx;
 - Arrêter le diapo automatique : l_pFondu.stop();

*/

HC_Diaporama.prototype.TYPE_IMAGE = 1;
HC_Diaporama.prototype.TYPE_DIV = 2;

HC_Diaporama.prototype.pManager = new Array();

function HC_Diaporama (pConteneur)
{
	this.m_pItems = new Array(); // 0 => Item, 1 => Type, 2 => prêt
	this.m_pConteneur = pConteneur;
	this.m_iNumItem = -1;
	this.m_iNextItem = -1;
	this.m_iNbItem = 0;
	this.m_iTemps = 0; // Chrono automatique entre 2 affichage
	this.m_iTempsTransition = 1000; // Temps de transition
	this.m_iFPS = 35;
	this.m_pTimer = null;
	this.m_pFPS = null; // Timer pour l'animation
	this.m_iTempsAnimation = 0;
	this.m_fnAnimation = null; // Fonction d'animation
	
	this.m_szClassActif = 'HC_Diaporama_Actif';
	this.m_szClassInactif = 'HC_Diaporama_Inactif';
	this.m_szClassEnCoursActif = 'HC_Diaporama_EnCoursActif';
	this.m_szClassEnCoursInactif = 'HC_Diaporama_EnCoursInactif';
	
	this.m_fnCallbackAvantAffichage = null; // Fonction appelée avant l'affichage de l'image
	this.m_fnCallbackApresAffichage = null; // Fonction appelée après l'affichage de l'image
	
	this.m_pConteneurDiapo = $('<div></div>');
	
	this.m_iRang = HC_Diaporama.prototype.pManager.length;
	
	HC_Diaporama.prototype.pManager[this.m_iRang] = this;
}

HC_Diaporama.prototype.init = function ()
{
	if (!$(this.m_pConteneur).css('position'))
		$(this.m_pConteneur).css('position', 'relative');
	
	$(this.m_pConteneur).html('');
	
	$(this.m_pConteneurDiapo)
		.css('position', 'relative')
		.css('height', '100%')
		.css('overflow', 'hidden')
		.appendTo($(this.m_pConteneur));
	
	if (this.m_iNumItem < 0 && this.m_iNbItem > 0)
		this.m_iNumItem = 0;
		
	if (this.m_iNumItem >= 0) {
		$(this.m_pItems[this.m_iNumItem][0])
			.addClass(this.m_szClassActif)
			.removeClass(this.m_szClassInactif)
			.css('display', 'block');
	}
}

HC_Diaporama.prototype.addImage = function (szSource)
{
	var pImage = $('<img />');
	
	this.m_pItems[this.m_iNbItem] = new Array(pImage, HC_Diaporama.TYPE_IMAGE, false);
	
	this.preparerItem(pImage);
	
	$(pImage)
		.bind('load', function ()
		{
			var pThis = $(this).data('Diaporama');
			pThis.m_pItems[$(this).data('Num')][2] = true;
			
			if (pThis.m_iNextItem == $(this).data('Num'))
				pThis.afficherItem($(this).data('Num'));
		})
		.attr('src', szSource);
	
	this.m_iNbItem += 1;
}

HC_Diaporama.prototype.addPointeurImage = function (pImg, bFirst)
{
	this.m_pItems[this.m_iNbItem] = new Array(pImg, HC_Diaporama.TYPE_IMAGE, true);
	this.preparerItem(pImg);
	if (bFirst == true) this.m_iNumItem = this.m_iNbItem;
	this.m_iNbItem += 1;
}

HC_Diaporama.prototype.addPointeur = function (pDiv, bFirst)
{
	this.m_pItems[this.m_iNbItem] = new Array(pDiv, HC_Diaporama.TYPE_DIV, true);
	this.preparerItem(pDiv);
	if (bFirst) this.m_iNumItem = this.m_iNbItem;
	this.m_iNbItem += 1;
}

HC_Diaporama.prototype.preparerItem = function (pItem)
{
	$(pItem)
		.data('Diaporama', this)
		.data('Num', this.m_iNbItem)
		.css('position', 'absolute')
		.css('top', 0)
		.css('left', 0)
		.css('display', 'none')
		.addClass(this.m_szClassInactif)
		.appendTo(this.m_pConteneurDiapo);
}

HC_Diaporama.prototype.start = function (iTemps, bImmediat)
{
	if (iTemps > 0) {
		this.m_iTemps = iTemps;
		
		if (bImmediat)
			this.afficherItemSuivant();
		else
			this.m_pTimer = window.setTimeout('HC_Diaporama.prototype.pManager[' + this.m_iRang + '].afficherItemSuivant();', this.m_iTemps);
	}
}

HC_Diaporama.prototype.stop = function ()
{
	if (this.m_pTimer) {
		window.clearTimeout(this.m_pTimer);
		this.m_pTimer = null;
	}
	
	this.m_iTemps = 0;
}

HC_Diaporama.prototype.afficherItemSuivant = function ()
{
	var iNum = this.m_iNumItem + 1;
	if (iNum >= this.m_iNbItem) iNum = 0;

	this.afficherItem(iNum);
}

HC_Diaporama.prototype.afficherItemPrecedent = function ()
{
	var iNum = this.m_iNumItem - 1;
	if (iNum < 0) iNum = this.m_iNbItem - 1;

	this.afficherItem(iNum);
}

HC_Diaporama.prototype.afficherItem = function (iNum)
{
	this.m_pTimer = null;
	
	// Vérification du numéro
	if (iNum < 0 || iNum >=  this.m_iNbItem)
		return false;
	
	this.m_iNextItem = iNum;
	
	// Vérification du chargement
	if (!this.m_pItems[iNum][2]) {
		return true;
	}
	
	// Affichage de l'image
	this.m_iTempsAnimation = 0;
	$(this.m_pItems[this.m_iNumItem][0]).addClass(this.m_szClassEnCoursActif);
	$(this.m_pItems[this.m_iNextItem][0]).addClass(this.m_szClassEnCoursInactif);
	this.m_fcAnimation(this, this.m_pItems[this.m_iNumItem][0], this.m_pItems[this.m_iNextItem][0], 0, this.m_iTempsTransition);
	
	var iTemps = Math.round(1000 / this.m_iFPS);
	this.m_pFPS = window.setTimeout('HC_Diaporama.prototype.pManager[' + this.m_iRang + '].updateAnimation(' + iTemps + ');', iTemps);
}

HC_Diaporama.prototype.updateAnimation = function (iTemps)
{
	this.m_pFPS = null;

	this.m_iTempsAnimation += iTemps;
	
	if (this.m_iTempsTransition > 0 && this.m_iTempsAnimation >= this.m_iTempsTransition)
		this.m_iTempsAnimation = this.m_iTempsTransition;
	
	this.m_fcAnimation(this, this.m_pItems[this.m_iNumItem][0], this.m_pItems[this.m_iNextItem][0], this.m_iTempsAnimation, this.m_iTempsTransition);
	
	// Fin de l'animation ?
	var bContinuer = true;
	
	if (this.m_iTempsTransition > 0) {
		if (this.m_iTempsAnimation >= this.m_iTempsTransition) {
			// Fin de l'animation
			this.terminerAnimation();
			bContinuer = false;
		}
	}
	
	if (bContinuer) {
		// L'animation continue
		iNextTime = Math.round(1000 / this.m_iFPS);
		if (this.m_iTempsAnimation + iNextTime > this.m_iTempsTransition) {
			iNextTime = this.m_iTempsTransition - this.m_iTempsAnimation;
		} else if (this.m_iTempsAnimation + iNextTime + 10 > this.m_iTempsTransition) {
			iNextTime = this.m_iTempsTransition - this.m_iTempsAnimation;
		}
		
		this.m_pFPS = window.setTimeout('HC_Diaporama.prototype.pManager[' + this.m_iRang + '].updateAnimation(' + iNextTime + ');', iNextTime);
	}
}

HC_Diaporama.prototype.terminerAnimation = function ()
{
	// Fin de l'animation
	if (this.m_pFPS) {
		window.clearTimeout(this.m_pFPS);
		this.m_pFPS = null;
	}
	
	$(this.m_pItems[this.m_iNumItem][0])
		.removeClass(this.m_szClassEnCoursActif)
		.removeClass(this.m_szClassActif)
		.addClass(this.m_szClassInactif);
		
	$(this.m_pItems[this.m_iNextItem][0])
		.removeClass(this.m_szClassEnCoursInactif)
		.removeClass(this.m_szClassInactif)
		.addClass(this.m_szClassActif);
	
	this.m_iNumItem = this.m_iNextItem;
	this.m_iNextItem = -1;
	
	this.m_iTempsAnimation = 0;
	
	// Si automatique, timer
	if (this.m_iTemps > 0)
		this.m_pTimer = window.setTimeout('HC_Diaporama.prototype.pManager[' + this.m_iRang + '].afficherItemSuivant();', this.m_iTemps);
}

/* Modèle d'animation */

HC_Diaporama.prototype.animationFondu = function (pDiapo, pItemActuel, pItemSuivant, iTemps, iTotal)
{
	if (iTemps == 0) { // Début
		$(pItemActuel).css('opacity', 1);
		$(pItemSuivant).css('opacity', 0).css('display', 'block');
	} else if (iTemps == iTotal) { // Fin
		$(pItemActuel).css('opacity', 0).css('display', 'none');
		$(pItemSuivant).css('opacity', 1);
	} else {
		var fDelta = 1 * iTemps / iTotal;
		
		$(pItemActuel).css('opacity', 1 - fDelta);
		$(pItemSuivant).css('opacity', fDelta);
	}
}

HC_Diaporama.prototype.animationTranslation = function (pDiapo, pItemActuel, pItemSuivant, iTemps, iTotal)
{
	var iLargeur = $(pDiapo.m_pConteneurDiapo).width();
	
	if (iTemps == 0) { // Début
		$(pItemSuivant).css('left', iLargeur + 'px');
		$(pItemSuivant).css('display', 'block');
		$(pItemSuivant).css('z-index', '20');
		$(pItemActuel).css('z-index', '10');
	} else if (iTemps == iTotal) { // Fin
		$(pItemActuel).css('display', 'none');
		$(pItemSuivant).css('left', '0px');
	} else {
		var iDelta = Math.round(iLargeur * iTemps / iTotal);
		$(pItemSuivant).css('left', (iLargeur - iDelta) + 'px');
	}
}

// Pour le balayage, forme des éléments : <div><img /></div>
HC_Diaporama.prototype.animationBalayage = function (pDiapo, pItemActuel, pItemSuivant, iTemps, iTotal)
{
	var iLargeur = $(pDiapo.m_pConteneurDiapo).width();
	
	if (iTemps == 0) { // Début
		$(pItemActuel).css('z-index', '10');
		
		$(pItemSuivant)
			.css('left', 'auto')
			.css('right', '0px')
			.css('width', '0px')
			.css('height', '100%')
			.css('overflow', 'hidden')
			.css('display', 'block')
			.css('z-index', '20');
		
		$(pItemSuivant).children('img')
			.css('position', 'absolute')
			.css('right', 0);
	} else if (iTemps == iTotal) { // Fin
		$(pItemActuel).css('display', 'none');
		$(pItemSuivant)
			.css('left', '0px')
			.css('right', 'auto')
			.css('overflow', 'auto')
			.css('width', '100%');
	} else {
		var iDelta = Math.round(iLargeur * iTemps / iTotal);
		$(pItemSuivant).css('width', (iDelta) + 'px');
	}
}