/***********************************************************/
/************************ FONCTIONS ************************/
/***********************************************************/

/**
 * Cette fonction crée un objet avec plusieurs paramètres.
 * Cet objet doit ensuite être ajouté au tableau "ChoixLangueListe" sur lequel seront appliqués les propriètes d'ouverture de la bulle.
 *
 * @param string id l'id CSS de la balise sur laquelle ajouter la propriété
 * @param array langues un tableau multidimentionnel de type [code_langue, url],... ex: ['fr', 'urlfr'], ['nl', 'urlnl']
 * @return objet l'objet créé
 */
function ChoixLanguePays(id, langues) {
	this.id = id;
	this.langue = langues;
}


/**
 * Pour ajouter un sous-choix de langue à un pays il suffit de remplir le tableau ChoixLangueListe.
 * Le détail des paramètres est indiqué dans la fonction @see ChoixLanguePays(...)
 */
var ChoixLangueListe = new Array();
ChoixLangueListe[0] = new ChoixLanguePays('area-be', new Array(['fr','area-wa'],['nl','area-fl']));
ChoixLangueListe[1] = new ChoixLanguePays('area-ch', new Array(['fr','#'],['de','#']));

/**
 * Instanciation de la class ChoixLangue.
 * Parcours du tableau ChoixLangueListe pour ajouter sur chaque element les propriété d'affichages et d'évenement.
 */
function ChoixLangueAjoutePropriete() {

	try {
		var objChoixLangue = new ChoixLangue();
		$('#mapmonde-image').bind('click', function(e) { objChoixLangue.hide(e); });

		jQuery.each(ChoixLangueListe, function() {
			var myBind = this;
			var element = $('#'+this.id);
			element.href = '#';
			element.bind('click', function(e) { objChoixLangue.display(myBind, e); });
			element.css('cursor','pointer');
		});
	}
	catch(ex) { alert(ex); }

}

/*******************************************************/
/************************ CLASS ************************/
/*******************************************************/

function ChoixLangue() {
	this.imageMapId = 'mapmonde-image';
	this.divBulleId = 'langue-bulle';
	this.imageCoords = new Array(19, 28); // La position de la pointe de la bulle pour la centrer sur le pays (ici la pointe est à 18px de la gauche de la div et 29px du haut
	this.item;
}

ChoixLangue.prototype = {

	display: function(item, e) {

		e.stopPropagation();

		if($('#'+this.divBulleId).length > 0) { $('#'+this.divBulleId).remove();	}

		this.item = item;

		var coords = $('#'+this.item.id).get(0).coords;
		var array_coords = coords.split(',');

		var div_bulle = $('<div id="'+this.divBulleId+'"></div>');
		div_bulle.css({
			'left':(array_coords[0]-this.imageCoords[0])+'px', // On soustrais 18px pour centrer la pointe de la bulle sur le rond
			'top':(array_coords[1]-this.imageCoords[1])+'px' // On soustrais 29px pour centrer la pointe de la bulle sur le rond
		});

		var Contenu = '';
		for(var i=0; i<this.item.langue.length;i++) {
			Contenu += '<a href="'+$('#'+this.item.langue[i][1]).attr('href')+'">'+this.item.langue[i][0].toUpperCase()+'</a>';
			if(i < (this.item.langue.length - 1)) Contenu += ' | ';
		}
		div_bulle.html('<p>'+Contenu+'</p>');

		$('#langue').append(div_bulle);
		div_bulle = null; delete(div_bulle);
	},

	hide: function(e) {
		if(jQuery.browser.msie && e.currentTarget.id != this.imageMapId) { return; };
		if($('#'+this.divBulleId).length > 0) $('#'+this.divBulleId).remove();
	}
}