var idField;
	var cellSize=10;
	var precision=7;
	var hexStr = "0123456789ABCDEF";
	var currentColor="";
	writeColorPicker();

	
	function color_picker(id, cell_size, precis, e){
		idField=id;
		if(cell_size)
			cellSize=cell_size;
		if(precis)
			precision= precis;
		if( !document.getElementById("colorselector") )	
			writeColorPicker();
		opencolorselector(e);	
	}
	
	
	function selectcolor(c) 
	{
		if(c=="current")
//			c=document.getElementById('colorViewer').style.backgroundColor;
			c=currentColor;
		if(c=="none")
			c="";
		document.getElementById(idField).value=c;
		if( document.getElementById(idField+'_btn') )
			document.getElementById(idField+'_btn').style.background=c;
	
		closecolorselector();
	}
	
	
	function opencolorselector(e)
	{	
		selector= document.getElementById('colorselector');	
		selector.style;
		field=document.getElementById(idField);
		
		
		if(selector.style.visibility=="visible"){
			closecolorselector();
		}

		currColor=field.value;
		seecolor(currColor);
		
		button=document.getElementById(idField+"_btn");
		
		selector.style.left= (calcOffsetLeft(button)+ button.offsetWidth) + "px";
		selector.style.top= (calcOffsetTop(button) + button.offsetHeight) + "px";
		selector.style.visibility="visible";
		selector.scrollIntoView();		
	}
		
	
	function closecolorselector()
	{
		document.getElementById('colorselector').style.visibility="hidden";
	}
	
	
	function seecolor(c)
	{
		if(c=="hexa"){
			c=document.getElementById('colorHexa').value;
			if(c.indexOf("#")==-1 && c.length==6)
				c="#"+c;			
		}
		document.getElementById('colorViewer').style.backgroundColor=c;
		document.getElementById('colorHexa').value=c;
		currentColor= c;
	}
		
		
	function inter2hexa(i)
	{
		var val=Math.round(255* (i-1) / (precision-1) );		
		var low = val % 16;
		var high = (val - low)/16;
		var hex = "" + hexStr.charAt(high) + hexStr.charAt(low);
		return hex;
	}
	
	
	function inter2hexaGray(a, b)
	{
		return "" + inter2hexa(a).substr(0,1) + inter2hexa(b).substr(0,1);
	}
	
		
	function writeColorPicker(){
		var w= Math.ceil( (precision +1) / 2 ) * precision * (cellSize +1);
		document.write("<div id='colorselector' style='text-align:center; position:absolute;top:1px;visibility:hidden;width:"+ w +"px;z-index:10;border : thin solid #000000;background : #FFFFFF;'>");
		
		document.write("<table style='width:100%;padding:2px;' border=0 cellspacing=0 cellpadding=0>"
				+"<tr>"
				+"	<td>"
				+"		<input type='button' onclick='closecolorselector();' value='X'>"
				+"		<input type='button' onclick='selectcolor(\"none\");' value='none'>"
				+"		<input type='button' onclick='selectcolor(\"current\");' value='apply'>"
				+"	</td>"
				+"	<td style='text-align:center;'></td>"
				+"	<td style='width:150px;text-align:right;'><div id='colorViewer' style=';margin: 1px;border: solid black 1px;'>&nbsp</div></td>"
				+"</tr><tr>"
				+"	<td style='text-align:center;color: #000000;font: 12px sans-serif;' colspan='2'>Clic on a color to choose it</td>"
				+"	<td style='width:150px;'>"
				+"		<input type='text' id='colorHexa' size='8' value='' onchange='seecolor(\"hexa\");'>"
				+"		<input type='button' onclick='seecolor(\"hexa\");' value='test'>"
				+"	</td>"	
				+"</tr>"
				+"</table>"
			+"<table border=0 cellspacing=0 cellpadding=0 style='cursor: pointer;'>"
			+"	<tr>");
		for(var r=1; r<= precision; r++)
		{
			var tr=(r==Math.ceil( precision/2 ) +1)?"</tr><tr>":"";
			document.write(tr +"<td><table border=0 cellspacing=1 cellpadding=0>");
			for(var g=1; g<=precision; g++)
			{
				document.write("<tr>");
				for(var b=1; b<=precision; b++)
				{
					var hexa="#"+ inter2hexa(r) + inter2hexa(g) + inter2hexa(b);				
					document.write("<td height="+ cellSize +"px width="+ cellSize +"px bgcolor='"+ hexa +"' onclick='selectcolor(\""+ hexa +"\")' onmouseover='seecolor(\""+ hexa +"\")'></td>");
				}
				document.write("</tr>\n");			
			}
			document.write("</table></td>");
		}
		document.write("<td><table border=0 cellspacing=1 cellpadding=0>");
		for(var g=1; g<= precision; g++)
		{
			document.write("<tr>");
			for(var b=1; b<= precision; b++)
			{
				var col= inter2hexaGray(g,b);
				var hexa="#"+ col + col +col;				
				document.write("<td height='"+ cellSize +"px' width='"+ cellSize +"px' bgcolor='"+ hexa +"' onclick='selectcolor(\""+ hexa +"\")' onmouseover='seecolor(\""+ hexa +"\")'></td>");
			}
			document.write("</tr>\n");			
		}
		document.write("</table></td>\n</tr></table></div>");
	}
	
	function calcOffsetLeft(elem){
	  return calcOffset(elem, "offsetLeft");
	}
	
	function calcOffsetTop(elem){
	  return calcOffset(elem, "offsetTop");
	}
	
	function calcOffset(element,attr){
	  var offset=0;
	  while(element){
		offset+=element[attr];
		element=element.offsetParent;
	  }
	  return offset
	}