/*
	ApparitionImage v1.0 - objet-apparition-image-modified.js
	// version modifiée pour les images ombrées des sites réalisés,
	// où l'image est ajoutée directement dans la div créée, non en background
	// voir dans initImage ()
	// attention, hard coding !
	DHTML - objet faisant apparaître une image près du curseur de la souris
	Documentation : http://francois-delegue.fr/developpement-web/dhtml-objet-apparition-image.php

	Copyright 2008 François Delègue
	License CC-GNU GPL - Creative Commons et Licence Publique Générale GNU
	Informations http://creativecommons.org/licenses/GPL/2.0/deed.fr
*/

function ApparitionImage (urlImage, fading, classeImage, legende, classeLegende, distanceCurseurX, distanceCurseurY)
{
// navigateurs récents seulement
	if (!document.getElementById || !document.createTextNode) { return }	

// variables
	var posSourisX, posSourisY;
	var VITESSE_FADING = 2;	// augmenter la valeur de VITESSE_FADING pour ralentir les fadings in et out
	var fadedIn		= false;
	var fadedOut	= false;	
	var divID		= "id" + Math.round(Math.abs(Math.random()*10000000));	// id aléatoire
	var style;

// propriétés via paramètres
	this.url			= urlImage;
	this.fading		= fading || 0;		// fading non appliqué par défaut
	this.classeI	= classeImage || "";
	this.distX		= (distanceCurseurX || undefined) || 10;	// distances X et Y au curseur de 10 par défaut
	this.distY		= (distanceCurseurY || undefined) || 10;

	this.legende	= legende || "";
	this.classeL	= classeLegende || "";

// switch méthodes utilisées avec ou sans fading
	if (this.fading == 1 || this.fading == true)
	{
		this.afficher	= fadeIn;
		this.masquer	= fadeOut;	
	}
	else
	{
		this.afficher	= afficher;
		this.masquer	= masquer;	
	}

// switch méthodes donnant la position de la souris
	if (document.createEvent)	// DOM
	{
		posSourisX = domPosX;
		posSourisY = domPosY;
	}	
	else if (document.fireEvent)	// IE
	{
		posSourisX = iePosX;
		posSourisY = iePosY;
	}

// 
	this.positionner = positionner;

// ajout de l'image, on attend qu'elle soit chargée pour l'initialiser
	// vars de communication des propriétés à initImage ()
	var ci = this.classeI, cl = this.classeL, l = this.legende, u = this.url ;
	var preloadImg = new Image ();
	preloadImg.onload = initImage;	
	preloadImg.src = this.url;

	function afficher (e)
	{
		this.positionner (posSourisX(e), posSourisY(e));
		style.display = "block";
	}

	function masquer ()
	{
		style.display = "none";
	}

	function fadeIn (e)
	{
		this.positionner (posSourisX(e), posSourisY(e));

		if (fadedIn == false)
		{		
			fadedIn = true;
			var tempo = 1;
			var i = 0;
			var t = null;
			var f = null;
	
			for (i=1; i<=100; i++)
			{				
				t = setTimeout ("document.getElementById('"+divID+"').style.opacity="+i/100+";document.getElementById('"+divID+"').style.filter='alpha(Opacity="+ i +")';", tempo * VITESSE_FADING);
				
				//f = function () {this.style.opacity=i/100;this.style.filter='alpha(Opacity='+ i +')'};
				//t = setTimeout (f, tempo * VITESSE_FADING);

				tempo ++;
			}

			clearTimeout(t);
			// éviter clignotement
			t = setTimeout ("document.getElementById('"+divID+"').style.display='block'", 10);		
		}
	}

	function fadeOut ()
	{
		fadedOut = true;
		var tempo = 1;
		var i = 0;
		var t = null;

		for (i=100; i>=0; i--)
		{
			t = setTimeout ("document.getElementById('"+divID+"').style.opacity="+i/100+";document.getElementById('"+divID+"').style.filter='alpha(Opacity="+ i +")';", tempo * VITESSE_FADING);

			tempo++;
		}

		clearTimeout(t);
		fadedIn = false;
	}

// méthodes privées
	function initImage ()
	{
		// ajout conteneur
		var div = document.createElement('div');
		div.setAttribute ('id', divID);
		div.style.display = 'none';
		div.style.position = 'absolute';
		// modification p/r à la classe originale : taille des marges blanches contenant l'ombrage
		div.style.padding = "20px"; 
		div.style.textAlign = 'left';	// sinon bizarreries IE
		document.getElementsByTagName('body')[0].appendChild(div);
		style = document.getElementById(divID).style;	// réf. au style de la div
	
		div.setAttribute ('class', ci);
		div.setAttribute ('className', ci);	// IE

		// ajout image
		// modification p/r à la classe originale :
		var i = document.createElement('img');
		div.appendChild(i);
		i.setAttribute ('src', u);
		i.setAttribute ('height', preloadImg.height);
		i.setAttribute ('width', preloadImg.width);

		// ajout légende
		if (l)
		{
			div = document.createElement('div');
			div.setAttribute ('class', cl);
			div.setAttribute ('className', cl);	// IE
			div.innerHTML = l;
			document.getElementById(divID).appendChild(div);
		}
	}

	function positionner (x, y)
	{		
		style.top = (y + this.distY) + "px";
		style.left = (x + this.distX) + "px";
	}

	function domPosX (e)
	{
		return e.pageX;
	}

	function domPosY (e)
	{
		return e.pageY;
	}
	
	function iePosX ()
	{
		return window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
	}
	
	function iePosY ()
	{
		return window.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
}