/**
 * @author fidel durana pour NMmedical et medistore
*/
//ici je met en commentaire le chargement du nuancier dans la page
//window.onload=initNuancier;
function initNuancier(typedenuancier) {
	//dans cette fonction on initialise tous les reglages du nuancier
	//en premier lieu on le crée
	buildNuancier(typedenuancier);
	//on met à zero les affichages de vignettes
	document.getElementById("ShowCouleur").innerHTML = '';
	document.getElementById("ShowPietement").innerHTML = '';
	//initialisation du dragndrop issu de la librairie YAHOO
	    (function() {
        var dd;
        YAHOO.util.Event.onDOMReady(function() {
            dd = new YAHOO.util.DD("nuancier");
        });
    })();
	//et initialisation du pulldown issu de la librairie openrico
	
	//
}
function captureEvenement(){
 //gestion des evenements
		var viewnuancier = document.getElementById("sellerie");
        var viewpietement = document.getElementById("pietement");
        var verifselection = document.getElementById("votrechoix");
		 if (viewnuancier.addEventListener) {
             viewnuancier.addEventListener("click", voirNuancier('lemi'), false);
             } else if (viewnuancier.attachEvent) {
              viewnuancier.attachEvent("onclick", voirNuancier('lemi'));
             }
        if (viewpietement.addEventListener) {
	      viewpietement.addEventListener("click",voirNuancier('pietement'),false);
         } else if (viewpietement.attachEvent) {
	       viewpietement.attachEvent("onclick",voirNuancier('pietement'));
          }
         if (verifselection.addEventListener) {
	      verifselection.addEventListener("click",verifContent(),false);
         }else if (verifselection.attachEvent) {
	      verifselection.attachEvent("onclick",verifContent());
         }
}
function buildNuancier(typedenuancier){
switch (typedenuancier) {
  	case 'complet':
  		var squelette = '<div id="nuancier">';
  		squelette += '<span class="titrerubrique">Couleur:</span>';
  		squelette += '<div id="colorsellerie">';
  		squelette += '<a href="javascript:void(0);" onclick="voirNuancier(\'lemi\');" id="idsellerie" class="minibarre">';
  		squelette += '<span id="label_sellerie">Sellerie</span>';
  		squelette += '<img src="js/src/arrowDown.png">';
  		squelette += '</a>';
  		squelette += '<div id="choix"></div>';
  		squelette += '</div>';
  		squelette += '<span id="ShowCouleur"></span>';
  		squelette += '<span class="titrerubrique">Pietement</span>';
  		squelette += '<div id="colorpietement">';
  		squelette += '<a href="javascript:void(0);" onclick="voirNuancier(\'pietement\')" id="idpietement" class="minibarre">';
  		squelette += '<span id="label_pietement">Pietement</span>';
  		squelette += '<img src="js/src/arrowDown.png">';
  		squelette += '</a>';
  		squelette += '<div id="selectpietement"></div>';
  		squelette += '</div>';
  		squelette += '<span id="ShowPietement"></span>';
  		squelette += '<input type="hidden" value="exemple1" id="couleur1"/>';
  		squelette += '<input type="hidden" value="exemple2" id="couleur2"/>';
		squelette += '<img src="js/src/bouton_ok_bleu.gif" id="bouton" onclick="verifContent();>';
  	    squelette += '</div>';
		break
	case 'simple':
     var squelette = '<div class="nuancier" id="nuancier">';
	  	squelette += '<span class="title">Couleur:</span>';
  		squelette += '<div id="couleur_sellerie">';
  		squelette += '<a href="javascript:void(0);" onclick="captureEvenement();" id="sellerie" class="minibarre">';
  		squelette += '<span id="label_sellerie">Sellerie</span>';
  		squelette += '<img src="lemi3_fichiers/arrowDown.png">';
  		squelette += '</a>';
  		squelette += '<div id="choix"></div>';
  		squelette += '</div>';
  		squelette += '<span id="ShowCouleur"></span>';
		squelette += '<input type="hidden" value="exemple1" id="valeur1"/>';
  		squelette += '<input type="button" onclick="verifContent();" value="Valider" id="votrechoix">';
  		squelette += '</div>';
	break
  }
  document.getElementById('affiche_nuancier').innerHTML = squelette;
  //on applique le style à l'objet crée
  var boutongrafik = document.getElementById('bouton');
  with(boutongrafik){
  	style.cursor = "pointer";
	style.marginLeft = "10px";
  }
  var showPietement = document.getElementById('ShowPietement');
  var imagepietement = showPietement.getElementsByTagName('img');
  with(imagepietement){
  	style.marginLeft = "10px";
  }
}
function verImagen(codigo){
  switch (codigo) {
  case 'Kirshe' :
  var picture = '<img src="js/src/Kirsche.jpg" border="1">';
  break
  case 'Creme' :
  var picture = '<img src="js/src/CREME.jpg" border="1">';
  break
  case 'Chrome' :
  var picture = '<img src="js/src/CHROME.jpg" border="1">'; 
  break
  case 'Atoll' :
  var picture = '<img src="js/src/Atoll.jpg" border="1">'; 
  break
  case 'anthracite' :
  var picture = '<img src="js/src/Anthracite.jpg" border="1">'; 
  break
  case 'agave' :
  var picture = '<img src="js/src/AGAVE.jpg" border="1">'; 
  break
  }
  document.getElementById("ShowCouleur").innerHTML = picture;
}
///////////////////////////////////////////////////////////////////////////////////
// Fonction de base pour afficher le menu du pietement au cas o� le PIETEMENT    //
// ne changerait pas. J'ai mis ici cette fonction comme une voie de garage pour  //
// l'appeller au cas o� le menu du pietement ne changerait pas...sinon j'utilise //
// tout simplement la fonction voirNuancier() pour retirer le menu du pietement  //
///////////////////////////////////////////////////////////////////////////////////
function verPietement(codigo){
switch (codigo) {
  case 'Noir' :
  var pietement = '<img src="js/src/pietement-N.jpg" border="1">';
  break
  case 'Blanc' :
  var pietement = '<img src="js/src/pietement-B.jpg" border="1">';
  break
  case 'Gris' :
  var pietement = '<img src="js/src/pietement-G.jpg" border="1">';
  break
}
  document.getElementById("ShowPietement").innerHTML = pietement;
  //
}
///////////////////////////////////////////////////////////////////////////
// Fonction pour afficher les menus du nuancier.                         //
// on interroge en GET le meme fichier nuancier.php                      //
//mais en fonction de ce quon demande on obtient un nuancier different   //
///////////////////////////////////////////////////////////////////////////
function voirNuancier(typedenuancier){
 switch (typedenuancier){
 case 'lemi' :
  var adresse ='nuancier.php?nuancier=lemi';
  var cible = 'choix';
 break
 case 'pietement' :
  var adresse ='nuancier.php?nuancier=pietement';
  var cible = 'selectpietement';
 break
 /*cette partie concerne le futur promotal*/
 case 'promotal' :
  var adresse ='nuancier.php?nuancier=promotal';
  var cible = 'choix';
 break
 }
verCosa(adresse,cible);
//alert(adresse);
}
/////////////////////////////////////////////////////////////////////////////
// fonction pour declEncher les actions, une fois le choix de couleur dans //
// le menu du nuancier selectionn�                                         //
/////////////////////////////////////////////////////////////////////////////
function SelectColor(itemid,famille){
if (famille == 'lemi'){
    //test de debug
	alert(itemid);
	//test de debug
	//fermer le menu une fois choisie la couleur
    CloseMenu('couleur');
	//je vais chercher un champ masqué
	document.getElementById('label_sellerie').innerHTML = itemid;
	//pour y passer ensuite ma valeur
	document.getElementById('couleur1').value = itemid;
	//
}
if (famille == 'pietement'){
	//test de debug a enlever quand cest bon
    alert(itemid);
    //je ferme le menu
    CloseMenu('pietement');
	//InsertMarquageProduit();
	document.getElementById('label_pietement').innerHTML = itemid;
	//
	document.getElementById('couleur2').value = itemid;
}
if (famille == 'promotal'){
	//a remplir lorsque le promotal sera pret
}
//il faudra remplacer dans le futur les IF par un switch 
//si les nuanciers de couleur sont plusieurs ou augmentent en familles de couleur
}
//////////////////////////////////////////////////////////////
// fonction pour remplacer un noeud dans larbre DOM du menu //
//////////////////////////////////////////////////////////////
function switchItem(elementParent,elemento){
var nodo1 = document.getElementById("contenu");
//var nodo2 = '<b>'+elemento+'<b>';
var nodo2 = '<span id="label_sellerie">'+elemento+'<span>';
elementParent.replaceChild(nodo1, nodo2);
}
////////////////////////////////////////////////////////////////////////////////////////////
//fonction pour aficher et customiser le style du nuancier                                //
// ici le motif "element" est la cible qu'on veut transformer                             //
// et le motif "KindOfSkin" quant � lui designe le style ou le skin qui lui sera appliqu� //
////////////////////////////////////////////////////////////////////////////////////////////
function AfficheStyle(element,KindOfSkin){
switch (element){
case 'nuancier' :
     if (kindOfSkin == 'standard'){
	 	var nuancier = document.getElementById('nuancier');
		var textcouleur = document.getElementById('textcouleur');
		var textpietment = document.getElementById('textpietement');
		var showcolor = document.getElementById('ShowCouleur');
		var showpietement = document.getElementById('ShowPietement');
		var colorsellerie = document.getElementById('colorsellerie');
		var colorpietement = document.getElementById('colorpietement');
		var listecolor = document.getElementById('listecouleur');
		var listecolorpietement = document.getEelementById('lemipietement')
		
		 with (nuancier){
              style.display = "block";
              style.position = "relative";
              style.border = "1px solid #666";
              style.color = "#fff";
              style.cursor = "move";
              style.height = "60px";
              style.width = "500px";
		 }
		var imgnuancier = nuancier.getElementsByTagName('img');
            if(imgnuancier.length > 0){
              for(var i=0;imgnuancier[i];i++){
                imgnuancier[i].style.border = '0';
               }
              }
		
           var spannuancier = nuancier.getElementsByTagName('span');
            if(spannuancier.length > 0){
              for(var i=0;spannuancier[i];i++){
			  	                    //en focntion du navigateur la regle de style change
				                    //l'objet browser a été défini dans la fonction browser browser dans globalevent
			  	                    if (this.ie7 || this.ie6){
					                     // si c'est internet explorer le flottement à gauche est celui là
	                                     spannuancier[i].style.styleFloat = "left";
	                                     }
	                                     //sous les autres navigateurs et le standard en fait c'est cssFloat
	                                     else {
	                                           spannuancier[i].style.cssFloat = "left";
	                                          }
               }
              }
         //j'applique le style aux UL
			//ainsi qu'aux li pour les listes imbriquées du nuancier
			//puis la minibarre et les tags inclus dedans
			//dont les images et les span
			var minibarre = nuancier.getElementsByClassName('minibarre');
			var imageminibarre = nuancier.minibarre.getElementsByTagName('img');
			var spanminibarre = nuancier.minibarre.getElementsByTagName('span');
		  	var as = nuancier.getElementsByTagName('ul');
			var ligne = nuancier.getElementsByTagName('li');
			 if(as.length > 0){
			 	for(var i=0;as[i];i++){
					as[i].style.display = "block";
					as[i].style.width = "100px";
					as[i].style.margin = "0";
				}
			 }
			 if(ligne.length > 0){
			 	for(var i=0;ligne[i];i++){
					ligne[i].style.listType = "none";
                    ligne[i].style.display = "block";
                    ligne[i].style.margin = "0";
                    ligne[i].style.padding = "0";
                    ligne[i].style.width = "100px";
                    ligne[i].style.fontSize = "10px";
                    ligne[i].style.textAlign = "center";
				}
			 }
			 if(ligne){
			 	var lien = as.ligne.getElementsByTagName('a')
				 if(lien.length > 0){
				 	for(var i=0;lien[i];i++){
						lien[i].style.display = "block";
						lien[i].style.width = "100%";
                        lien[i].style.backgroundColor = "white";
                        lien[i].style.width = "100px";
                        lien[i].style.margin = "0";
                        lien[i].style.textDecoration = "none";
					}
				 }
             lien.onmouseout = function() { this.style.backgroundColor = 'white';};    // on définit la couleur de fond du lien 
             lien.onmouseover = function() { this.style.backgroundColor = 'blue';this.style.color = 'white'};    // on définit sa couleur de fond lorsque la souris passe au-dessus
			 }
			 if (minibarre.length > 0){
			 	for(var i=0;minibarre[i];i++){
					minibarre[i].style.display = "block";
					minibarre[i].style.border = "1px solid black";
					minibarre[i].style.width = "100px";
					minibarre[i].style.height = "18px";
				}
			 }
			 if (imageminibarre.length > 0){
			 	for(var i=0;imageminibarre[i];i++){
					imageminibarre[i].style.display = "block";
					imageminibarre[i].style.position = "relative";
                    imageminibarre[i].style.left = "30px";
                    imageminibarre[i].style.verticalAlign = "middle";
				}
			 }
			 if (spanminibarre.length > 0){
			 	for(var i=0;spanminibarre[i];i++){
					spanminibarre[i].style.display = "block";
					spanminibarre[i].style.position = "relative";
                    spanminibarre[i].style.left = "5px";
                    spanminibarre[i].style.border = "1px solid grey";
                    spanminibarre[i].style.width = "50px";
                    spanminibarre[i].style.fontSize = "10px";
                    spanminibarre[i].style.fontWeight = "800";
                    spanminibarre[i].style.textDecoration = "underline";
                    spanminibarre[i].style.zindex = "1";
				}
			 }
		with (textcouleur) {
			//
			style.fontSize = "10px";
            style.color = "Black";
            style.fontFamily = "serif";
            style.marginLeft = "5px";
		}
		with (textpietement) {
			//
			style.fontSize = "10px";
            style.color = "Black";
            style.fontFamily = "serif";
            style.marginLeft = "5px";
		}
		with (showcolor) {
			style.marginLeft = "5px";
			if (this.ie7 || this.ie6){showcolor.style.styleFloat = "left";}else {showcolor.style.cssFloat = "left";}
		}
		with (showpietement) {
			style.marginLeft = "5px";
		}
		with (colorsellerie) {
			style.display = "block";
            style.border = "1px solid black";
            style.width = "100px";
            style.padding = "0";
		}
		with (colorpietement){
			style.display = "block";
            style.border = "1px solid red";
            style.width = "100px";
            style.padding = "0";
		}
		with (listecolor){
			style.display = "block";
            style.padding = "0";
            style.margin = "0";
            style.backgroundColor = "white";
            style.borderTop = "1px solid grey";
		}
		with (listecolorpietement){
			style.display = "block";
            style.padding = "0";
            style.margin = "0";
            style.backgroundColor = "white";
            style.borderTop = "1px solid grey";
			if (this.ie7 || this.ie6){listecolorpietement.style.styleFloat = "left";}else {listecolorpietement.style.cssFloat = "left";}
		}
		
	 }
break
case 'contenu' :
  var div = document.getElementById('contenu');
     if (KindOfSkin == 'yellow') {
       with (div){
          style.paddingTop = "40px";
          style.height = "80px";
          style.color = "red";
          style.backgroundColor = "yellow";
          style.fontSize = "25px";
          style.textAlign = "center";
          style.fontFamily = "Arial, Verdana, Helvetica";
          style.fontWeight = "bold";
          style.border = "2px solid red";
          }
         }
    if (KindOfSkin == 'blue') {
      with (div){
        style.paddingTop = "40px";
        style.height = "80px";
        style.color = "white";
        style.backgroundColor = "blue";
        style.fontSize = "25px";
        style.textAlign = "center";
        style.fontFamily = "Arial, Verdana, Helvetica";
        style.fontWeight = "bold";
        style.border = "2px solid red";
       }
      }
 break
case 'pietement' :
var lemipietement = getElementById('couleur_pietement');
  if (KindOfSkin == 'standard') {
    with (lemipietement){
          style.display = "block";
          style.border = "2px solid red";
          style.width = "100px";
          style.backgroundColor = "red";
          style.padding = "0"; 
         }
    }
 break
}
}
////////////////////////////////////////////////////////
//// fonction pour re-initialiser le menu du nuancier //
////////////////////////////////////////////////////////
function CloseMenu(typemenu){
if (typemenu == 'couleur') {
 	document.getElementById("choix").innerHTML = '';
}
if (typemenu == 'pietement') {
  document.getElementById("selectpietement").innerHTML = '';
}
	//pour le deboguage
  //alert(idtype);
}
/////////////////////////////////////////////////////////////
// Fonction qui construit la selection du produit          //
// Elle construit la couleur plus le pietement du produit  //
// en focntion de ce qui a �t� choisi:                     //
// pour pouvoir ensuite la passer comme argument           //
//                                                         //
/////////////////////////////////////////////////////////////
function BuildChoice(item){
  //
 //
 }
//
function InsertSuggestion()
{
   // Cr�ation d'un lien
   var A = document.createElement('span');
   A.setAttribute('id', 'machin');
   var objectTxtA = document.createTextNode('Imprimer');
   A.appendChild(oTxtA);

   // Affectation de la m�thode print() au clic sur le lien
   oA.onclick = alert("osso bucco");
	
   // Positionnement du lien dans la page
   var oCont = document.getElementById('body');
   if(!oCont) return;
   oCont.appendChild(oA);
}
function verifContent(){
	//c'est une fonction de debug pour verifier que les params sont bien passés
	var valUn = document.getElementById('couleur1').value;
	var valDeux = document.getElementById('couleur2').value;
	var phrase = "Couleur :"+valUn+" et "+"pietement:"+valDeux;
	alert(phrase);
}
//suite du code
//debut du code pour le nuancier provisoire
//addListener(window, 'load', setStyleMenuColor);
//au demarrage je masque le nuancier provisoire
addListener(window, 'load', affichMenuProv);
//var btnaffichcolor = document.getElementByid('buttonNuancier');
//addlistener(document.getElementByid('buttonNuancier'), 'click', affichMenuProv);
//je masque
function masqueNuancierProv(){
	var provmenu = $('list_coul_nuancier');
	with (provmenu){
		style.display = "none";
	}
}
//
function affichMenuProv(){
	var ultofind = $('list_coul_nuancier');
	var paneltohide = $('panel_out');
	with(paneltohide){
		style.display = "none";
	}
	/*with (ultofind){
		style.fontSize = "9px";
		style.border = "2px solid black";
	}*/
  var panelIn="display:block;border:1px solid black;width:120px;height:18px;padding-left:5px;background-color:#cdc7c7;";
  var panelInSpan="display:block;font-size:11px;color:black;font-weight:bold;float:left;";
  var listecoulnuancier="font-size:10px;";
  var listecoulnuancierspan="display:block;margin-left:55px;";
  var listecoulnuancierli="display:block; clear:both;width:200px;";
  var listecoulnuancierimg="display:block;border:2px solid red;float:left;cursor:pointer;";
  var listecoulnuancierlink="display:block;height:40px;width:200px;"
  var listecoulnuancierover="background-color:blue;color:white;border: 1px dotted black;";
  var imgdisplaymenu="cursor:pointer;margin-left:8px;";
  var nuancierglobal="display:block;width:220px;z-index:1000;position:absolute;top:480px;";
  //j'appelle la fonction inserecss de globalevent.js
  insereCSS("#list_coul_nuancier",listecoulnuancier);
  insereCSS("#list_coul_nuancier span",listecoulnuancierspan);
  insereCSS("#list_coul_nuancier li",listecoulnuancierli);
  insereCSS("#list_coul_nuancier li a img",listecoulnuancierimg);
  /*insereCSS("#list_coul_nuancier li a span",listecoulnuancierlinkspan);*/
  insereCSS("#list_coul_nuancier li a",listecoulnuancierlink);
  insereCSS("#list_coul_nuancier li a:hover",listecoulnuancierover);
  insereCSS("#panel_in",panelIn);
  insereCSS("#panel_in span",panelInSpan); 
  insereCSS("#panel_in img",imgdisplaymenu);
  insereCSS("#nuanciero",nuancierglobal);
  //on s'occupe aussi du style du conteneur: le "panel_out"
  var menu_pseudo_deroulant = "display:block;background-color:white;border:1px solid black;width:auto;max-height:180px;min-height:48px;overflow:auto;";
  insereCSS("#panel_out",menu_pseudo_deroulant);
}
//////////////////////////////////////////////////////////////////////
//basculement comme un flipflop pour afficher ou masquer le nuancier//
//////////////////////////////////////////////////////////////////////
function hideMe(elem){
 var paneltohide = $(elem);
	with (paneltohide){
		style.display = "none";
	}
}