//--------------------------------------------------------------------------
//	EJ3 ColorPicker v1.0 --  This notice must remain untouched at all times.
//	Copyright Emilio José Jiménez 2005. All rights reserved.
//
//	This program is free software; you can redistribute it and/or modify
//	it under the terms of the GNU General Public License as published by
//	the Free Software Foundation; either version 2 of the License, or
//	any later version.
//
//	This program is distributed in the hope that it will be useful,
//	but WITHOUT ANY WARRANTY; without even the implied warranty of
//	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//	GNU General Public License for more details.
//
//	You should have received a copy of the GNU General Public License
//	along with this program; if not, write to the Free Software
//	Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
//--------------------------------------------------------------------------

// EJ3 ColorPicker
// Version: v1.0
// Author: Emilio Jose Jimenez Jimenez
// Fecha: Wed.8-VI-2005

//Constantes
var NAME=0;
var VALUE=1;
var BITS=2;
var CELL=3;
var SAMPLE=4;
var SAMPLETEXT=5;
var VERSUS=6;
var VERSUSTEXT=7;
var CSSCLASS=8;
var STYLE=9;
var HUE=10;
//Variables modificables
var ej3CP_noColor='<span style="border: 1px solid #000000; background-color:#D070D0">&nbsp;Transparent&nbsp;</span>';
//Variables
var ej3CP_version='1.0';
var ej3CP_pickers=0;
var ej3CP_config=new Array();
var ej3CP_pActual=1;
var ej3CP_pAnterior=1;
var ej3CP_tiempo;
var ej3CP_div=null;

function ej3ColorPicker() {	//OK
	//Comprobamos que existe al menos un parametro
	if(ej3ColorPicker.arguments.length==0) return;
	//----------------------------------------------------------------
	//Adquirimos las variables de configuracion (sin control de errores)
	//----------------------------------------------------------------
	ej3CP_pickers++;
	ej3CP_config[0]=ej3CP_pickers;
	ej3CP_config[ej3CP_pickers]=new Array('','',16,8,true,true,true,true,'','font-size:10px;',255);
	ej3CP_config[ej3CP_pickers][NAME]=ej3ColorPicker.arguments[0];
	for(i=1;i<ej3ColorPicker.arguments.length;i+=2) {
		ej3CP_config[ej3CP_pickers][ej3ColorPicker.arguments[i]]=ej3ColorPicker.arguments[i+1];
	}
	ej3CP_config[ej3CP_pickers][BITS]=Math.round(255/ej3CP_config[ej3CP_pickers][BITS]);
	//----------------------------------------------------------------
	//Creamos los elementos de formulario (<span>, <input> y <div>)
	//----------------------------------------------------------------
	if(ej3CP_div==null) {
		document.write("<div id=\"ej3ColorPicker\" onMouseOut=\"ej3PopUp_close()\" onMouseOver=\"ej3PopUp_show()\"></div>");
		ej3CP_div=document.getElementById('ej3ColorPicker');
		ej3CP_div.innerHTML='';
		ej3CP_div.style.zIndex=10000;
		ej3CP_div.style.visibility='hidden';
		ej3CP_div.style.cursor='crosshair';
		ej3CP_div.style.position='absolute';
		ej3CP_div.style.border='1px solid #000000';
	}
	html="<span id=ej3Span"+ej3CP_pickers+" onClick=\"clearTimeout(ej3CP_tiempo); ej3PopUp_open(this); ej3PopUp_close(2000);\" style=\"height:12px; border: 1px solid #000000; cursor: pointer; background-color: "+ej3CP_config[ej3CP_pickers][VALUE]+";\">&nbsp;&nbsp;&nbsp;&nbsp;</span>";
	html+="&nbsp;<input type=\"text\" id=ej3Text"+ej3CP_pickers+" onChange=\"ej3Tools_setColorTyped(this);\" name=\""+ej3CP_config[ej3CP_pickers][NAME]+"\" value=\""+ej3CP_config[ej3CP_pickers][VALUE]+"\"";
	if(ej3CP_config[ej3CP_pickers][CSSCLASS]!='') html+=" class=\""+ej3CP_config[ej3CP_pickers][CSSCLASS]+"\"";
	if(ej3CP_config[ej3CP_pickers][STYLE]!='') html+=" style=\""+ej3CP_config[ej3CP_pickers][STYLE]+"\"";
	html+=" maxlength=\"7\" size=\"8\">";
	document.write(html);
}
function ej3PopUp_open(oObj) {	//OK
	//----------------------------------------------------------------
	//Determinamos el picker en uso
	//----------------------------------------------------------------
	ej3CP_pAnterior=ej3CP_pActual;
	ej3CP_pActual=parseInt(oObj.id.replace('ej3Span',''));
	//----------------------------------------------------------------
	//Re-escribimos la estructura del pop-up en caso de ser necesario
	//----------------------------------------------------------------
	//if(document.getElementById('ej3ColorPicker').innerHTML=="") ej3PopUp_build();
	if(ej3CP_div.innerHTML=="") ej3PopUp_build();
	if(ej3CP_pActual!=ej3CP_pAnterior) {
		if(ej3CP_config[ej3CP_pActual][BITS]!=ej3CP_config[ej3CP_pAnterior][BITS]) ej3PopUp_build();
		if(ej3CP_config[ej3CP_pActual][CELL]!=ej3CP_config[ej3CP_pAnterior][CELL]) ej3PopUp_build();
	}
	//----------------------------------------------------------------
	//Elegimos el tono de la paleta segun el color del picker
	//----------------------------------------------------------------
	aux=document.getElementById('ej3Span'+ej3CP_pActual).style.backgroundColor.toUpperCase();
	if(aux.substr(0,3)=='RGB') aux=eval(aux.replace('RGB','ej3Tools_RGBcolor2HEX'));
	aux=ej3Tools_HEXcolor2RGB(aux);
	if(isNaN(aux[0])) aux[0]=ej3CP_config[ej3CP_pActual][HUE];
	ej3PopUp_change(aux[0]);
	//----------------------------------------------------------------
	//Ponemos los colores en la zona de muestra
	//----------------------------------------------------------------
	ej3PopUp_sample(oObj);
	ej3PopUp_sample(oObj,'ej3muestraColorVersus');
	//----------------------------------------------------------------
	//Emplazamos el pop-up en el sitio correcto
	//----------------------------------------------------------------
	t=oObj.offsetTop+parseInt(oObj.style.height)+10;
	l=oObj.offsetLeft;
	while(oObj.offsetParent) {
		t+=oObj.offsetParent.offsetTop;
		l+=oObj.offsetParent.offsetLeft;
		oObj=oObj.offsetParent;
	}
	ej3CP_div.style.top=t;
	ej3CP_div.style.left=l;
	ej3CP_div.style.visibility='visible';
}
function ej3PopUp_close(t) {	//OK
	if(isNaN(t)) t=500;
	ej3CP_tiempo=setTimeout("ej3CP_div.style.visibility='hidden';",t);
}
function ej3PopUp_show() {	//OK
	clearTimeout(ej3CP_tiempo);
	ej3CP_div.style.visibility='visible';
}
function ej3PopUp_sample(oObj,lugar) {	//OK
	if(ej3PopUp_sample.arguments.length==1) lugar='ej3muestraColor';
	if(lugar=='ej3muestraColor') {
		if(!ej3CP_config[ej3CP_pActual][SAMPLE]) return;
		lugarTexto='ej3muestraValor';
		mostrarTexto=ej3CP_config[ej3CP_pActual][SAMPLETEXT];
	}
	if(lugar=='ej3muestraColorVersus') {
		if(!ej3CP_config[ej3CP_pActual][VERSUS]) return;
		lugarTexto='ej3muestraValorVersus';
		mostrarTexto=ej3CP_config[ej3CP_pActual][VERSUSTEXT];
	}
	document.getElementById(lugar).style.backgroundColor=oObj.style.backgroundColor;
	var valor=oObj.style.backgroundColor.toUpperCase();
	var valorHEX='';
	var valorRGB='';
	if(mostrarTexto) {
		if(valor.substr(0,3)=='RGB') {
			valorRGB=valor;
			aux=valor.replace('RGB','ej3Tools_RGBcolor2HEX');
			valorHEX=eval(aux);
		}
		if(valor.substr(0,1)=='#') {
			valorHEX=valor;
			aux=ej3Tools_HEXcolor2RGB(valor);
			valorRGB='RGB('+aux[0]+','+aux[1]+','+aux[2]+')';
		}
		if(valorHEX=='') valorHEX=ej3CP_noColor;
	}
	document.getElementById(lugarTexto).innerHTML="<b>"+valorHEX+"<br>"+valorRGB+"</b>";
}
function ej3PopUp_click() {	//OK
	if(ej3PopUp_click.arguments.length==0) {
		c='';
	} else {
		c='#'+ej3Tools_dec2hex(ej3PopUp_click.arguments[0])+ej3Tools_dec2hex(ej3PopUp_click.arguments[1])+ej3Tools_dec2hex(ej3PopUp_click.arguments[2]);
	}
	document.getElementById('ej3Span'+ej3CP_pActual).style.backgroundColor=c;
	document.getElementById('ej3Text'+ej3CP_pActual).value=c;
	ej3CP_config[ej3CP_pActual][VALUE]=c;
	ej3PopUp_sample(document.getElementById('ej3Span'+ej3CP_pActual),'ej3muestraColorVersus');
}
function ej3PopUp_change(R) {	//OK
	ej3CP_config[ej3CP_pActual][HUE]=R;
	for(G=0;G<=255;G=G+ej3CP_config[ej3CP_pActual][BITS]){
		for(B=0;B<=255;B=B+ej3CP_config[ej3CP_pActual][BITS]){
			document.getElementById('ej3'+G+','+B).style.backgroundColor='#'+ej3Tools_dec2hex(R)+ej3Tools_dec2hex(G)+ej3Tools_dec2hex(B);
		}	
	}
}
function ej3PopUp_build() {
	//----------------------------------------------------------------
	//Tabla con la estructura de la paleta y la escala de grises
	//----------------------------------------------------------------
	htmlPaleta="<table border=0 cellpadding=0 cellspacing=0 width="+Math.round((255/ej3CP_config[ej3CP_pActual][BITS])*ej3CP_config[ej3CP_pActual][CELL])+" height="+Math.round((255/ej3CP_config[ej3CP_pActual][BITS])*ej3CP_config[ej3CP_pActual][CELL])+"><tr>";
	//Paleta de colores (estructura)
	for(x=0;x<=255;x=x+ej3CP_config[ej3CP_pActual][BITS]) {
		for(y=0;y<=255;y=y+ej3CP_config[ej3CP_pActual][BITS]) {
			htmlPaleta+="<td id='ej3"+x+","+y+"' onClick=\"ej3PopUp_click(ej3CP_config[ej3CP_pActual][HUE],"+x+","+y+")\" onMouseOver=\"ej3PopUp_sample(this)\" unselectable=on width="+ej3CP_config[ej3CP_pActual][CELL]+" height="+ej3CP_config[ej3CP_pActual][CELL]+"></td>";
		}
		htmlPaleta+= "</tr><tr>";
	}
	//Grises
	for(x=0;x<=255;x=x+ej3CP_config[ej3CP_pActual][BITS]){
		aux=ej3Tools_dec2hex(x)+ej3Tools_dec2hex(x)+ej3Tools_dec2hex(x);
		htmlPaleta+="<td onMouseOver=\"ej3PopUp_sample(this)\" onClick=\"ej3PopUp_click("+x+","+x+","+x+")\" unselectable=on width="+ej3CP_config[ej3CP_pActual][CELL]+" height="+ej3CP_config[ej3CP_pActual][CELL]+" style=\"background-color:#"+aux+";\"></td>";
	} 
	htmlPaleta+= "</tr></table>";
	
	//Tabla con la columna con el tono (hue)
	g=0;  b=255;
	gS=0; bS=1;
	htmlTono="<table border=0 cellpadding=0 cellspacing=0 width="+ej3CP_config[ej3CP_pActual][CELL]+" height="+Math.round((255/ej3CP_config[ej3CP_pActual][BITS])*ej3CP_config[ej3CP_pActual][CELL])+">";
	for(r=0;r<=255;r=r+ej3CP_config[ej3CP_pActual][BITS]) {
		aux=ej3Tools_dec2hex(r)+ej3Tools_dec2hex(g)+ej3Tools_dec2hex(b);
		htmlTono+="<tr><td bgcolor=\"#"+aux+"\" onClick=\"ej3PopUp_change("+r+")\" width="+ej3CP_config[ej3CP_pActual][CELL]+" height="+ej3CP_config[ej3CP_pActual][CELL]+"></td></tr>";
		if(g==255) gS = 1; else if(g == 0) gS = 0;
		if(b==255) bS = 1; else if(b == 0) bS = 0;
		if(gS==0) g=g+(ej3CP_config[ej3CP_pActual][BITS]*2); else g=g-(ej3CP_config[ej3CP_pActual][BITS]*2);
		if(bS==0) b=b+(ej3CP_config[ej3CP_pActual][BITS]*4); else b=b-(ej3CP_config[ej3CP_pActual][BITS]*4);
	}
	htmlTono+="<tr><td bgcolor=\"#ffffff\" onclick=\"ej3PopUp_change(255)\" width="+ej3CP_config[ej3CP_pActual][CELL]+" height="+ej3CP_config[ej3CP_pActual][CELL]+"></td></tr>";
	htmlTono+="</table>";
	
	//Empaquetamos todo en una unica tabla
	html='<table border=0 cellpadding=0 cellspacing=0>';
	html+='<tr><td valign=top>'+htmlPaleta+'</td><td valign=top style="border-left:1px solid #000000;">'+htmlTono+'</td></tr>';
	html+='<tr><td colspan=2>';
	html+='<table border=0 cellpadding=0 cellspacing=0 width=100%><tr>';
	html+='<td width=40% onMouseOver=\"document.getElementById(\'ej3muestraValor\').style.color=\'#000000\'; document.getElementById(\'ej3muestraValorVersus\').style.color=\'#000000\'; ej3PopUp_sample(this);\" onClick=\"ej3PopUp_click(255,255,255);\" height='+ej3CP_config[ej3CP_pActual][CELL]+' style=\"background-color:#ffffff;\"></td>';
	html+='<td width=20% onMouseOver=\"ej3PopUp_sample(this);\" onClick=\"ej3PopUp_click();\" height='+ej3CP_config[ej3CP_pActual][CELL]+'></td>';
	html+='<td width=40% onMouseOver=\"document.getElementById(\'ej3muestraValor\').style.color=\'#FFFFFF\'; document.getElementById(\'ej3muestraValorVersus\').style.color=\'#FFFFFF\'; ej3PopUp_sample(this);\"  onClick=\"ej3PopUp_click(0,0,0);\" height='+ej3CP_config[ej3CP_pActual][CELL]+' style=\"background-color:#000000;\"></td>';
	html+='</tr></table>';
	html+='</td></tr>';
	html+='<tr><td colspan=2>';
	html+='<table border=0 cellpadding=2 cellspacing=0 width=100%>';
	html+='<tr><td id=ej3muestraColor align=center><span id=ej3muestraValor style="font-family:Arial; font-size:8pt;"></span></td></tr>';
	html+='<tr><td id=ej3muestraColorVersus align=center><span id=ej3muestraValorVersus style="font-family:Arial; font-size:8pt;"></span></td></tr>';
	html+='</table>';
	html+='</td></tr>';
	html+='</table>';
	
	ej3CP_div.innerHTML=html;
}
function ej3Tools_setColorTyped(oObj) {
	//----------------------------------------------------------------
	//Determinamos el picker en uso
	//----------------------------------------------------------------
	ej3CP_pAnterior=ej3CP_pActual;
	ej3CP_pActual=parseInt(oObj.id.replace('ej3Text',''));
	//Actualizamos el color en la configuracion y en la pantalla
	if(!ej3Tools_isColor(oObj.value)) oObj.value='';
	oObj.value=oObj.value.toUpperCase();
	ej3CP_config[ej3CP_pActual][VALUE]=oObj.value;
	document.getElementById(oObj.id.replace('ej3Text','ej3Span')).style.backgroundColor=oObj.value;
}
function ej3Tools_isColor(value) {	//OK
	if(value.length!=7) return false;
	if(value.substr(0,1)!='#') return false;
	aux=ej3Tools_HEXcolor2RGB(value);
	for(i=0;i<3;i++) {
		if(isNaN(aux[i])) return false;
		if(aux[i]>255 || aux[i]<0) return false;
	}
	return true;
}
function ej3Tools_HEXcolor2RGB(value) {	//OK
	value=value.replace('#','');
	var colorRGB=new Array();
	colorRGB[0]=value.substr(0,2);
	colorRGB[1]=value.substr(2,2);
	colorRGB[2]=value.substr(4,2);
	for(i=0;i<3;i++) colorRGB[i]=parseInt(colorRGB[i],16);
	return colorRGB;
}
function ej3Tools_RGBcolor2HEX(r,g,b) {	//OK
	var colorHEX='#'+ej3Tools_dec2hex(r)+ej3Tools_dec2hex(g)+ej3Tools_dec2hex(b);
	return colorHEX;
}
function ej3Tools_dec2hex(value) {	//OK
	// This function is written by Guido Socher, guido at linuxfocus dot org
	var ConvArray=new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F');
    var retval='';
    var intnum;
    var tmpnum;
    var i=0;
    intnum=parseInt(value,10);
    if(isNaN(intnum)) {
		retval='NaN';
	} else {
		while(intnum>0.9) {
			i++;
			tmpnum=intnum;
			// concatinate return string with new digit:
			retval=ConvArray[tmpnum%16]+retval;
			intnum=Math.floor(tmpnum/16);
			if(i>100) {	// break infinite loops
				retval='NaN';
				break;
			}
		}
	}
	if(retval.length==1) {
		retval='0'+retval;
	} else if(retval.length==0) {
		retval='00';
	}
    return retval;
}
function ej3Debug() {	//OK
	var propiedades=new Array('Name','Value','Bits','Cell','Sample','SampleText','Versus','VersusText','CSSclass','Style','Hue');
	debug='<table border=1 cellpadding=3 cellspacing=0 style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal;	color: #000000">';
	debug+='<tr bgcolor=#FFCCCC><td align=center colspan=10><b><u>EJ3 ColorPicker v'+ej3CP_version+' Debug Info</u></b></td></tr>';
	debug+='<tr bgcolor=#CCFFCC>';
	debug+='<td align=center colspan=10><b>ej3CP_version=</b><i>'+ej3CP_version+'</i>&nbsp;&nbsp;&nbsp;&nbsp;<b>ej3CP_pickers=</b>'+ej3CP_pickers+'&nbsp;&nbsp;&nbsp;&nbsp;<b>ej3CP_pActual=</b>'+ej3CP_pActual+'<b>&nbsp;&nbsp;&nbsp;&nbsp;ej3CP_pAnterior=</b>'+ej3CP_pAnterior;
	aux=ej3CP_noColor;
	while(aux.indexOf('<')!=-1) aux=aux.replace('<','&lt;');
	debug+='<br><b>ej3CP_noColor=</b><i>'+aux+'</i></td>';
	debug+='</tr>';
	debug+='<tr>';
	debug+='<td bgcolor=#CCFFCC align=center><b>CONFIG</b></td>';
	for(i=1;i<=ej3CP_pickers;i++) debug+='<td align=center bgcolor='+ej3CP_config[i][VALUE]+'><span style="border: 1px solid #000000; font-weight: bold; background-color: #FFFFCC">&nbsp;Picker '+i+'&nbsp;</span></td>';
	debug+='</tr>';
	for(i=0;i<propiedades.length;i++) {
		debug+='<tr bgcolor=#FFFFCC>';
		debug+='<td bgcolor=#CCFFCC align=right><b>'+propiedades[i]+'</b>&nbsp;&nbsp;</td>';
		for(j=1;j<=ej3CP_pickers;j++) debug+='<td align=center>&nbsp;'+ej3CP_config[j][i]+'&nbsp;</td>';
		debug+='</tr>';
	}
	debug+='<tr>';
	debug+='<td bgcolor=#CCFFCC align=center><b>CONFIG</b></td>';
	for(i=1;i<=ej3CP_pickers;i++) debug+='<td align=center bgcolor='+ej3CP_config[i][VALUE]+'><span style="border: 1px solid #000000; font-weight: bold; background-color: #FFFFCC">&nbsp;Picker '+i+'&nbsp;</span></td>';
	debug+='</tr>';
	debug+='</table>';

	document.getElementById('ej3Debug').innerHTML=debug;
}