// Thanks to Steve Champeon (hesketh.com) for explaining the math in such a way that I could 
// understand it and create this tool
// Thanks to Roberto Diez for the idea to create the "waterfall" display
// Thanks to the Rhino book, I was able to (clumsily) set up the Color object

var cursor = 0;
var colType = 'hex';
var base = 16;
var ends = new Array(new Color,new Color);
var step = new Array(3);
var palette = new Array(new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color,new Color);

function GetElementsWithClassName(elementName,className) {
	var allElements = document.getElementsByTagName(elementName);
	var elemColl = new Array();
	for (i = 0; i< allElements.length; i++) {
		if (allElements[i].className == className) {
			elemColl[elemColl.length] = allElements[i];
		}
	}
	return elemColl;
}

function Color(r,g,b) {
	this.r = r;
	this.g = g;
	this.b = b;
	this.coll = new Array(r,g,b);
	this.valid = cVerify(this.coll);
	this.text = cText(this.coll);
	this.bg = cText(this.coll);
}

function cVerify(c) {
	var valid = 'n';
	if ((!isNaN(c[0])) && (!isNaN(c[1])) && (!isNaN(c[2]))) {valid = 'y'}
	return valid;
}

function cText(c) {
	var result = '';
	var d = 1;
	if (colType == 'rgbp') {d = 2.55}
	for (k = 0; k < 3; k++) {
		val = Math.round(c[k]/d);
		piece = val.toString(base);
		if (colType == 'hex' && piece.length < 2) {piece = '0' + piece;}
		if (colType == 'rgbp') {piece = piece + '%'};
		if (colType != 'hex' && k < 2) {piece = piece + ',';}
		result = result + piece;
	}
	if (colType == 'hex') {result = '' + result.toUpperCase();}
		else {result = 'rgb(' + result + ')';}
	return result;
}

function colorParse(c,t) {
	var m = 1;
	col = c.replace(/[\#rgb\(]*/,'');
	if (t == 'hex') {
		if (col.length == 3) {
			a = col.substr(0,1);
			b = col.substr(1,1);
			c = col.substr(2,1);
			col = a + a + b + b + c + c;
		}
		var num = new Array(col.substr(0,2),col.substr(2,2),col.substr(4,2));
		var base = 16;
	} else {
		var num = col.split(',');
		var base = 10;
	}
	if (t == 'rgbp') {m = 2.55}
	var ret = new Array(parseInt(num[0],base)*m,parseInt(num[1],base)*m,parseInt(num[2],base)*m);
	return(ret);
}

function colorPour(pt,n) {
	var textObj = document.getElementById(pt + n.toString());
	var colObj = document.getElementById(pt.substring(0,1) + n.toString());
	if (pt == 'col') {temp = ends[n]} else {temp = palette[n]}
	if (temp.valid == 'y') {
		textObj.value = temp.text;
		colObj.style.backgroundColor = temp.bg;
	}
}

function colorStore(n) {
	var inVal = 'col'+n.toString();
	var inCol = document.getElementById(inVal).value;
	var c = colorParse(inCol,colType);
	ends[n] = new Color(c[0],c[1],c[2]);
	if (ends[n].valid == 'y') {colorPour('col',n)}
}

function stepCalc() {
	var steps = parseInt(document.getElementById('steps').value) + 1;
	step[0] = (ends[1].r - ends[0].r) / steps;
	step[1] = (ends[1].g - ends[0].g) / steps;
	step[2] = (ends[1].b - ends[0].b) / steps;
}

function mixPalette() {
	var steps = parseInt(document.getElementById('steps').value);
	var count = steps + 1;
	palette[0] = new Color(ends[0].r,ends[0].g,ends[0].b);
	palette[count] = new Color(ends[1].r,ends[1].g,ends[1].b);
	for (i = 1; i < count; i++) {
		var r = (ends[0].r + (step[0] * i));
		var g = (ends[0].g + (step[1] * i));
		var b = (ends[0].b + (step[2] * i));
			palette[i] = new Color(r,g,b);
	}
	for (j = count + 1; j < 12; j++) {
		palette[j].text = '';
		palette[j].bg = 'white';
	}
}

function drawPalette() {
	stepCalc();
	mixPalette();
	for (i = 0; i < 12; i++) {
		colorPour('pal',i);
	}		
}

function setCursor(n) {
	cursor = n;
	var obj1 = document.getElementById('col0');
	var obj2 = document.getElementById('col1');
	obj1.style.backgroundColor = '';
	obj2.style.backgroundColor = '';
	if (cursor >= 0 && cursor <= 1) {
		document.getElementById('col'+cursor).style.backgroundColor = '#FF9';
	}
}

function colorIns(c) {
	var obj = document.getElementById('col'+cursor);
	var result = colorParse(c,'hex');
	ends[cursor] = new Color(result[0],result[1],result[2]);
	obj.value = ends[cursor].text;
	if (ends[cursor].valid == 'y') {colorPour('col',cursor)}
}

function setType(inp) {
	colType = inp;
	if (inp == 'hex') {base = 16;} else {base = 10;}
	for (i = 0; i < 2; i++) {
		var obj = document.getElementById('col' + i);
		if (ends[i].valid == 'y') {
			ends[i] = new Color(ends[i].r,ends[i].g,ends[i].b);
			obj.value = ends[i].text;
		}
	}
	drawPalette();
	document.getElementById('hex').className = '';
	document.getElementById('rgbd').className = '';
	document.getElementById('rgbp').className = '';
	document.getElementById(inp).className = 'coltype';	
}

function init(inp) {
	if (!inp) {
		obj = GetElementsWithClassName('a','coltype');
		inp = obj[0].id;
	}
	document.getElementById(inp).className = 'coltype';
	for (i = 0; i < 2; i++) {
		ends[i] = new Color;
		document.getElementById('col'+i).value = '';
		document.getElementById('c'+i).style.background = 'white';
	}
	for (j = 0; j < 12; j++) {
		palette[j] = new Color;
		document.getElementById('pal'+j).value = '';
		document.getElementById('p'+j).style.background = 'white';
	}
	document.getElementById('steps').value = '0';
	document.getElementById('col0').focus();
}

function colorPreview (strColor) {
	document.getElementById('colorPreviewValue').value = strColor;
	document.getElementById('colorpreview').style.background = strColor;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

var ol_hauto = true;
var ol_vauto = true;
var ol_height = '130';

function ShowPicker() {
	document.write('<table width="60" height="126" cellspacing="0" id="grid"><tr><td style="background: #cccccc;">&nbsp;</td><td style="background: #cccccc; padding: 2px;" colspan="7"><div style="border: 1px solid black; width: 50px;" id="colorpreview">&nbsp;</div></td><td style="background: #cccccc;">&nbsp;</td><td style="background: #cccccc;" colspan="8"><input name="colorPreviewValue" type="text" id="colorPreviewValue" size="9" style="border: none; background: #cccccc;"></td><td colspan="2" style="background: #cccccc; border: none;"><a href="javascript:MM_showHideLayers(\'overDiv\',\'\',\'hide\');"><img src="close.gif" alt="Close this window" align="right" border="0" /></a></td></tr><tr>');
	document.write(pH('111111')+pH('CCFFFF')+pH('CCFFCC')+pH('CCFF99')+pH('CCFF66')+pH('CCFF33')+pH('CCFF00')+pH('66FF00')+pH('66FF33')+pH('66FF66')+pH('66FF99')+pH('66FFCC')+pH('66FFFF')+pH('00FFFF')+pH('00FFCC')+pH('00FF99')+pH('00FF66')+pH('00FF33')+pH('00FF00')+'</tr><tr>'+pH('222222')+pH('CCCCFF')+pH('CCCCCC')+pH('CCCC99')+pH('CCCC66')+pH('CCCC33')+pH('CCCC00')+pH('66CC00')+pH('66CC33')+pH('66CC66')+pH('66CC99')+pH('66CCCC')+pH('66CCFF')+pH('00CCFF')+pH('00CCCC')+pH('00CC99')+pH('00CC66')+pH('00CC33')+pH('00CC00')+'</tr><tr>'+pH('333333')+pH('CC99FF')+pH('CC99CC')+pH('CC9999')+pH('CC9966')+pH('CC9933')+pH('CC9900')+pH('669900')+pH('669933')+pH('669966')+pH('669999')+pH('6699CC')+pH('6699FF')+pH('0099FF')+pH('0099CC')+pH('009999')+pH('009966')+pH('009933')+pH('009900')+'</tr><tr>'+pH('444444')+pH('CC66FF')+pH('CC66CC')+pH('CC6699')+pH('CC6666')+pH('CC6633')+pH('CC6600')+pH('666600')+pH('666633')+pH('666666')+pH('666699')+pH('6666CC')+pH('6666FF')+pH('0066FF')+pH('0066CC')+pH('006699')+pH('006666')+pH('006633')+pH('006600')+'</tr><tr>'+pH('555555')+pH('CC33FF')+pH('CC33CC')+pH('CC3399')+pH('CC3366')+pH('CC3333')+pH('CC3300')+pH('663300')+pH('663333')+pH('663366')+pH('663399')+pH('6633CC')+pH('6633FF')+pH('0033FF')+pH('0033CC')+pH('003399')+pH('003366')+pH('003333')+pH('003300')+'</tr><tr>'+pH('666666')+pH('CC00FF')+pH('CC00CC')+pH('CC0099')+pH('CC0066')+pH('CC0033')+pH('CC0000')+pH('660000')+pH('660033')+pH('660066')+pH('660099')+pH('6600CC')+pH('6600FF')+pH('0000FF')+pH('0000CC')+pH('000099')+pH('000066')+pH('000033')+pH('000000')+'</tr><tr>'+pH('777777')+pH('FF00FF')+pH('FF00CC')+pH('FF0099')+pH('FF0066')+pH('FF0033')+pH('FF0000')+pH('990000')+pH('990033')+pH('990066')+pH('990099')+pH('9900CC')+pH('9900FF')+pH('3300FF')+pH('3300CC')+pH('330099')+pH('330066')+pH('330033')+pH('330000')+'</tr><tr>'+pH('888888')+pH('FF33FF')+pH('FF33CC')+pH('FF3399')+pH('FF3366')+pH('FF3333')+pH('FF3300')+pH('993300')+pH('993333')+pH('993366')+pH('993399')+pH('9933CC')+pH('9933FF')+pH('3333FF')+pH('3333CC')+pH('333399')+pH('333366')+pH('333333')+pH('333300')+'</tr><tr>'+pH('999999')+pH('FF66FF')+pH('FF66CC')+pH('FF6699')+pH('FF6666')+pH('FF6633')+pH('FF6600')+pH('996600')+pH('996633')+pH('996666')+pH('996699')+pH('9966CC')+pH('9966FF')+pH('3366FF')+pH('3366CC')+pH('336699')+pH('336666')+pH('336633')+pH('336600')+'</tr><tr>'+pH('AAAAAA')+pH('FF99FF')+pH('FF99CC')+pH('FF9999')+pH('FF9966')+pH('FF9933')+pH('FF9900')+pH('999900')+pH('999933')+pH('999966')+pH('999999')+pH('9999CC')+pH('9999FF')+pH('3399FF')+pH('3399CC')+pH('339999')+pH('339966')+pH('339933')+pH('339900')+'</tr><tr>'+pH('BBBBBB')+pH('FFCCFF')+pH('FFCCCC')+pH('FFCC99')+pH('FFCC66')+pH('FFCC33')+pH('FFCC00')+pH('99CC00')+pH('99CC33')+pH('99CC66')+pH('99CC99')+pH('99CCCC')+pH('99CCFF')+pH('33CCFF')+pH('33CCCC')+pH('33CC99')+pH('33CC66')+pH('33CC33')+pH('33CC00')+'</tr><tr>'+pH('CCCCCC')+pH('FFFFFF')+pH('FFFFCC')+pH('FFFF99')+pH('FFFF66')+pH('FFFF33')+pH('FFFF00')+pH('99FF00')+pH('99FF33')+pH('99FF66')+pH('99FF99')+pH('99FFCC')+pH('99FFFF')+pH('33FFFF')+pH('33FFCC')+pH('33FF99')+pH('33FF66')+pH('33FF33')+pH('33FF00')+'</tr></table>');
}

function pH(hex) {
	return '<td style="background:#'+hex+';"><a href="javascript:MM_showHideLayers(\'overDiv\',\'\',\'hide\');colorIns(\'#'+hex+'\');"  onMouseOver="colorPreview(\'#'+hex+'\')"></a></td>';
}