/**
 * Créez un joli sélecteur de couleur en jQuery
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
 
 var content = '';
 
(function($) {
   $.fn.myColorPicker = function(callback) {
      return this.each(function(){
         var $$ = $(this);
		 //var idText = $$.attr('idtxt');
		 //alert(idText);
         var x  = $$.offset().left;
         var y  = $$.offset().top + $$.outerHeight(true);
         
         // Lorsque le curseur entre dans le champ de saisi
         $$.click(function() {
            buildColorPicker();
         });

         // Fonction de création de la palette
         function buildColorPicker() {
            // On supprime d'éventuelles autres palettes déja ouvertes
            removeColorPicker();

            // On construit le Html de la palette
           // var values  = ['00', '33', '66', '99', 'CC', 'FF']; 
            
			if(content == '')
			{	content = '';
				content += '<div id="myColorPicker">';
				content += '<ul>';
				/*
				for(r = 0; r < 6; r++) { 
				   for(g = 0; g < 6; g++) { 
					  for(b = 0; b < 6; b++) { 
						 color = '#' + values[r] + values[g] + values[b]; 
						 content += '<li><a rel="'+ color +'" style="background:'+ color +'" title="'+ color +'"></a></li>';
					   } 
				   } 
				}*/	
				
				function RGB2HTML(red, green, blue)
				{	red		= Math.round(red);
					green	= Math.round(green);
					blue	= Math.round(blue);
					var decColor = red + 256 * green + 65536 * blue;
					var hx = decColor.toString(16);
					while(hx.length < 6) hx = '0'+hx;
					return '#'+hx;
				}
				
				function HSVtoRGB(h,s,v)
				{	H = h; S = s; V = v;
					if (H<0) H=0; else if(H>360) H=360;
					if (S<0) S=0; else if (S>1)  S=1;
					if (V<0) V=0; else if (V>1)	 V=1;
					
					if(S == 0) return RGB2HTML(V,V,V);
				 
					H /= 60;
					i = Math.floor(H);
					f = H - i;
				 
					p = V * ( 1 - S );
					q = V * ( 1 - S * f );
					t = V * ( 1 - S * ( 1 - f ) );
					if (i==0) { R = V; G = t; B = p; }
						else
					if (i==1) {	R = q; G = V; B = p; }
						else
					if (i==2) { R = p; G = V; B = t; }
						else
					if (i==3) { R = p; G = q; B = V; }
						else
					if (i==4) { R = t; G = p; B = V; }
						else  {	R = V; G = p; B = q; }
					
					R = Math.round(R * 255);
					G = Math.round(G * 255);
					B = Math.round(B * 255);
					
					return RGB2HTML(R,G,B);
				}
				
				for(value=0.2;value<0.9;value+=0.075)
				  for(teinte=0;teinte<360;teinte+=10)
					{	color = HSVtoRGB(teinte,value,1);
						content += '<li><a rel="'+ color +'" style="background:'+ color +'" title="'+ color +'"></a></li>';
					};

				for(value=1;value>0.2;value-=0.075)
				  for(teinte=0;teinte<360;teinte+=10)
					{	color = HSVtoRGB(teinte,1,value);
						content += '<li><a rel="'+ color +'" style="background:'+ color +'" title="'+ color +'"></a></li>';
					};

				for(z=0;z<=35;z++)
				{	n = 7*z; if(n>255) n=255;
					color = RGB2HTML(n,n,n);
					content += '<li><a rel="'+ color +'" style="background:'+ color +'" title="'+ color +'"></a></li>';
				}

				content += '</ul>'; 
				content += '<a class="close">Fermer</a>'; 
				content += '</div>'; 
			}
            // On la place dans la page aux coordonnées du textfield
            $(content).css({ 
               position:'absolute', 
               left:x, 
               top:y
            }).appendTo('body');

            // Lorsqu'une couleur est cliqué, on affiche la valeur dans le textfield
            $('#myColorPicker a').not('.close').click(function() {
               //$$.html( $(this).attr('rel') );
			   callback($(this).attr('rel'),$$.attr('idtxt'));
			   removeColorPicker();
               return false;
            });
			
            // Au survol d'une couleur, on change le fond de la palette
            $('#myColorPicker a').hover(function() {				
                $('#myColorPicker').css('backgroundColor', $(this).attr('rel') );
            }, function() {
				$('#myColorPicker').css('backgroundColor', $$.val() );		
			});
			
            // On supprime la palette si le lien "Fermer" est cliqué
            $('#myColorPicker a.close').click(function() {
               removeColorPicker();
               return false;
            });
         }

         // Fonction de suppression de la palette
         function removeColorPicker() {
            $('#myColorPicker').remove();
         }   
      });
   };
})(jQuery);