/*
Scripts permettant d'afficher la carte des campings correctement et de gérer les rollovers intéractifs
entre les images du camping et son icône sur la carte.
 */

/* Variables et configuration */

// Tableau des campings
$t_campings = new Array(
	Array('Le Bas Larin***','bas-larin/index.htm', '../img/com/carte2/camping1.gif', 73, 336), // 1
	Array('L\'Oasis***','oasis/index.htm', '../img/com/carte2/camping2.gif', 156, 368), // 2
	Array('Iserand***','iserand/index.htm', '../img/com/carte2/camping3.gif', 206, 369), // 3
	Array('Le Castelet***','castelet/index.htm', '../img/com/carte2/camping4.gif', 231, 376), // 4
	Array('Le Retourtour***','retourtour/index.htm', '../img/com/carte2/camping5.gif', 330, 248), // 5
	Array('Le Soleil rouge**','soleil_rouge/index.htm', '../img/com/carte2/camping6.gif', 332, 208), // 6
	Array('Les Roches***','les-roches/index.htm', '../img/com/carte2/camping7.gif', 315, 299), // 7
	Array('Le Manoir***','manoir/index.htm', '../img/com/carte2/camping8.gif', 263, 372), // 8
	Array('Les Foulons**','foulons/index.htm', '../img/com/carte2/camping9.gif', 265, 382), // 9
	Array('Les Acacias***','acacias/index.htm', '../img/com/carte2/camping10.gif', 259, 396) // 10
);

/* Fonctions globales */

/* Générer un nombre aléatoire 1, -1 ou 0
 */
function rand() {
	var dt = new Date();
	return ((1000*Math.random()+dt.getTime())%3 - 1);
}
/* Mélanger un tableau, grâce à la fonction rand()
 */
function shuffle() {
	return this.sort(function() { return rand();} );
}
Array.prototype.shuffle = shuffle; // On affecte la méthode shuffle à l'objet tableau

/* Changer l'image en background CSS d'un élément du HTML
 * $element : element HTML duquel on veut changer le BG
 * $background : doit être du type "url(images/image.jpg)"
 */
function changeCssBackground($element, $background){
	$element.style.backgroundImage = $background;
}


// ------------------------------------------------------------------------------------------
/* Fonctions spécifiques à Ardèche Verte */

/* Changer le background du div en cours et du div correspondant à celui-ci
 * Quand la souris passe sur l'élement
 * La fonction récupère le numéro après le "-" de l'ID, et affecte un nouveau background aux deux éléments liés.
 */
function bgMouseOver($element){
	var $camping = getCamping($element.id);
	var $picto = getPicto($element.id);
	var $libelle = getLibelle($element.id);
	changeCssBackground($camping, "url(../img/com/carte2/camping_on.gif)");
	$picto.getElementsByTagName('a')[0].style.visibility = 'visible';
	$libelle.style.color = '#fff';
}

/* Changer le background du div en cours et du div correspondant à celui-ci
 * Idem, mais quand la souris sors de l'élement
 */
function bgMouseOut($element){
	var $camping = getCamping($element.id);
	var $picto = getPicto($element.id);
	var $libelle = getLibelle($element.id);
	changeCssBackground($camping, "url(../img/com/carte2/camping_off.gif)");
	$picto.getElementsByTagName('a')[0].style.visibility = 'hidden';
	$libelle.style.color = '#000';
}

/* Récupérer l'élément "camping" HTML correspondant au numéro de l'ID
 */
function getCamping($str){
	var $splitNum = $str.split('-');
	if(document.getElementById('camping-' + $splitNum[1])){
		return document.getElementById('camping-' + $splitNum[1]);
	}else{
		return false;
	}
}
/* Récupérer l'élément "picto" HTML correspondant au numéro de l'ID
 */
function getPicto($str){
	var $splitNum = $str.split('-');
	if(document.getElementById('picto-' + $splitNum[1])){
		return document.getElementById('picto-' + $splitNum[1]);
	}else{
		return false;
	}
}
/* Récupérer l'élément "libelle" HTML correspondant au numéro de l'ID
 */
function getLibelle($str){
	var $splitNum = $str.split('-');
	if(document.getElementById('libelle-' + $splitNum[1])){
		return document.getElementById('libelle-' + $splitNum[1]);
	}else{
		return false;
	}
}

/* Changer le HTML d'un élément "camping"
 */
function changeCampingHTML($element, $numero, $imgsrc, $label, $link){
	var $html = "\r\n"+'<a href="'+ $link +'" title="'+ $label +'"><img src="'+ $imgsrc +'" alt="'+ $label +'" /><span class="libelle" id="libelle-'+$numero+'">'+ $label +'</span></a>';
	//
	changePictoHTML(getPicto($element.id), $numero, $label, $link);
	$element.innerHTML = $html;
}

/* Changer le HTML d'un élément "picto"
 */
function changePictoHTML($element, $numero, $label, $link){
	var $html = "\r\n"+'<a href="'+$link+'" title="'+$label+'">&bull;</a>';
	//
	$element.innerHTML = $html;
}

/* Lancer cette fonction sur le onload de la page qui affiche la liste des campings
 */
function campingListe(){
	$t_campings.shuffle(); // Mélange du tableau de campings
	$t_campings.reverse(); // On inverse
	$t_campings.shuffle(); // Et on re-mélange, pour que ça soit bien mélangé
	// Affichage des campings
	for(i=0;i<$t_campings.length;i++){
		changeCampingHTML(document.getElementById('camping-'+(i+1)), (i+1), $t_campings[i][2], $t_campings[i][0], $t_campings[i][1]);
		$elementPicto = document.getElementById('picto-'+(i+1));
		$elementPicto.style.top = ($t_campings[i][3])+'px';
		$elementPicto.style.left = (162+$t_campings[i][4])+'px';
	}
}