POSMOUSE - AFFICHAGE DES COORDONNÉES DE LA SOURIS, TAILLE DE LA FENÊTRE ET MESSAGE

// Déclaration des variables globales
// Tableau associatif qui contiendra les résultats des calculs
var posMouse = {'xWindow':0, 'yWindow':0, 'wWindow':0, 'hWindow':0, 'xPage':0, 'yPage':0, 'wPage':0, 'hPage':0, 'message':""};

var objDivPosMouse; 					// Objet div contenant les coordonnées

_optionViewPosMouse     = true; 		// Type d'affichage de la div des coordonnées
_displayPosMouse        = true; 		// Affichage ou non de la div des coordonnées
_displayStatBarPosMouse = false;		// Affichage des coordonnées dans la barre de statut (IE)

_statutBarCleared       = true			// Flag pour définir si le statut barre est déjà effacé

var ie = document.all ? true : false;	// Détection du navigateur IE

// Récupération des valeurs dans le tableau associatif posMouse
function getPosMouse(e)	{

	if (!e) { e = window.event; }
	
	// Coordonnées de la souris dans la fenêtre (window),
	// quelque soit la position de l'ascenseur 
	if (e.x != null && e.y != null) {
		posMouse.xWindow = e.x;
		posMouse.yWindow = e.y;
	}

	if (e.clientX != null && e.clientY != null) {
		posMouse.xWindow = e.clientX;
		posMouse.yWindow = e.clientY;
	}
	
	// Coordonnées de la souris dans la page,
	// avec calcul de la position de l'ascenseur 	
	if (e.pageX || e.pageY) {
		posMouse.xPage = e.pageX;
		posMouse.yPage = e.pageY;
	}
	 
	if (e.clientX || e.clientY) {
		posMouse.xPage = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		posMouse.yPage = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
	}
	
	// Taille de la fenêtre
	getClientSize();
	
	// Taille de la page
	posMouse.wPage   = document.body.offsetWidth;
	posMouse.hPage   = document.body.offsetHeight;
}


function getClientSize(){

	// Netscape ou Firefox
	if (typeof window.innerWidth == 'number') {
		posMouse.wWindow = window.innerWidth;
		posMouse.hWindow = window.innerHeight;
	} 
	// IE avec DTD valide
	else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		posMouse.wWindow = document.documentElement.clientWidth;
		posMouse.hWindow = document.documentElement.clientHeight;
	}
	// IE avec DTD non valide
	else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
		posMouse.wWindow = document.body.clientWidth;
		posMouse.hWindow = document.body.clientHeight;
	}
	// Sinon
	else {
		posMouse.wWindow = -1;
		posMouse.hWindow = -1;
	}  
}
	
// Affichage à l'écran des coordonnées de la souris
function showPosMouse(e) {
	var xDiv = 0, yDiv = 0, wDiv = 0, hDiv = 0, message = "";
	
	// Création de la div qui contiendra les données	
	var objDiv = createDivPosMouse("divPosMouse");
	objDivPosMouse = objDiv;
	
	// Récupération des coordonnées de la souris
	getPosMouse(e);
	
	// Ecriture dans la barre de statut (IE)
	if (_displayStatBarPosMouse) {
		if (posMouse.message != "") {message = "     " + posMouse.message};
		window.defaultStatus = "Window: X = " + posMouse.xWindow
							+ "   Y = "    + posMouse.yWindow
							+ "   L = "    + posMouse.wWindow
							+ "   H = "    + posMouse.hWindow
							+ "     -     Page: X = " + posMouse.xPage
							+ "   Y = "    + posMouse.yPage
							+ "   L = "    + posMouse.wPage
							+ "   H = "    + posMouse.hPage
							+ message;
		_statutBarCleared = false;
	}
	else { 
		if (!_statutBarCleared) {
			window.defaultStatus = "";
			_statutBarCleared = true;
		}
	}
	
	// Différents tests pour vérifier si on affiche ou non les coordonnées
	if (_displayPosMouse) {
		objDiv.style.display = "block";
	}
	else {
		objDiv.style.display = "none";
		return;
	}
	
	// Ecriture dans une div qui suit la souris
	if (posMouse.message != "") {message = "<br />" + posMouse.message};	
	objDiv.innerHTML = "Window: X = " + posMouse.xWindow
					+ " Y = "      + posMouse.yWindow
					+ " L = "      + posMouse.wWindow
					+ " H = "      + posMouse.hWindow
					+ "<br />"
					+ "Page: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X = " + posMouse.xPage
					+ " Y = "      + posMouse.yPage
					+ " L = "      + posMouse.wPage
					+ " H = "      + posMouse.hPage
					+ message;	

	// Largeur et hauteur de la div (pour éviter les dépassements d'écran)
	wDiv = parseInt(objDiv.offsetWidth, 10) + 2;
	hDiv = parseInt(objDiv.offsetHeight, 10);
	
	// Calcul des coordonnées X et Y de la div
	
	// Décalage de l'affichage par rapport à la souris
	var offsetX = 10, offsetY = 10 ;
	xDiv = posMouse.xPage + offsetX;	
	yDiv = posMouse.yPage + offsetY;
	
	if (_optionViewPosMouse) {
		// La div tourne autour de la souris en fonction de sa position sur l'écran
		if (posMouse.xWindow > (posMouse.wWindow / 2)) {
			xDiv = posMouse.xPage - wDiv - offsetX; 
		}
		if (posMouse.xWindow >= posMouse.wPage) {
			xDiv = posMouse.wpage - wDiv;
		}
		
		if (posMouse.yWindow > posMouse.hWindow / 2) {
			yDiv = posMouse.yPage - hDiv - offsetY;
			
		}		
		if (posMouse.yWindow >= posMouse.hWindow - 20) {
			yDiv = posMouse.hpage - hDiv - 0;
		}
	}
	else {
		// La div reste en bas à droite de la souris mais ne sort pas de l'écran
		var wMax = posMouse.wWindow - 20; // On supprime éventuellement le scrollbar vertical
		var hMax = posMouse.hWindow - 20; // On supprime éventuellement le scrollbar horizontal
		if (posMouse.xWindow + wDiv + offsetX > wMax) {
			xDiv = posMouse.xPage - (posMouse.xWindow + wDiv - wMax);
		}
		if (posMouse.yWindow + hDiv + offsetY > hMax) {
			yDiv -= (posMouse.yWindow + hDiv - hMax + offsetY);
		}	
	}
	
	if (xDiv < 0) { xDiv = 0 };
	if (yDiv < 0) { yDiv = 0 };
	
	// Positionnement de la div en X et Y
	objDiv.style.left = xDiv + "px";
	objDiv.style.top  = yDiv + "px";	
}

// Création de la div affichant les coordonnées de la sousis
function createDivPosMouse(idDiv) {
	if (document.getElementById(idDiv) == null) {
		var objDiv = document.createElement('div');
		objDiv.setAttribute('id', idDiv);		
		document.body.appendChild(objDiv);
		
		objDiv.style.display    = "none";
		objDiv.style.left       = "0px";
		objDiv.style.top        = "0px";
		
		// A définir en CSS par l'utilisateur
		//objDiv.style.position   = "absolute" ;
		//objDiv.style.margin     = "0";
		//objDiv.style.padding    = "2px 10px 2px 10px"; /* top right bottom left */		
		//objDiv.style.width      = "300px";
		//objDiv.style.background = "black";
		//objDiv.style.color      = "white";		
		//objDiv.style.border     = "#FF0000 1px solid";
		//objDiv.style.textAlign  = "left";
		//objDiv.style.fontSize   = "12px";
		//objDiv.style.fontWeight = "bold";
		//objDiv.style.zIndex     = "1000";
	}
	return document.getElementById(idDiv);
}

// Swap entre les 2 types d'affichage de la div des coordonnées si pas de paramètre ou forçage (true ou flase)
function swapViewPosMouse(_option) {
	_optionViewPosMouse = (typeof _option != 'undefined') ? _option : !_optionViewPosMouse;
}

// Swap entre l'affichage des coordonnées si pas de paramètre ou forçage (true ou flase)
function displayPosMouse(_option) {
	_displayPosMouse = (typeof _option != 'undefined') ? _option : !_displayPosMouse;
}

// Swap entre l'affichage des coordonnées dans la barre de statut si pas de paramètre ou forçage (true ou flase)
function displayStatBarPosMouse(_option) {
	_displayStatBarPosMouse = (typeof _option != 'undefined') ? _option : !_displayStatBarPosMouse;
}

// Swap entre la position abolute ou static de la div si pas de paramètre ou forçage (true ou flase)
function absolutePosMouse(_option) {
	if (typeof _option != 'undefined') {
		objDivPosMouse.style.position = _option ? "absolute" : "static";
	}	
	else
	{
		objDivPosMouse.style.position = (objDivPosMouse.style.position == "absolute" || objDivPosMouse.style.position == "") ? "static" : "absolute";
	}	
}

// Affichage d'un message dans la div après les coordonnées de la souris
// (utile en phase de test pour éviter les alert() qui bloquent le déroulement)
function setMessagePosMouse(message) { posMouse.message = message; }