/* ----------------------------------------------------------------------- */
/*      MAP2 - AFFICHAGE DES POINTS ET DES INFORMATIONS EN JAVASCRIPT      */
/* ----------------------------------------------------------------------- */


// Configuration
var conf = { 
			 // identification des noeuds concernés
			 map      :'link', 
			 menu     :'dynamicList', 
			 info     :'dynamicDiv', 
			 container:'data_center_infos_container', 

			 // décalage des points
			 top :5, 
			 left:5, 

			 // style & contents
			 point_style    :'display:none;', 
			 point_content  :' ',
			 highLight_style:'color:#ffbb43;text-decoration:underline;',
			 lessLight_style:'color:#5E676A;text-decoration:none;',

			 // durée des transitions 
			 effect_in :0.0,
			 effect_out:0.0,
};

// définition de variables diverses
var lastArea = lastPosition = false;


/**
 * Masque les informations relatives à un élément de type Area
 *
 * @param DOMElement<Area> Area
 * @return void
 */
function masquer(Area) {
	var myMap  = document.getElementById(conf['map']);
	var myNode = myMap.parentNode;
	myNode.cacherInfos(Area.getPosition());
	if (Area.getAttribute('shape').toUpperCase()=='CIRCLE') {
		myNode.cacherPoints();
	}
	lastArea = false;
}

/**
 * Affiche les informations relatives à un élément de type Area
 *
 * @param DOMElement<Area> Area
 * @return void
 */
function afficher(Area) {
	if (lastArea && lastArea!=Area) {
		masquer(lastArea);
	}
	var myMap  = document.getElementById(conf['map']);
	var myNode = myMap.parentNode;
	if (!myNode.afficherInfos) loadMap2();
	var position = Area.getPosition();
	if (!lastArea || lastArea.getPosition()!=position) {
		myNode.afficherInfos(position);
	}
	if (Area.getAttribute('shape').toUpperCase()=='CIRCLE') {
		var coords = myMap.calcCoords(Area.getAttribute('coords'));
		myNode.afficherPoint(coords[0], coords[1], Area.getAttribute('href'));
	}
	lastArea = Area;
}

/**
 * Déclare l'ensemble des méthodes nécessaires au fonctionnement de l'affichage des
 * points et des informations relatives à la carte. 
 *
 * @return void
 */
function loadMap2() {

	// déclaration des variables
	var myMap  = document.getElementById(conf['map']);
	var myNode = myMap.parentNode;
	var myMenu = document.getElementById(conf['menu']);
	var myLink = myMenu.getElementsByTagName('a');
	var nbLink = myLink.length;
	var Areas  = document.getElementsByTagName('area');
	var nbArea = Areas.length;


	/**
	 * Cacule les coordonnées en fonction du chaine de caractères left,top
	 *
	 * @param string Coordonées (au format left,top[,...])
	 * @return Array coordonnées {0:top, 1:left} dans un tableau
	 */
	myMap.calcCoords = function(crdstr) {
		var curs  = 0;
		var ctop  = cleft = false;
		var top   = left  = '';
		while(!ctop || !cleft) {
			var char = crdstr.charAt(curs);
			if (char && char!=',') {
				if (!cleft)         left = left+char;
				if (cleft && !ctop) top  = top+char;
			} else {
				if (!cleft) {
					cleft = left;
				} else {
					if (!ctop) ctop = top;
				}
			}
			++curs;
		}
		return new Array(ctop, cleft);
	};
	
	/**
	 * Retourne les coordonnées d'un point en fonction de l'url
	 * (utilise les données de l'image mappée)
	 *
	 * @param alink
	 * @return Array coordonnées {0:top, 1:left} dans un tableau
	 */
	myMap.getCoordsByHref = function(alink) {
		var areas   = myMap.getElementsByTagName('area');
		var nbAreas = areas.length;
		var crdstr  = false;
		for (var i=0; i<nbAreas; ++i) {
			if (areas[i].getAttribute('shape').toUpperCase()=='CIRCLE' 
			&&  areas[i].getAttribute('href')==alink) {
				crdstr = areas[i].getAttribute('coords');
			}
		}
		return (crdstr) ? myMap.calcCoords(crdstr) : false;
	};

	/**
	 * Afficher un point
	 *
	 * @param integer top
	 * @param integer left
	 * @param string href
	 * @return void
	 */
	myNode.afficherPoint = function(top, left, href) {
		var ntop    = top  - conf['top'];
		var nleft   = left - conf['left'];
		var myPoint = document.getElementById('myPoint');
		if (!myPoint) {
			if (href!='') {
				myPoint = document.createElement('a');
				myPoint.setAttribute('href', href);
			} else {
				myPoint = document.createElement('div');
			}
			myPoint.setAttribute('id', 'myPoint');
			document.getElementById('points').appendChild(myPoint);
			myPoint.innerHTML = conf['point_content'];
		} else {
			if (href!='') {
				myPoint.setAttribute('href', href);
			} 
		}
		myPoint.setAttribute('style', conf['point_style']);
		myPoint.style.top  = ntop  + 'px';
		myPoint.style.left = nleft + 'px';
		//Effect.Appear('myPoint', { duration: conf['effect_in'] });
		document.getElementById('myPoint').style.display = 'block';
	};

	/**
	 * Cacher les points affichés
	 *
	 * @return void
	 */
	myNode.cacherPoints = function() {
		//Effect.Fade('myPoint', { duration: conf['effect_out'] });
		document.getElementById('myPoint').style.display = 'block';
	};

	/**
	 * afficher le cadre d'information enregistré à la position passé 
	 * en paramètre dans le noeud contenant tous les cadres d'informations.
	 * 
	 * @param integer position
	 * @return void
	 */
	myNode.afficherInfos = function(position) {
		if (lastPosition) {
			myLink[lastPosition].lessLight();
			Effect.Fade('infos-'+lastPosition, { duration: conf['effect_out'] });
		}
		lastPosition = position;
		var infoDivs = document.getElementById(conf['info']).getElementsByTagName('div');
		var j=0;
		for (var i=0; i<infoDivs.length; ++i) {
			if (infoDivs[i].className==conf['container']) {
				if (j==position) {
					var info = infoDivs[i];
				}
				++j;
			}
		}
		if (info.getAttribute('id')!='infos-'+position) {
			info.setAttribute('id', 'infos-'+position);
		}
		Effect.BlindDown('infos-'+position, { duration: conf['effect_in'] });
		myLink[position].highLight();
	};

	/**
	 * Cache les cadres d'informations sélectionnés
	 *
	 * @param integer position Position du cadre à cacher 
	 * @return void
	 */
	myNode.cacherInfos = function(position) {
		myLink[position].lessLight();
		Effect.BlindUp('infos-'+position, { duration: conf['effect_out'] });
	};

	// pour chacun des liens du menu
	for (var i=0; i<nbLink; ++i) {

		/**
		 * Donne la position du lien dans le menu associé a cet élément
		 * 
		 * @return integer
		 */
		myLink[i].getPosition = function() {
			var list = this.parentNode.parentNode.getElementsByTagName('li');
			var r;
			for(var i=0; i<list.length; ++i) {
				if (list[i]==this.parentNode) {
					r = i;
				}
			}
			return r;
		};

		/**
		 * onMouseOver sur le lien
		 * lorsque passe sur un lien du menu, un point s'affiche sur la carte aux
		 * coordonnées correspondantes et le cadre d'information pour l'item apparait
		 *
		 * @return void
		 */
		myLink[i].onmouseover = function () {
			// var coords = myMap.calcCoords(this.getAttribute('rel'));
			var coords = myMap.getCoordsByHref(this.getAttribute('href'));
			if (coords!=false) {
				myNode.afficherPoint(coords[0], coords[1], this.getAttribute('href'));
			}
			myNode.afficherInfos(this.getPosition());
		};

		/**
		 * onMouseOut sur le lien
		 * lorsque l'on ne suvole plus un lien du menu, le point s'efface de la carte
		 * et le cadre d'information disparait
		 *
		 * @return void
		 */
		myLink[i].onmouseout = function () {
			var coords = myMap.getCoordsByHref(this.getAttribute('href'));
			if (coords!=false) {
				myNode.cacherPoints();
			}
			myNode.cacherInfos(this.getPosition());
		};

		/**
		 * Marque le lien comme actif
		 * revient à appliquer le style 'highLight_style' défini dans la configuration 
		 * sur le lien 
		 *
		 * @return void
		 */
		myLink[i].highLight = function() {
			this.className = 'ahover';
			this.setAttribute('style', conf['highLight_style']);
		}

		/**
		 * Marque le lien comme innactif
		 * revient à appliquer le style 'lessLight_style' défini dans la configuration 
		 * sur le lien
		 *
		 * @return void
		 */
		myLink[i].lessLight = function() {
			this.className = '';
			this.setAttribute('style', conf['lessLight_style']);
		}

	} // fin du parcours du menu

	// pour chaques area de l'image mappée
	for (var i=0; i<nbArea; ++i) {
		var area = Areas[i];

		/**
		 * Donne la position de l'item correspondant dans le menu
		 *
		 * @return integer
		 */
		area.getPosition = function() {
			list = myMenu.getElementsByTagName('a');
			var r;
			for (var i=0; i<list.length; ++i) {
				if (list[i].getAttribute('href')==this.getAttribute('href')) {
					r = i;
				}
			}
			return r;
		};

		/*
		Remplacé par les fonctions afficher() et masquer() à cause d'Internet Explorer
		qui ne comprennait pas les lignes suivantes :

		if (area.getAttribute('shape').toUpperCase()=='CIRCLE') {
			
			/**
			 * Affiche les informations (point et cadre) relative a un Area de la carte
			 *
			 * @return void
			 *
			area.onmouseover = function() {
				if (lastArea && lastArea!=this) {
					masquer(lastArea);
				}
				if (lastArea!=this) {
					myNode.afficherInfos(this.getPosition());
					if (this.getAttribute('shape').toUpperCase()=='CIRCLE') {
						var coords = myMap.calcCoords(this.getAttribute('coords'));
						myNode.afficherPoint(coords[0], coords[1], this.getAttribute('href'));
					}
				}
				lastArea = this;
			};

			/** 
			 * Cache les informations (point et cadre) relative a un Area de la carte 
			 * déjà affichées 
			 *
			 * @return void
			 *
			area.onmouseout = function() {
				myNode.cacherInfos(Area.getPosition());
				if (this.getAttribute('shape').toUpperCase()=='CIRCLE') {
					myNode.cacherPoints();
				}
				lastArea = false;
			};

		}
		*/

	} // fin du parcours de l'image mappée

} // fin loadMap2();


/* lorsque l'arbre est chargé, on peu déclarer toutes les méthodes :
 *
 * Parfois, aves Internet Explorer il est possible que cet évènement 
 * ne se déclenche pas. Dans ce cas, le chargement devra se faire 
 * tout seul un peut plus tard. 
 * 
 * C'est pourquoi nous avons tout réuni au sein de la fonction 
 * 'loadMap2()'. Voir par exemple la fonction 'afficher'.
 * 
 * /!\ Attention : cette méthode utilise implicitement Prototype.
 * Il serait également possible d'écrire par exemple : 
 * document.onload = function() { loadMap2(); };
 * Ou toute autre instruction similaire.
 */
document.observe('dom:loaded', function() {
	loadMap2();
});