// données prélancement à portée globale
var image_affiche = new Array(10);

//fonction de pré-lancement multitâche
function pre_lancement_couleurs(name_ch,couleur_defaut) {
	
	// préchargement de l'image
	var imgs = new Array('generateur-bannieres/images/liste-couleurs.png');
	for( var i = 0 ; i < imgs.length ; i++ )
	{
		var tmp = imgs[ i ];
		(imgs[ i ] = new Image()).src = tmp;
	}
	
	// modification des variables à portée globale
	image_affiche[name_ch] = false;
	
	// on simplifie le nom du DIV
	div_origine = document.getElementById('couleur_div-' + name_ch);
	
	// on récupère la couleur par défaut
	couleur_defaut = (couleur_defaut != '') ? couleur_defaut : '#FFFFFF';
	
	// on prépare le HTML
	html_to_insert = '<div  id="prevCouleur-' + name_ch + '" style="border:1px solid #dedede; display:inline;">';
	html_to_insert += '<a href="javascript: image_map_couleur(\'' + name_ch + '\');">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>';
	html_to_insert += '</div>';	
	html_to_insert += '&nbsp;<input value="' + couleur_defaut + '" name="' + name_ch + '" id="' + name_ch + '" type="text" size="5" maxlength="7" onfocus="image_map_couleur(\'' + name_ch + '\')" onblur="image_map_couleur(\'' + name_ch + '\')" />';
	html_to_insert += '&nbsp;<a href="javascript: image_map_couleur(\'' + name_ch + '\');">Choisir une couleur</a>';	
	html_to_insert += '<div  onmousemove="movemouse(event);" style="display: inline;">';
	html_to_insert += '<div  onmousedown="move(document.getElementById(\'imageAff-' + name_ch + '\'), event);" style="visibility:hidden; position:absolute; border: 1px navy dashed; background: #CCDFFF; padding: 5px;" id="imageAff-' + name_ch + '">';	
	html_to_insert += '<a href="#couleur" onclick="image_map_couleur(\'' + name_ch + '\');">Fermer cette fenêtre</a> <a href="#couleur" onclick="image_map_couleur(\'' + name_ch + '\');"><img src="generateur-bannieres/images/icone-fermeture-fenetre.png" alt="icone fermeture couleur" style="border:none;" /></a>';
	html_to_insert += '<br /><br />';
	html_to_insert += '<img src="generateur-bannieres/images/liste-couleurs.png" usemap="#couleur_map-' +name_ch+ '" alt="couleurs" style="border:none;" />';
	html_to_insert += '</div>';
	html_to_insert += '</div>';
	
	// on l'insert
	div_origine.innerHTML = html_to_insert;
	
	// on lance la prévisualisation en directe
	prev_couleur(name_ch);
	
	// affichage de la map
	map_couleur(name_ch);
}

// fonction d'affichage des couleurs possibles (image mappée) et map
function image_map_couleur(name_ch) {
	
	// affichage de l'image
	if(image_affiche[name_ch] == false)
	{
		document.getElementById('imageAff-' + name_ch).style.visibility = 'visible';
	}
	else
	{
		document.getElementById('imageAff-' + name_ch).style.visibility = 'hidden';
	}
	image_affiche[name_ch] = (image_affiche[name_ch] == false) ? true : false;
}

// affichage de la map
function map_couleur(name_ch) {

// on définie la liste des couleurs
var listeCouleurs = new Array(
		new Array('ffffff','fffcb4','fff959','ffde03','f6be27','f0a23d','e08510','cd6c0d','ff6600','ff3c00','ee0707','a71e1e','711717','460f0f','cb783c','8c5127','653615','482309'),
		new Array('ffffff','ffe4ee','fbb0cc','f987b1','e74e86','e42c6f','e10153','b60c4a','98083d','feb3e3','ed88c9','d760ad','e344ab','e719cc','bf10a8','9d0c8a','730b65','540449'),
		new Array('ffffff','d5fafd','8ff0f8','43dfec','02bece','169ca7','0a7e88','b1d2fb','87b9f8','6698d6','4480cb','2263b5','0d4790','06346d','092c57','243edf','0b20a0','051470'),
		new Array('ffffff','e7fdbd','d7fb94','c0f55e','a8e03f','88c31b','73ac09','588309','b1fed2','70eda5','2cda76','0cc75c','009d43','5bdf51','38b62e','23921a','117109','075101'),
		new Array('ffffff','e6e3e3','d0d0d0','acabab','949393','787878','5b5a5a','444444','323232','202020','131313','000000','000000','000000','000000','ffffff','ffffff','ffffff')		
	);
	
	var affichage = '<map name="couleur_map-' +name_ch+ '">';
	
	// variables de départ
	x1 = 1;
	y1 = 1;
	x2 = 12;
	y2 = 12;
	
	for(i=0; i<5; i++)
	{
		for(i2=0; i2<18; i2++)
		{
			affichage += '<area shape="rect" coords="'+x1+','+y1+','+x2+','+y2+'", href="javascript: save_hex(\'' + listeCouleurs[i][i2] + '\',\'' + name_ch + '\')" title="#' + listeCouleurs[i][i2] + '" />';
			x1 += 12;
			x2 += 12;
		}
		x1 = 1;
		x2 = 12;
		y1 += 12;
		y2 += 12;
	}
	affichage += '</map>';
	
	// affichage
	document.getElementById('couleur_div-' + name_ch).innerHTML += affichage;
}

// cette fonction enregistre la couleur dans un champ !
function save_hex(code_hex,name_ch) {
	
	// inscription de la couleur dans le div de prévisualisation
	document.getElementById('prevCouleur-' + name_ch).style.backgroundColor = '#' + code_hex;
	
	// inscription de la couleur dans le champ
	document.getElementById(name_ch).value = '#' + code_hex;
}

// cette fonction permet la prévisualisation en direct de la couleur choisie
function prev_couleur(name_ch) {
	couleurActuelle = document.getElementById(name_ch).value;
	if(couleurActuelle.length == 7)
	{
		document.getElementById('prevCouleur-' + name_ch).style.backgroundColor = couleurActuelle;
	}
	
	// lancement de la fonction dans 0.5 secondes
	setTimeout('prev_couleur(\'' + name_ch + '\')',500);
}