function SetColors(r,g,b,a) {
	ra=Math.round(r+(255-r)*grade1);
	ga=Math.round(g+(255-g)*grade1);
	ba=Math.round(b+(255-b)*grade1);

	rb=Math.round(r+(255-r)*grade2);
	gb=Math.round(g+(255-g)*grade2);
	bb=Math.round(b+(255-b)*grade2);

	rc=Math.round(r*grade3);
	gc=Math.round(g*grade3);
	bc=Math.round(b*grade3);

	rd=Math.round(r*grade4);
	gd=Math.round(g*grade4);
	bd=Math.round(b*grade4);

	colora="("+ra+","+ga+","+ba+")";
	colorb="("+rb+","+gb+","+bb+")";
	colorc="("+r+","+g+","+b+")";
	colord="("+rc+","+gc+","+bc+")";
	colore="("+rd+","+gd+","+bd+")";

	for (i=0;i<a.length;i+=2) {
		document.getElementById(a[i]+'c'+a[i+1]+'a').style.backgroundColor='rgb'+colora;
		document.getElementById(a[i]+'c'+a[i+1]+'b').style.backgroundColor='rgb'+colorb;
		document.getElementById(a[i]+'c'+a[i+1]+'c').style.backgroundColor='rgb'+colorc;
		document.getElementById(a[i]+'c'+a[i+1]+'d').style.backgroundColor='rgb'+colord;
		document.getElementById(a[i]+'c'+a[i+1]+'e').style.backgroundColor='rgb'+colore;
		
		document.getElementById(a[i]+'c'+a[i+1]+'a').innerHTML='<img src="images/spacer.gif" alt="#'+RGB2Hex(ra,ga,ba)+' '+colora+'" title="#'+RGB2Hex(ra,ga,ba)+' '+colora+'" width="80" height="32" />';
		document.getElementById(a[i]+'c'+a[i+1]+'b').innerHTML='<img src="images/spacer.gif" alt="#'+RGB2Hex(rb,gb,bb)+' '+colorb+'" title="#'+RGB2Hex(rb,gb,bb)+' '+colorb+'"width="80" height="32" />';
		document.getElementById(a[i]+'c'+a[i+1]+'c').innerHTML='<img src="images/spacer.gif" alt="#'+RGB2Hex(r,g,b)+' '+colorc+'" title="#'+RGB2Hex(r,g,b)+' '+colorc+'" width="80" height="32" />';
		document.getElementById(a[i]+'c'+a[i+1]+'d').innerHTML='<img src="images/spacer.gif" alt="#'+RGB2Hex(rc,gc,bc)+' '+colord+'" title="#'+RGB2Hex(rc,gc,bc)+' '+colord+'" width="80" height="32" />';
		document.getElementById(a[i]+'c'+a[i+1]+'e').innerHTML='<img src="images/spacer.gif" alt="#'+RGB2Hex(rd,gd,bd)+' '+colore+'" title="#'+RGB2Hex(rd,gd,bd)+' '+colore+'" width="80" height="32" />';
	}
}

function HueShift(h,s) {
	h+=s;
	while (h>=360.0) h-=360.0;
	while (h<0.0) h+=360.0;
	return h;
}

function PutInRange(n,l,h) { return (n<l)?l:((n>h)?h:n); }

function DoKeyUp() {
	rx=document.getElementById('ri').value;
	gx=document.getElementById('gi').value;
	bx=document.getElementById('bi').value;
	anglex=document.getElementById('angle').value;
	grade1x=document.getElementById('grade1').value;
	grade2x=document.getElementById('grade2').value;
	grade3x=document.getElementById('grade3').value;
	grade4x=document.getElementById('grade4').value;
		
	if (
		rx.length && gx.length && bx.length && anglex.length && grade1x.length && grade2x.length &&
		((rx!=oldr) || (gx!=oldg) || (bx!=oldb) || (anglex!=oldangle) ||
			(grade1x!=oldgrade1) || (grade2x!=oldgrade2) || (grade3x!=oldgrade3) || (grade4x!=oldgrade4))
	) {
		running=running?2:1;
		while (running) {
			oldr=rx;
			oldg=gx;
			oldb=bx;
			oldangle=anglex;
			oldgrade1=grade1x;
			oldgrade2=grade2x;
			oldgrade3=grade3x;
			oldgrade4=grade4x;

			r=parseInt(rx);
			g=parseInt(gx);
			b=parseInt(bx);
			angle=parseFloat(anglex);
			grade1=PutInRange(parseFloat(grade1x),0.0,1.0);
			grade2=PutInRange(parseFloat(grade2x),0.0,1.0);
			grade3=PutInRange(parseFloat(grade3x),0.0,1.0);
			grade4=PutInRange(parseFloat(grade4x),0.0,1.0);
			if (running==2) { running=1; continue; }
			
			SetColors(r,g,b,Array('m','1','c','1','a','2','s','2','t','1'));
			if (running==2) { running=1; continue; }
			
			SetColors(g,b,r,Array('t','2'));
			if (running==2) { running=1; continue; }
			
			SetColors(b,r,g,Array('t','3'));
			if (running==2) { running=1; continue; }
			
			thisrgb=new Object();
			thisrgb.r=r;
			thisrgb.g=g;
			thisrgb.b=b;
			
			// complement
			temprgb=thisrgb;
			temphsv=RGB2HSV(temprgb);
			temphsv.hue=HueShift(temphsv.hue,180.0);
			temprgb=HSV2RGB(temphsv);
			SetColors(temprgb.r,temprgb.g,temprgb.b,Array('c','2'));
			if (running==2) { running=1; continue; }
			
			// analogous
			temprgb=thisrgb;
			temphsv=RGB2HSV(temprgb);
			temphsv.hue=HueShift(temphsv.hue,angle);
			temprgb=HSV2RGB(temphsv);
			SetColors(temprgb.r,temprgb.g,temprgb.b,Array('a','1'));
			if (running==2) { running=1; continue; }
			
			temprgb=thisrgb;
			temphsv=RGB2HSV(temprgb);
			temphsv.hue=HueShift(temphsv.hue,0.0-angle);
			temprgb=HSV2RGB(temphsv);
			SetColors(temprgb.r,temprgb.g,temprgb.b,Array('a','3'));
			if (running==2) { running=1; continue; }
			
			// split complementary
			temprgb=thisrgb;
			temphsv=RGB2HSV(temprgb);
			temphsv.hue=HueShift(temphsv.hue,180.0-angle);
			temprgb=HSV2RGB(temphsv);
			SetColors(temprgb.r,temprgb.g,temprgb.b,Array('s','1'));
			if (running==2) { running=1; continue; }
			
			temprgb=thisrgb;
			temphsv=RGB2HSV(temprgb);
			temphsv.hue=HueShift(temphsv.hue,180.0+angle);
			temprgb=HSV2RGB(temphsv);
			SetColors(temprgb.r,temprgb.g,temprgb.b,Array('s','3'));
			if (running==2) { running=1; continue; }
			
			running=0;
		}
	}
}

hexdig='0123456789ABCDEF';
function Dec2Hex(d) {
	return hexdig.charAt((d-(d%16))/16)+hexdig.charAt(d%16);
}

function RGB2Hex(r,g,b) {
	return Dec2Hex(r)+Dec2Hex(g)+Dec2Hex(b);
}

// RGB2HSV and HSV2RGB are based on Color Match Remix [http://color.twysted.net/]
// which is based on or copied from ColorMatch 5K [http://colormatch.dk/]
function HSV2RGB(hsv) {
	var rgb=new Object();
	if (hsv.saturation==0) {
		rgb.r=rgb.g=rgb.b=Math.round(hsv.value*2.55);
	} else {
		hsv.hue/=60;
		hsv.saturation/=100;
		hsv.value/=100;
		i=Math.floor(hsv.hue);
		f=hsv.hue-i;
		p=hsv.value*(1-hsv.saturation);
		q=hsv.value*(1-hsv.saturation*f);
		t=hsv.value*(1-hsv.saturation*(1-f));
		switch(i) {
		case 0: rgb.r=hsv.value; rgb.g=t; rgb.b=p; break;
		case 1: rgb.r=q; rgb.g=hsv.value; rgb.b=p; break;
		case 2: rgb.r=p; rgb.g=hsv.value; rgb.b=t; break;
		case 3: rgb.r=p; rgb.g=q; rgb.b=hsv.value; break;
		case 4: rgb.r=t; rgb.g=p; rgb.b=hsv.value; break;
		default: rgb.r=hsv.value; rgb.g=p; rgb.b=q;
		}
		rgb.r=Math.round(rgb.r*255);
		rgb.g=Math.round(rgb.g*255);
		rgb.b=Math.round(rgb.b*255);
	}
	return rgb;
}

function min3(a,b,c) { return (a<b)?((a<c)?a:c):((b<c)?b:c); }
function max3(a,b,c) { return (a>b)?((a>c)?a:c):((b>c)?b:c); }

function RGB2HSV(rgb) {
	hsv = new Object();
	max=max3(rgb.r,rgb.g,rgb.b);
	dif=max-min3(rgb.r,rgb.g,rgb.b);
	hsv.saturation=(max==0.0)?0:(100*dif/max);
	if (hsv.saturation==0) hsv.hue=0;
 	else if (rgb.r==max) hsv.hue=60.0*(rgb.g-rgb.b)/dif;
	else if (rgb.g==max) hsv.hue=120.0+60.0*(rgb.b-rgb.r)/dif;
	else if (rgb.b==max) hsv.hue=240.0+60.0*(rgb.r-rgb.g)/dif;
	if (hsv.hue<0.0) hsv.hue+=360.0;
	hsv.value=Math.round(max*100/255);
	hsv.hue=Math.round(hsv.hue);
	hsv.saturation=Math.round(hsv.saturation);
	return hsv;
}

oldr="0";
oldg="0";
oldb="0";
oldangle="30.0";
oldgrade1="0.6";
oldgrade2="0.25";
oldgrade3="0.667";
oldgrade4="0.333";
running=0;

function ColorWheelInit() {
	document.getElementById('ri').onkeyup=function() { DoKeyUp(); }
	document.getElementById('gi').onkeyup=function() { DoKeyUp(); }
	document.getElementById('bi').onkeyup=function() { DoKeyUp(); }
	document.getElementById('angle').onkeyup=function() { DoKeyUp(); }
	document.getElementById('grade1').onkeyup=function() { DoKeyUp(); }
	document.getElementById('grade2').onkeyup=function() { DoKeyUp(); }
	document.getElementById('grade3').onkeyup=function() { DoKeyUp(); }
	document.getElementById('grade4').onkeyup=function() { DoKeyUp(); }
	DoKeyUp();
}

setTimeout("ColorWheelInit();",1000);