/* To initialise this function put:
"onmousemove="colorpicker(event, 'CM1', 'CI1', 'iFr1', 'L1')" onmousedown="colorpicker(event, 'CM1', 'CI1', 'iFr1', 'L1')"
into the div tag of the colorpicker.html file

id1 = "CM1" 		// ColorMap entry
id2 = "CI1"		// Color Input Form
id3 = "iFr1"		// iFrame
id4 = "L1"		// Little Div

*/
  
//======== FUNCTION COLORPICKER =================================================================

function colorpicker(event, id1, id2, id3, id4)
  {
//COORDINATES
var  X=event.clientX;
var  Y= event.clientY;

var	L=430;		// The length of the piece
var	H=40;		// The height of the piece
var	x=X*255*7/L;	// Converting length into measurement units
var	y=Y*255*2/H;	// Converting height of the Top piece into measurement units
	
// RED-YELLOW ----------------------------------------------------------------------
//TOP
if (x<=255)
{
if (y<255)
	{
var	 r=255;
var	 g=x+(255-y)*((255-x)/255); // color changes from 0 to 255. in the top rectangle.
var	 b=255-y;
	}
//BOTTOM
else 	{
	y=y-255;
	r=255-y; 
	g=x-y*(x/255); // color changes from 0 to 255 in the bottom rectangle.
	b=0;
	}
}


// YELLOW-GREEN ----------------------------------------------------------------------
//	From here on redefining coordinates because
//	only once defining doesn't work with multiple if conditions
	X=event.clientX;
	Y= event.clientY;

	L=430;
	H=40;
	x=X*255*7/L;
	y=Y*255*2/H;

if (x>255)
{
x=x-255;
//TOP	
if (y<255)
	{
	r=255-x+x*(255-y)/255; // from 255 to 0. in the top rectangle.
	g=255;
	b=255-y;
	}
//BOTTOM
else 	{
	y=y-255;
	r=255-x-y*(255-x)/255; // from 255 to 0. in the bottom rectangle.
	g=255-y;	
	b=0;
	}
}

//-- GREEN-CYAN ----------------------------------------------------------------------
	X=event.clientX;
	Y= event.clientY;

	L=430;
	H=40;
	x=X*255*7/L;
	y=Y*255*2/H;
	
if (x>510)
{
x=x-510;
//TOP	
if (y<255)
	{
	r=255-y;
	g=255;
	b=x+(255-y)*((255-x)/255); // from 0 to 255. in the top rectangle.
	}
//BOTTOM
else 	{
	y=y-255;
	r=0;
	g=255-y;	
	b=x-y*(x/255); // from 0 to 255. in the bottom rectangle.
	}
}
//-- CYAN-BLUE -----------------------------------------------------------------
	X=event.clientX;
	Y= event.clientY;

	L=430;
	H=40;
	x=X*255*7/L;
	y=Y*255*2/H;

if (x>765)
{
x=x-765;
//TOP	
if (y<255)
	{
	r=255-y;
	g=255-x+x*(255-y)/255; // from 255 to 0. in the top rectangle.
	b=255;
	}
//BOTTOM
else 	{
	y=y-255;
	r=0;
	g=255-x-y*(255-x)/255; // from 255 to 0. in the bottom rectangle.	
	b=255-y;
	}
}

//-- BLUE-MAGENTA -----------------------------------------------------------------
	X=event.clientX;
	Y= event.clientY;

	L=430;
	H=40;
	x=X*255*7/L;
	y=Y*255*2/H;
if (x>1020)
{
x=x-1020;
//TOP	
if (y<255)
	{
	r=x+(255-y)*((255-x)/255); // from 0 to 255. in the top rectangle.
	g=255-y;
	b=255;
	}
//BOTTOM
else 	{
	y=y-255;
	r=x-y*(x/255); // from 0 to 255. in the bottom rectangle.
	g=0;	
	b=255-y;
	}
}
//-- MAGENTA-RED -----------------------------------------------------------------
	X=event.clientX;
	Y= event.clientY;

	L=430;
	H=40;
	x=X*255*7/L;
	y=Y*255*2/H;
	
if (x>1275)
{
x=x-1275;
//TOP	
if (y<255)
	{
	r=255;
	g=255-y;
	b=255-x+x*(255-y)/255; // from 255 to 0. in the top rectangle.
	}
//BOTTOM
else 	{
	y=y-255;
	r=255-y;
	g=0;	
	b=255-x-y*(255-x)/255; // from 255 to 0. in the bottom rectangle.
	}
}

//-- BLACK and WHITE --------------------------------------------------------------
	X=event.clientX;
	Y= event.clientY;

	L=430;
	H=40;
	x=X*255*7/L;
	y=Y*255*2/H;

if (x>1530)
{
x=x-1530;
	r=255-x
	g=255-x
	b=255-x
}

// CALCUILATIONS --------------------------------

	r=Math.round(r)	
	r=r.toString(16).toUpperCase( )
    if (r.length==1)
	r="0"+r.charAt(0).toUpperCase( )

	g=Math.round(g)	
	g=g.toString(16).toUpperCase( )
    if (g.length==1)
	g="0"+g.charAt(0).toUpperCase( )

	b=Math.round(b)	
	b=b.toString(16).toUpperCase( )
    if (b.length==1)
	b="0"+b.charAt(0).toUpperCase( )

var trigger = event.type;
var outcolor = "#"+r+g+b;
var outinput = r+g+b;
if (trigger== 'mousemove')
{
// OUTPUT -- change color in the Color Map div -------------------------------------
window.parent.document.getElementById(id1).style.backgroundColor = outcolor;
}
  
if (trigger== 'mousedown') 
{
// OUTPUT -- write color to the input field --------------------------------
Write = window.parent.document.getElementById(id2);
//Write.setAttribute('value',outinput);
Write.value=outinput;

// ID should be the one of the iframe container and differnt for each entry
// in the Color Map
window.parent.document.getElementById(id1).style.backgroundColor = outcolor;
window.parent.document.getElementById(id4).style.backgroundColor = outcolor;
window.parent.document.getElementById(id3).style.display = 'none';




}
}