var targetname="";
var circle_type="rgb";

function setcircletype()
{
 var i=document.getElementById("selectcircle").selectedIndex;
 circle_type=document.getElementById("selectcircle")[i].value;
 fill_scale();
}

if (typeof(document.captureEvents) != 'undefined')
{
 document.captureEvents(Event.MOUSEOVER | Event.MOUSEMOVE | Event.CLICK | Event.MOUSEOUT);
 document.onmouseover = Over;
 document.onmousemove = Over;
 document.onclick = Click;
 document.onmouseout = Out;
}

var old_red=128, old_green=128, old_blue=128, old_grey=128, colorname="grey";
var colorvalue=128;

var loading=true;
var grey,markedfield="",zoomlevel=0,sup_field="",tmp_field="",radius=5;
 var degree_X=new Array(0,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-11,-12,-12,-13,-13,-13,-14,-14,-14,-14,-14,-13,-13,-13,-12,-12,-11,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,11,12,12,13,13,13,14,14,14,14,14,13,13,13,12,12,11,11,10,9,8,7,6,5,4,3,2,1);
 var degree_Y=new Array(0,0,0,1,1,1,2,2,3,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,25,26,26,27,27,27,28,28,28,28,28,27,27,27,26,26,25,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,3,2,2,1,1,1,0,0);

function set_cross(color,pos)
{
 if (pos == -1) {hide_cross(color); return};
 document.getElementById("show"+color).innerHTML=pos;
 document.getElementById(color+"cross").style.backgroundImage="url('cross.gif')";
 document.getElementById(color+"cross").style.backgroundPosition=pos+"px 0px";
}

function hide_cross(color)
{
 document.getElementById(color+"cross").style.backgroundImage="none";
 document.getElementById("show"+color).innerHTML="?";
}

function get_cross(e)
{
 var pos=old_grey;
 if (typeof(e.offsetX) !='undefined') pos=e.offsetX-1;
 if (typeof(e.layerX) !='undefined') pos=e.layerX-1;
 if ((pos < 0) || (pos > 255))
 {
  if (colorname == "red") pos=old_red;
  if (colorname == "green") pos=old_green;
  if (colorname == "blue") pos=old_blue;
  if (colorname == "grey") pos=old_grey;
 }
 return pos;
}

function Over(e)
{
 e = e || window.event;
 var targetname="greyscale";
 if (typeof(e.target) != 'undefined') targetname=e.target.name;
 if (typeof(e.srcElement) != 'undefined') targetname=e.srcElement.name;
 var color=targetname.replace("scale","");
 if ((color != "grey") && (color != "red") && (color != "green") && (color != "blue")) return;
 colorname=color;
 var pos=get_cross(e);
 set_cross(color,pos);
}

function Click(e)
{
 e = e || window.event;
 var targetname="greyscale";
 if (typeof(e.target) != 'undefined') targetname=e.target.name;
 if (typeof(e.srcElement) != 'undefined') targetname=e.srcElement.name;
 var color=targetname.replace("scale","");
 if ((color != "grey") && (color != "red") && (color != "green") && (color != "blue")) return;
 colorname=color;
 var pos=get_cross(e);
 set_cross(color,pos);
 if (color == "red") old_red=pos;
 if (color == "green") old_green=pos;
 if (color == "blue") old_blue=pos;
 if (color == "grey") old_grey=pos;
 fill_scale();
}

function Out()
{
 if (colorname == "red") set_cross("red",old_red);
 if (colorname == "green") set_cross("green",old_green);
 if (colorname == "blue") set_cross("blue",old_blue);
 if (colorname == "grey") set_cross("grey",old_grey);
}

function fill_scale()
{
 function rgb_circle()
 {
  if (grey <= 76) {red_0_0=Math.round(grey*255/76); green_0_0=0; blue_0_0=0;}
  else {red_0_0=255; green_0_0=Math.round(255*(grey-76)/(255-76)); blue_0_0=green_0_0;} // red corner
  if (grey <= 104) {red_0_1=Math.round(grey*255/104); green_0_1=0; blue_0_1=red_0_1;}
  else {red_0_1=255; green_0_1=Math.round(255*(grey-104)/150); blue_0_1=255;} // magenta corner
  if (grey <= 226) {red_1_0=Math.round(grey*255/226); green_1_0=red_1_0; blue_1_0=0;}
  else {red_1_0=255; green_1_0=255; blue_1_0=Math.round(255*(grey-226)/29);} // yellow corner
  if (grey <= 29) {red_1_2=0; green_1_2=0; blue_1_2=Math.round(grey*255/29);}
  else {red_1_2=Math.round(255*(grey-29)/(255-29)); green_1_2=red_1_2; blue_1_2=255;} // blue corner
  if (grey <= 150) {red_2_0=0; green_2_0=Math.round(grey*255/150); blue_2_0=0;}
  else {red_2_0=Math.round(255*(grey-150)/(255-150)); green_2_0=255; blue_2_0=red_2_0;} // green corner
  if (grey <= 178) {red_2_1=0; green_2_1=Math.round(grey*255/178); blue_2_1=green_2_1;}
  else {red_2_1=Math.round(255*(grey-178)/76); green_2_1=255; blue_2_1=255;} // cyan corner
 }
 function complement_circle()
 {
  if (grey <= 76) {red_0_0=Math.round(grey*255/76); green_0_0=0; blue_0_0=0;}
  else {red_0_0=255; green_0_0=Math.round(255*(grey-76)/(255-76)); blue_0_0=green_0_0;} // red stays
  if (grey <= 104) {red_0_1=Math.round(grey*255/104); green_0_1=0; blue_0_1=red_0_1;}
  else {red_0_1=255; green_0_1=Math.round(255*(grey-104)/150); blue_0_1=255;} // magenta stays
  if (grey <= 226) {red_2_0=Math.round(grey*255/226); green_2_0=red_2_0; blue_2_0=0;}
  else {red_2_0=255; green_2_0=255; blue_2_0=Math.round(255*(grey-226)/29);} // yellow moved
  if (grey <= 29) {red_1_2=0; green_1_2=0; blue_1_2=Math.round(grey*255/29);}
  else {red_1_2=Math.round(255*(grey-29)/(255-29)); green_1_2=red_1_2; blue_1_2=255;} // blue stays
  if (grey <= 150) {red_2_1=0; green_2_1=Math.round(grey*255/150); blue_2_1=0;}
  else {red_2_1=Math.round(255*(grey-150)/(255-150)); green_2_1=255; blue_2_1=red_2_1;} // green moved
  if (grey <= 152) {red_1_0=Math.round(grey*255/152); green_1_0=Math.round(grey*130/152); blue_1_0=0;}
  else {blue_1_0=Math.round(255*(grey-152)/(255-152)); red_1_0=255; green_1_0=Math.round(blue_1_0+(255-blue_1_0)*76/150); }
  // cyan turned orange and moved
 }
 function triple2hex(r,g,b)
 {
  return "#"+decimal2hex(r)+""+decimal2hex(g)+""+decimal2hex(b);
 }
 var color;
 if (colorname == "grey") {color=old_grey} else {old_grey=-1};
 set_cross("grey",old_grey);
 loading=false;
 grey=color;
 if (circle_type == "rgb") {rgb_circle()} else {complement_circle()};
 fill_cell(triple2hex(red_0_0,green_0_0,blue_0_0),"act_0_0");
 fill_cell(triple2hex(red_0_1,green_0_1,blue_0_1),"act_0_1");
 fill_cell(triple2hex(red_1_0,green_1_0,blue_1_0),"act_1_0");
 fill_cell(triple2hex(grey,grey,grey),"act_1_1");
 fill_cell(triple2hex(red_1_2,green_1_2,blue_1_2),"act_1_2");
 fill_cell(triple2hex(red_2_0,green_2_0,blue_2_0),"act_2_0");
 fill_cell(triple2hex(red_2_1,green_2_1,blue_2_1),"act_2_1");

 zoomlevel=0;
 document.getElementById("zoomlevel").innerHTML="ZOOM LEVEL = "+zoomlevel;
 fill_hexagon();
 lock_bgcolor("field_"+(2*radius)+"_"+radius);
}

function  fill_hexagon()
{
 var hex_0_0=hex_version(document.getElementById("act_0_0").style.backgroundColor);
 var hex_1_1=hex_version(document.getElementById("act_1_1").style.backgroundColor);
 var hex_1_2=hex_version(document.getElementById("act_1_2").style.backgroundColor);
 var hex_2_0=hex_version(document.getElementById("act_2_0").style.backgroundColor);
 var red1=hex2decimal_red(hex_0_0);
 var blue0=hex2decimal_blue(hex_0_0);
 var redcenter=hex2decimal_red(hex_1_1);
 var greencenter=hex2decimal_green(hex_1_1);
 var bluecenter=hex2decimal_blue(hex_1_1);
 var green0=hex2decimal_green(hex_1_2);
 var blue1=hex2decimal_blue(hex_1_2);
 var red0=hex2decimal_red(hex_2_0);
 var green1=hex2decimal_green(hex_2_0);
 function fill_triangle(topleft,topright,bottom,triangle)
 {
  var hex_topleft=hex_version(document.getElementById(topleft).style.backgroundColor);
  var hex_topright=hex_version(document.getElementById(topright).style.backgroundColor);
  var hex_bottom=hex_version(document.getElementById(bottom).style.backgroundColor);
  var redleft=hex2decimal_red(hex_topleft);
  var greenleft=hex2decimal_green(hex_topleft);
  var blueleft=hex2decimal_blue(hex_topleft);
  var redright=hex2decimal_red(hex_topright);
  var greenright=hex2decimal_green(hex_topright);
  var blueright=hex2decimal_blue(hex_topright);
  var redbottom=hex2decimal_red(hex_bottom);
  var greenbottom=hex2decimal_green(hex_bottom);
  var bluebottom=hex2decimal_blue(hex_bottom);

  var smin,smax,hex,redstep,greenstep,bluestep;
  var red0,red1,green0,green1,blue0,blue1;
  var redleft_stepdown=(redbottom-redleft)/radius;
  var redright_stepdown=(redbottom-redright)/radius;
  var greenleft_stepdown=(greenbottom-greenleft)/radius;
  var greenright_stepdown=(greenbottom-greenright)/radius;
  var blueleft_stepdown=(bluebottom-blueleft)/radius;
  var blueright_stepdown=(bluebottom-blueright)/radius;
  for (var r=0; r<=radius; r++)
  {
   red0=redleft+r*redleft_stepdown;
   red1=redright+r*redright_stepdown;
   green0=greenleft+r*greenleft_stepdown;
   green1=greenright+r*greenright_stepdown;
   blue0=blueleft+r*blueleft_stepdown;
   blue1=blueright+r*blueright_stepdown;
   if ((triangle == "red") || (triangle == "cyan")) {smin=r; smax=radius} else {smin=0; smax=radius-r};
   if (smin == smax) {redstep=0; greenstep=0; bluestep=0}
   else {redstep=(red1-red0)/(smax-smin); greenstep=(green1-green0)/(smax-smin); bluestep=(blue1-blue0)/(smax-smin)};
   for (var s=smin; s<=smax; s++)
   {
    hex="#"+decimal2hex(red0+(s-smin)*redstep)+""+decimal2hex(green0+(s-smin)*greenstep)+""+decimal2hex(blue0+(s-smin)*bluestep);
    if (triangle == "red") fill_cell(hex,"field_"+(radius+r)+"_"+(3*radius+s-(2*smax+r)));
    if (triangle == "green") fill_cell(hex,"field_"+(2*radius+r)+"_"+(s+r));
    if (triangle == "blue") fill_cell(hex,"field_"+(2*radius+r)+"_"+(radius+s+r));
    if (triangle == "cyan") fill_cell(hex,"field_"+(3*radius-r)+"_"+(radius+s-r));
    if (triangle == "magenta") fill_cell(hex,"field_"+(2*radius-r)+"_"+(3*radius+s-(2*smax+r)));
    if (triangle == "yellow") fill_cell(hex,"field_"+(2*radius-r)+"_"+(s+radius-smax));
   }
  }
 }
 fill_triangle("act_0_0","act_0_1","act_1_1","red");
 fill_triangle("act_1_0","act_1_1","act_2_0","green");
 fill_triangle("act_1_1","act_1_2","act_2_1","blue");
 fill_triangle("act_1_0","act_1_1","act_0_0","yellow");
 fill_triangle("act_1_1","act_1_2","act_0_1","magenta");
 fill_triangle("act_2_0","act_2_1","act_1_1","cyan");
 if (zoomlevel == 0) {document.getElementById("supscale").style.visibility="hidden"};
}

function lock_bgcolor(id)
{
 if (loading) return;
 var hex=hex_version(document.getElementById(id).style.backgroundColor);
 markedfield=""; fill_bgcolor(id);
 document.getElementById("marked").style.visibility="visible";
 var topstring=document.getElementById(id).style.top;
 var top=topstring.substring(0,topstring.length-2)-4;
 var leftstring=document.getElementById(id).style.left;
 var left=leftstring.substring(0,leftstring.length-2)-5;
 document.getElementById("marked").style.top=top+"px";
 document.getElementById("marked").style.left=left+"px";
 markedfield=id;
}

function unlock_bgcolor()
{
 markedfield="";
 document.getElementById("marked").style.visibility="hidden";
}

function fill_bgcolor(id)
{
 function antihex(hex)
 {
  var x = 16777215-parseInt(hex.substring(1),16);
  var R=Math.round(x).toString(16);
  R="#000000".substring(0,7-R.length)+R;
  return R.toUpperCase();
 }
 function write_pct(red)
 {
  return red+"/255<br>="+Math.round(100*red/255)+"%";
 }
 function write_degrees(hye)
 {
  return hye+"/255<br>="+Math.round(360*hye/256)+"&#176";
 }
 function find_hye(min,max,red,green,blue)
 {
  var divi=6*(max-min); var h=0;
  if (divi!=0)
  {
   if (max==red)
   {
    if (blue <= green) h=(green-blue)/divi
    else h=1+(green-blue)/divi;
   }
   else 
   {
    if (max==green) h=1/3+(blue-red)/divi
    else h=2/3+(red-green)/divi;
   }
  }
  var f=Math.round(256*h);
  if (f==256) f=0;
  return f;
 }
 function set_hye_dot(hye)
 {
  var top=14;
  var left=0;
  if (min != max)
  {
   var d=Math.round(79*hye/255);
   left=degree_X[d];
   top=degree_Y[d];
  };
  document.getElementById("hye_dot").style.top=(top+11)+"px";
  document.getElementById("hye_dot").style.left=(left+25)+"px";
 }
 function find_saturation(min,max)
 {
  if (max==min) return 0;
  if (max+min <= 255) var s=255*(max-min)/(max+min); else var s=255*(max-min)/(2*255-(max+min));
  return Math.round(s);
 }
 function find_lightness(min,max)
 {
  return Math.round((max+min)/2);
 }
 function find_min(red,green,blue)
 {
  var min=red; if (green < min) min=green; if (blue < min) min=blue;
  return min;
 }
 function find_max(red,green,blue)
 {
  var max=red; if (green > max) max=green; if (blue > max) max=blue;
  return max;
 }
 function set_backgroundColor(field,hex)
 {
  document.getElementById(field).style.backgroundColor=hex;
 }
 function set_greyColor(field,hex)
 {
  var id=document.getElementById(field).style;
  id.backgroundColor=hex;
  if (hex < "#8") {id.color="white"} else {id.color="black"};
 }
 if (loading) return;
 if (markedfield!="") return;
 var hex=hex_version(document.getElementById(id).style.backgroundColor).toUpperCase();
 document.getElementById("wholepage").style.backgroundColor=hex;
 document.getElementById("RGB_headline").innerHTML="RGB = "+hex;
 var red=hex2decimal_red(hex);
 var green=hex2decimal_green(hex);
 var blue=hex2decimal_blue(hex);
 var min=find_min(red,green,blue);
 var max=find_max(red,green,blue);
  var hred="#FF"+decimal2hex(255-red)+decimal2hex(255-red);
 set_backgroundColor("redfield",hred);
 document.getElementById("red_amount").innerHTML=write_pct(red);
 document.getElementById("red_column").style.height=red+"px";
  var hgreen="#"+decimal2hex(255-green)+"FF"+decimal2hex(255-green);
 set_backgroundColor("greenfield",hgreen);
 document.getElementById("green_amount").innerHTML=write_pct(green);
 document.getElementById("green_column").style.height=green+"px";
  var hblue="#"+decimal2hex(255-blue)+decimal2hex(255-blue)+"FF";
 set_backgroundColor("bluefield",hblue);
 document.getElementById("blue_amount").innerHTML=write_pct(blue);
 document.getElementById("blue_column").style.height=blue+"px";

 var anti=hex_version(antihex(hex));
 var cyan=hex2decimal_red(anti);
 var magenta=hex2decimal_green(anti);
 var yellow=hex2decimal_blue(anti);

 var minK=find_min(cyan,magenta,yellow);
 var key=minK;
 var cyanK=cyan-key; var magentaK=magenta-key; var yellowK=yellow-key;
 var smyk="#"+decimal2hex(cyanK)+decimal2hex(magentaK)+decimal2hex(yellowK);
 document.getElementById("CMY_headline").innerHTML="CMYK = "+smyk+" #"+decimal2hex(key);
  var hcyanK=antihex(smyk.substring(0,3)+"0000");
 set_backgroundColor("cyanfield",hcyanK);
 document.getElementById("cyan_amount").innerHTML=write_pct(cyanK);
  var hmagentaK=antihex("#00"+smyk.substring(3,5)+"00");
 set_backgroundColor("magentafield",hmagentaK);
 document.getElementById("magenta_amount").innerHTML=write_pct(magentaK);
  var hyellowK=antihex("#0000"+smyk.substring(5,7));
 set_backgroundColor("yellowfield",hyellowK);
 document.getElementById("yellow_amount").innerHTML=write_pct(yellowK);
  var cmy_pos=216-key;
 if (cmy_pos < 40) cmy_pos=40;
 if (cmy_pos > 176) cmy_pos=176;
 document.getElementById("cyanfield").style.top=cmy_pos+"px";
 document.getElementById("magentafield").style.top=cmy_pos+"px";
 document.getElementById("yellowfield").style.top=cmy_pos+"px";
  var key_pos=255-key;
  var hkey=decimal2hex(255-key);
 set_greyColor("keyfield","#"+hkey+hkey+hkey);
 document.getElementById("key_amount").innerHTML=write_pct(key);
 document.getElementById("key_column").style.top=key_pos+"px";
 document.getElementById("key_column").style.height=key+"px";

  var hye=find_hye(min,max,red,green,blue);
 document.getElementById("hye").innerhtml=hye;
 document.getElementById("hye").innerHTML=write_degrees(hye);
 set_hye_dot(hye);
  var saturation=find_saturation(min,max);
 document.getElementById("saturation").innerHTML=write_pct(saturation);
 document.getElementById("saturation_column").style.height=saturation+"px";
  var lightness=find_lightness(min,max);
 var hlightness="#"+decimal2hex(lightness)+decimal2hex(lightness)+decimal2hex(lightness);
 set_greyColor("lightnessfield",hlightness);
 document.getElementById("lightness").innerHTML=write_pct(lightness);
 document.getElementById("lightness_column").style.height=lightness+"px";
 var hsl="#"+decimal2hex(hye)+decimal2hex(saturation)+decimal2hex(lightness);
 document.getElementById("HSL_headline").innerHTML="HSL = "+hsl;

 fill_subscale(id);
}

function fill_subscale(id)
{
 var x=id.split("_"); var r1=x[1]*1; var s1=x[2]*1;
 if (zoomlevel == 2)
 {
  document.getElementById("subscale").style.visibility="hidden";
  return;
 }
 document.getElementById("subscale").style.visibility="visible";
 var S=new Array(3); S[0]=s1-1; S[1]=s1-1; S[2]=s1-1;
 if ((r1 < radius-1) || ((r1 > 2*radius) && (r1 < 3*radius))) {S[2]=s1};
 if (r1 == radius-1) {S[2]=s1+radius};
 if (r1 == radius) {S[0]=s1-radius-1};
 if (((r1 > radius) && (r1 < 2*radius)) || (r1 > 3*radius)) {S[0]=s1};
 if (r1 == 2*radius) {S[0]=s1; S[2]=s1};
 if (r1 == 3*radius) {S[2]=s1-radius-1};
 if (r1 == 3*radius+1) {S[0]=s1+radius};
 var sub,field,cen=hex_version(document.getElementById(id).style.backgroundColor);
 for (var r=0; r<=2; r++)
 {
  var smax=1; if (r==1) smax=2;
  for (var s=0; s<=smax; s++)
  {
   sub="sub_"+r+"_"+s;
   field="field_"+(r+r1-1)+"_"+(s+S[r]);
   if (!document.getElementById(field)) fill_cell(cen,sub)
   else fill_cell(hex_version(document.getElementById(field).style.backgroundColor),sub);
  }
 }
}

function fill_actualchoice()
{
 var sub,field,smax;
 for (var r=0; r<=2; r++)
 {
  smax=1; if (r==1) smax=2;
  for (var s=0; s<=smax; s++)
  {
   sub="act_"+r+"_"+s;
   field="field_"+(r*radius)+"_"+(s*radius);
   fill_cell(hex_version(document.getElementById(field).style.backgroundColor),sub);
  };
 };
}

function zoom_in()
{
 zoomlevel++;
 document.getElementById("zoomlevel").innerHTML="ZOOM LEVEL = "+zoomlevel;
 if (zoomlevel > 1) move_scale("sup","tmp");
 move_scale("act","sup");
 move_scale("sub","act");
 fill_hexagon();
 document.getElementById("supscale").style.visibility="visible";
 tmp_field=sup_field; sup_field=markedfield; 
 lock_bgcolor("field_"+(2*radius)+"_"+radius);
}

function zoom_out()
{
 zoomlevel--;
 document.getElementById("zoomlevel").innerHTML="ZOOM LEVEL = "+zoomlevel;
 move_scale("act","sub");
 move_scale("sup","act");
 if (zoomlevel > 0) move_scale("tmp","sup");
 document.getElementById("subscale").style.visibility="visible";
 fill_hexagon();
 markedfield=sup_field; sup_field=tmp_field; 
 if (markedfield=="") markedfield="field_"+(2*radius)+"_"+radius;
 lock_bgcolor(markedfield);
}

function move_scale(from_scale,to_scale)
{
 var fs,ts,hex;
 for (var s=0; s<=2; s++)
 {
  var rmax=1; if (s==1) rmax=2;
  for (var r=0; r<=rmax; r++)
  {
   fs=from_scale+"_"+s+"_"+r;
   ts=to_scale+"_"+s+"_"+r;
   hex=hex_version(document.getElementById(fs).style.backgroundColor);
   fill_cell(hex,ts);
  };
 };
}

function fill_cell(hex,id)
{
 document.getElementById(id).style.backgroundColor=hex;
 document.getElementById(id).title=hex.toUpperCase();
}

/*
function handleEnter (field, event)
{
 var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
 if (keyCode == 13) {fill_scale()};
}      
*/

function hex2decimal_red(hex)
{
 return parseInt(hex.substring(1,3),16);
}
function hex2decimal_green(hex)
{
 return parseInt(hex.substring(3,5),16);
}
function hex2decimal_blue(hex)
{
 return parseInt(hex.substring(5,7),16);
}

function decimal2hex(r)
{
 r=Math.round(r);
 var R1=r.toString(16);
 if (r<16) R1='0'+R1;
 return R1.toUpperCase();
}

function hex_version(rgb)
{
 if (rgb.substring(0,1) == "#") return rgb;
 var hex3=rgb.replace(/rgb\(|\)/ig,"").split(", ");
 return("#"+decimal2hex(hex3[0])+decimal2hex(hex3[1])+decimal2hex(hex3[2]));
}