/*
	ElementDeplacable v1.0 - objet-element-deplacable.js
	DHTML - objet faisant apparaître un élément et permettant de le déplacer par glisser-déposer
	Documentation : http://francois-delegue.fr/developpement-web/dhtml-objet-element-deplacable.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 ElementDeplacable (idElement, fading, distanceCurseurX, distanceCurseurY, positionX, positionY)
{
// navigateurs récents seulement
	if (!document.getElementById || !document.createTextNode) { return }	

// propriété via paramètres
	this.idElement = idElement;

// variables
	var o = document.getElementById(this.idElement);	// référence à l'objet créé
	var posSourisX;	// référencera la méthode donnant la position x
	var posSourisY;	// et y
	// augmenter la valeur de VITESSE_FADING pour ralentir les fadings in et out
	var VITESSE_FADING = 2;	// IE ne permet pas "const"
	var style;

// propriétés via paramètres
	this.fading	 = fading || 0;	// fading non appliqué par défaut
	// distances X et Y au curseur à 0px par défaut
	Math.abs (distanceCurseurX) ? this.distanceCurseurX = distanceCurseurX : this.distanceCurseurX = 0;
	Math.abs (distanceCurseurY) ? this.distanceCurseurY = distanceCurseurY : this.distanceCurseurY = 0;
	// coordonnées d'affichage indiquées ou non ?
	positionX >= 0 ? this.positionX = positionX : this.positionX = -1;
	positionY >= 0 ? this.positionY = positionY : this.positionY = -1;
	// on met les distances au curseur à 0 si une positin d'affichage est indiquée
	if(this.positionX >= 0 || this.positionY >= 0)
	{
		this.distanceCurseurX = 0;
		this.distanceCurseurY = 0;
	}

// propriété additionnelle
	this.on = false;

// style
	style = document.getElementById(this.idElement).style;
	style.display = "none";
	style.position = "absolute";

// gestionnaires d'événements
	document.getElementById(this.idElement).onmousedown = appuiSouris;
	document.getElementById(this.idElement).onmouseup = lacherSouris;
	document.getElementById(this.idElement).onmouseout = lacherSouris;
	document.getElementById(this.idElement).onclick = null;
	document.getElementById(this.idElement).ondblclick = null;

// initialisation du déplacement
	o.posCurseurX = 0;
	o.posCurseurY = 0;
	o.clickEnCours = false;

// 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;	
	}

	this.positionner = positionner;

// 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;
	}


	function afficher (e)
	{
		if (!this.on)
		{
			if (this.positionX >= 0 && this.positionY >= 0)
			{
				style.left = this.positionX + this.distanceCurseurX + "px";
				style.top = this.positionY + this.distanceCurseurY + "px";
			}
			else
			{
				this.positionner (posSourisX(e), posSourisY(e));
			}
	
			this.on = true;
			style.display = "block";
		}
	}
	
	function fadeIn (e)
	{
		if (!this.on)
		{
			var tempo = 1;
			var i = 0;
			var t = null;
			
			this.on = true;	
	
			if (this.positionX >= 0 && this.positionY >= 0)
			{
				style.left = this.positionX + this.distanceCurseurX + "px";
				style.top = this.positionY + this.distanceCurseurY + "px";
			}
			else
			{
				this.positionner (posSourisX(e), posSourisY(e));
			}
	
			for (i=1; i<=100; i++)
			{				
				t = setTimeout ("document.getElementById('"+this.idElement+"').style.opacity="+i/100+";document.getElementById('"+this.idElement+"').style.filter='alpha(Opacity="+ i +")';", tempo * VITESSE_FADING);
				tempo ++;
				if (i == 100)
				{	
					clearTimeout(t);
				}			
			}
		}
		// éviter un clignotement lors du 1er affichage dans IE
		setTimeout ("document.getElementById('"+this.idElement+"').style.display = 'block'", 10);
	}

	function masquer ()
	{
		if (this.on)
		{
			style.display = "none";
			this.on = false;
		}
	}
	
	function fadeOut ()
	{
		if (this.on)
		{
			var tempo = 1;
			var i = 0;
			var t = null;
	
			for (i=100; i>=0; i--)
			{
				t = setTimeout ("document.getElementById('"+this.idElement+"').style.opacity="+i/100+";document.getElementById('"+this.idElement+"').style.filter='alpha(Opacity="+ i +")';", tempo * VITESSE_FADING);
				tempo++;
				if (i == 0)
				{
					clearTimeout(t);
					this.on = false;			
				}
			}
		}
	}

// méthodes privées
	function positionner (x, y)
	{		
		style.top = (y + this.distanceCurseurY) + "px";
		style.left = (x + this.distanceCurseurX) + "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;
	}

	function appuiSouris (e)
	{
		o.clickEnCours = true;		
		o.posCurseurX = posSourisX(e) - parseInt (o.style.left);
		o.posCurseurY = posSourisY(e) - parseInt (o.style.top);
		o.style.cursor = "move";
		o.onmousemove = mvtSouris;
		return false;
	}
	
	function lacherSouris ()
	{
		o.clickEnCours = false;
		o.onmousemove = null;
		o.style.cursor = "default";
		return false;
	}
	
	function mvtSouris (e)
	{
		if (o.clickEnCours == true)
		{
			o.style.left = posSourisX(e) - o.posCurseurX + "px";
			o.style.top  = posSourisY(e) - o.posCurseurY + "px";
		}

		return false;
	}
}