function changecss(myclass,element,value) {
 	var CSSRules
 	if (document.all)		  CSSRules = 'rules'
 	else if (document.getElementById) CSSRules = 'cssRules'
 	else return
 	for (var i = 0; i < document.styleSheets.length; i++) {
 		for (var j = 0; j < document.styleSheets[i][CSSRules].length; j++) {
 			if (document.styleSheets[i][CSSRules][j].selectorText == myclass) {
 		    	document.styleSheets[i][CSSRules][j].style[element] = value
 			}
 		}
 	}
 }
	var clic=false; 
//Cette variable nous indique si l'utilisateur clique sur la barre.
 
var clic2=false;
//Cette variable nous indique si l'utilisateur clique sur le carré.
 
var r=255,g=0,b=0;
//Variables qui stockeront la couleur en rgb.
 
var r_1=255,g_1=0,b_1=0;
// Variables secondaires rgb.
 
var blanc=0,noir=1;
// Le pourcentage de noir et de blanc entre 0 et 1 appliqué à la couleur (ici, pour le noir, 1 signifie qu'il n'y en aura pas, et 0 totalement : c'est l'inverse)
 
var x=360,y=20;
//position initiale de curseur2 (dans le carré).
function clique(objet)
{
 
	if(objet=="barre") // si l'utilisateur clique sur la barre ...
	{	
		clic=true; // ...alors on met true (vrai) à clic
	}
	else // sinon l'utilisateur clique sur le carré ...
	{ 
		clic2=true; // ...alors on met true (vrai) à clic2
	}
 
} 
function position(axe,event)
{
	// event contient les évènements de la page (on s'en sert pour la position du curseur)
 
	var e = event || window.event; 
	// on copie les évènements dans e : il y a des manières différentes de récupérer les événements selon le navigateur
 
		if(axe=="x") //si on demande x
		{
			var rep=e.clientX; // position x de la souris.
		}
		else // sinon y 
		{
			var rep=e.clientY; // position y de la souris.
		}

	return rep;
	// on renvoie la valeur de rep.

}
document.onmousemove=calcul; 
// lorsque la souris bouge n'importe où dans le document, on appelle la fonction calcul.

document.onmousedown=calcul; 
// lorsque la souris clique n'importe où dans le document, on appelle la fonction calcul.
 
document.onmouseup=function() { clic=false;clic2=false; }
// si l'utilisateur relâche le bouton de la souris, alors les variables clic et clic2 redeviennent fausses (false).
function calcul(event) // event contient les événements de la page (on s'en sert pour la position du curseur).
{
 
	if(clic && position('y',event)<=320 && position('y',event)>=20) // on appelle position() pour connaître la position de la souris.
	{
		document.getElementById("curseur1").style.top=position('y',event)-7;
//on change la position du curseur (top) en même temps que la souris.


// c'est à partir d'ici qu'on regarde sur quel sixième la souris se trouve.

if((position('y',event)-20)<=50) // 1/6 (50px)
{

	r=255;
	g=0;
	b=Math.round((position('y',event)-20)*255/50);
 
}
else if((position('y',event)-20)<=100) // 2/6 (100px)
{

	r=Math.round(255-((position('y',event)-70)*255/50));
	g=0;
	b=255;

}
else if((position('y',event)-20)<=150) // 3/6 (150px)
{

	r=0;
	g=Math.round((position('y',event)-120)*255/50);
	b=255;

}
else if((position('y',event)-20)<=200) // 4/6 (200px)
{

	r=0;
	g=255;
	b=Math.round(255-((position('y',event)-170)*255/50));

}
else if((position('y',event)-20)<=250) // 5/6 (250px)
{

	r=Math.round((position('y',event)-220)*255/50);
	g=255;
	b=0;

}
else if((position('y',event)-20)<=300) // 6/6 (300px)
{

	r=255;
	g=Math.round(255-((position('y',event)-270)*255/50));
	b=0;

}

document.getElementById("carre").style.backgroundColor="rgb("+r+","+g+","+b+")";
// On change la couleur du carré. On voit après (grâce à degrade n-b.png) le dégradé de la couleur vers le blanc et le noir.


		afficher(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
	}

	if(clic2) // si l'utilisateur clique sur le carré...
	{
	
		if(position('y',event)>20 && position('y',event)<320)
		{ 
			document.getElementById("curseur2").style.top=(position('y',event)-10)+"px";
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
 
y=position('y',event);
// on enregistre la position y de la souris dans la variable 'y' pour que la fonction afficher() puisse faire ces calculs.

		}

		if(position('x',event)>60 && position('x',event)<360)
		{
			document.getElementById("curseur2").style.left=(position('x',event)-10)+"px";
// on déplace curseur2 et on lui retire son milieu (comme pour curseur 1)
 
x=position('x',event);
// on enregistre la position x de la souris dans la variable 'x' pour que la fonction afficher() puisse faire ces calculs.

		}

		afficher(); // fonction permettant d'afficher la couleur courante dans le rectangle (input text) 'resultat'.
	}

}



function afficher() // ici on gère l'affichage de la couleur
{

	noir=Math.round( (x-60)*100/300)/100; 
	blanc=Math.round((y-20)*100/300)/100; 

	r_1=Math.round((255-r)*blanc)+r;
	g_1=Math.round((255-g)*blanc)+g;
	b_1=Math.round((255-b)*blanc)+b;
 
	r_1=Math.round(r_1*noir);
	g_1=Math.round(g_1*noir);
	b_1=Math.round(b_1*noir);

	// --modification--

	r_hexa = hexadecimal( Math.floor(r_1 /16) ) + hexadecimal( r_1 % 16 );
	g_hexa = hexadecimal( Math.floor(g_1 /16) ) + hexadecimal( g_1 % 16 );
	b_hexa = hexadecimal( Math.floor(b_1 /16) ) + hexadecimal( b_1 % 16 );
 
	document.getElementById("resultat").value = "#" + r_hexa + g_hexa + b_hexa;

	// --fin modification--
 
	document.getElementById('resultat').style.backgroundColor="rgb("+r_1+","+g_1+","+b_1+")";
	
}



// Et une nouvelle fonction

function hexadecimal(nombre)
{

	if(nombre < 10)
	{
		return nombre.toString(); // le nombre en chaîne de caractères.
	}
	else
	{
	
		switch (nombre)
		{
			case 10:
			return "A";
			break;
			case 11:
			return "B";
			break;
			case 12:
			return "C";
			break;
			case 13:
			return "D";
			break;
			case 14:
			return "E";
			break;
			case 15:
			return "F";
			break;
		}
	}

}

function valider()
{

	//on fait appel à une fonction dans la page principale pour transmettre le contenu de resultat.
	window.opener.valid_couleur(document.getElementById("resultat").value);
 
	window.close();
	//on ferme la palette
	
}
 // on initialise 2 variables qui nous permettront d'envoyer la couleur dans le bon champ.

champ="";
formulaire="";

function ouvrir_palette(formulaire_recupere,champ_recupere)
{

	formulaire=formulaire_recupere;
	champ=champ_recupere;
 
	ma_palette=window.open("palette.html","Palette_de_couleur","height=380,width=400,status=0, scrollbars=0,,menubar=0");
	// on ouvre la palette

}
 
function valid_couleur(couleur) //fonction appelée lorsqu'on valide la palette. On récupère la couleur.
{

	document.forms[formulaire].elements[champ].value=couleur;

}

function accordion(div, elementheight){
	//Recherche de toutes les divs concernés
	var divs = document.getElementsByTagName('div');
	for(var i=0; i<divs.length; i++){
		if(divs[i].className == 'accordion'){ //On parcourt toutes les divs ayant la class "accordion"
			var p = divs[i].getElementsByTagName('p')[0];
			
			if(divs[i] == div){
				if(p.offsetHeight != 0){
					//On referme le paragraphe
					var height = 0;
				}
				else{
					//On récupère la hauteur du paragraphe
					p.style.display = 'block';
					p.style.height = '';
					var height = p.offsetHeight;
					p.style.height = '0px';
				}
				//On lance l'ouverture du paragraphe
				accordionLoop(i, height);
			}
			else if(p.offsetHeight != 0){
				//On lance la boucle pour masquer l'élément
				accordionLoop(i, 0);
			}
		}
	}
}

function accordionLoop(div, targetHeight){
	var div_element = document.getElementsByTagName('div')[div]; //Div concernée
	var p = div_element.getElementsByTagName('p')[0]; //Paragraphe à ouvrir/fermer
	
	var height = parseInt(p.style.height.replace(/px/, ''));
	var sens = (height < targetHeight ? 1 : -1); //On compare la taille actuelle à la taille à atteindre pour savoir si on ouvre ou ferme un paragraphe
	height = height+(sens*15); //Vitesse d'ouverture
	
	if((sens == 1 && height > targetHeight) || sens == -1 && height < targetHeight){ //Pour ne pas dépasser la taille du paragraphe
		height = targetHeight;
	}
	p.style.height = height+'px';
	
	if(height != targetHeight){
		setTimeout('accordionLoop('+div+', '+targetHeight+')', 100);
	}
	else if(targetHeight == 0 && sens == -1){
		//On masque le paragraphe refermé
		p.style.display = 'none';
	}
}
function calculeLongueur(){
   var iLongueur, iLongueurRestante;
   iLongueur = document.getElementById('monchamp').value.length;
   if (iLongueur>24) {
      document.getElementById('monchamp').value = document.getElementById('monchamp').value.substring(0,24);
      iLongueurRestante = 0;
   }
   else {
      iLongueurRestante = 24 - iLongueur;
   }
   if (iLongueurRestante <= 1)
      document.getElementById('indic').innerHTML = iLongueurRestante + "&nbsp;caract&egrave;re&nbsp;disponible";
   else
      document.getElementById('indic').innerHTML = iLongueurRestante + "&nbsp;caract&egrave;res&nbsp;disponibles";
}
function checkPw(form) {
pw1 = form.pw1.value;
pw2 = form.pw2.value;

if (pw1 != pw2) {
document.getElementById('indic').innerHTML = "Mot de passe différents";
return false;
}
else return true;
}