var colorMoveRed;
var colorMoveGreen;
var colorMoveBlue;
var colorRedPosition, colorGreenPosition, colorBluePosition;
var makeColorResult;
var rainbowShowColor;
var rainbowShowRed;
var rainbowShowBlue;
var rainbowShowGreen;
var rainbowRedHex;
var rainbowGreenHex;
var rainbowBlueHex;
var rainbowArray1 = new Array("3366FF", "33CCFF", "9966FF", "009999", "CC3300", "FF0000");
var rainbowArray2 = new Array("FF7F7F", "FFAF7F", "FFDF7F", "EFFF7F", "BFFF7F", "7FFF7F", "7FFFCF", "7FFFFF", "7FCFFF", "7F7FFF", "DF7FFF");
var rainbowArray3 = new Array("7F8FFF", "9F7FFF", "AF7FFF", "CF7FFF", "F07070", "CDAD4D", "62D252", "43C3B3");
var rainbowTipArray1 = new Array("339933", "3333FF", "FF9900", "FF0000");
var color = new Array();

function TextToRainbowText(strSource, arrayToUse){
	var strResult = "";
	var i = -1;
	for (var c = 0; c < strSource.length; c++){
		i++;
		if (i >= arrayToUse.length){
			i = 0;
		}
		var chr = strSource.substring(c, c+1)
		strResult += '<span style="color:#' + arrayToUse[i] + '">' + chr + '</span>';
	}
	return strResult;
}

function FillColor(){
	color[0]="aliceblue";		color[1]="antiquewhite";	color[2]="aqua";		color[3]="aquamarine";
	color[4]="azure";		color[5]="beige";		color[6]="bisque";		color[7]="black";
	color[8]="blanchedalmond";	color[9]="blue";		color[10]="blueviolet";	color[11]="brown";
	color[12]="burlywood";	color[13]="cadetblue";	color[14]="chartreuse";	color[15]="chocolate";
	color[16]="coral";		color[17]="cornflowerblue";	color[18]="cornsilk";		color[19]="crimson";
	color[20]="cyan";		color[21]="darkblue";		color[22]="darkcyan";	color[23]="darkgoldenrod";
	color[24]="darkgray";		color[25]="darkgreen";	color[26]="darkkhaki";	color[27]="darkmagenta";
	color[28]="darkolivegreen";	color[29]="darkorange";	color[30]="darkorchid";	color[31]="darkred";
	color[32]="darksalmon";	color[33]="darkseagreen";	color[34]="darkslateblue";	color[35]="darkslategray";
	color[36]="darkturquoise";	color[37]="darkviolet";	color[38]="deeppink";	color[39]="deepskyblue";
	color[40]="dimgray";		color[41]="dodgerblue";	color[42]="firebrick";		color[43]="floralwhite";
	color[44]="forestgreen";	color[45]="fuchsia";		color[46]="gainsboro";	color[47]="ghostwhite";
	color[48]="gold";		color[49]="goldenrod";	color[50]="gray";		color[51]="green";
	color[52]="greenyellow";	color[53]="honeydew";	color[54]="hotpink";		color[55]="indianred";
	color[56]="indigo";		color[57]="ivory";		color[58]="khaki";		color[59]="lavender";
	color[60]="lavenderblush";	color[61]="lawngreen";	color[62]="lemonchiffon";	color[63]="lightblue";
	color[64]="lightcoral";		color[65]="lightcoral";		color[66]="lightcyan";	                color[67]="lightgoldenrodyellow";
	color[68]="lightgreen";	color[69]="lightgrey";		color[70]="lightpink";		color[71]="lightsalmon";
	color[72]="lightseagreen";	color[73]="lightskyblue";	color[74]="lightslategray";	color[75]="lightsteelblue";
	color[76]="lightyellow";	color[77]="limegreen";	color[78]="linen";		color[79]="magenta";
	color[80]="maroon";		color[81]="mediumaquamarine";color[82]="mediumblue";	color[83]="mediumorchid";
	color[84]="mediumpurple";	color[85]="mediumseagreen";	color[86]="mediumslateblue";	color[87]="mediumspringgreen";
	color[88]="mediumturquoise";	color[89]="mediumvioletred";	color[90]="midnightblue";	color[91]="mintcream";
	color[92]="mistyrose";	color[93]="moccasin";	color[94]="navajowhite";	color[95]="navy";
	color[96]="oldlace";		color[97]="olive";		color[98]="olivedrab";	color[99]="orange";
	color[100]="orangered";	color[101]="orchid";		color[102]="palegoldenrod";	color[103]="palegreen";
	color[104]="paleturquoise";	color[105]="palevioletred";	color[106]="papayawhip";	color[107]="peachpuff";
	color[108]="peru";		color[109]="pink";		color[110]="plum";		color[111]="powderblue";
	color[112]="purple";		color[113]="red";		color[114]="rosybrown";	color[115]="royalblue";
	color[116]="saddlebrown";	color[117]="salmon";		color[118]="sandybrown";	color[119]="seagreen";
	color[120]="seashell";	color[121]="sienna";		color[122]="silver";		color[123]="skyblue";
	color[124]="slateblue";	color[125]="slategray";	color[126]="snow";		color[127]="springgreen";
	color[128]="steelblue";	color[129]="tan";		color[130]="teal";		color[131]="thistle";
	color[132]="tomato";		color[133]="turquoise";	color[134]="violet";		color[135]="wheat";
	color[136]="white";		color[137]="whitesmoke";	color[138]="yellow";		color[139]="yellowgreen";
	color[140]="lime";
}

function DrawNamedColors(){
	columns = 5;
	cellWidth = 122;
	cellHeight = 30;
	if (color.length == 0){FillColor();}
	var theNamedColorTable = document.getElementById("namedColorTable");
	var str = "";

	for (var c = 0; c < color.length; c++){
		if (c == 0){
			str = str + '<table border="0" class="color_tool_named_color"><tr>';
		}
		else if ( c % columns == 0){
			str = str + '</tr><tr>';
		}
		str += '<td width="' + cellWidth + '" height="' + cellHeight + '" bgcolor="' + color[c] + '" onclick="ColorToClipboard(\'' + color[c] + '\')">' + color[c] + '</td>';
		
	}
	str = str + "</tr></table>";
	theNamedColorTable.innerHTML = str;
}

function DrawSafeColors(zColor, cellHeight, cellWidth, cellSpacing, collaps){
	if (zColor == null){zColor = "red";}
	if (cellHeight == null){cellHeight = 20;}
	if (cellWidth == null){cellWidth = 20;}
	if (cellSpacing == null){cellSpacing = 2;}
	if (collaps == null){collaps = false;}
	var columns = 3;
	var jump = new Array("00", "33", "66", "99", "CC", "FF");
	var theSaveColorContainer = document.getElementById("safeColorContainer");
	if (collaps){
		cellSpacing = 0;
		var str = '<table border="0" cellpadding="0" cellspacing="0">';
	}
	else{
		var str = '<table border="0" cellpadding="0" cellspacing="2">';
	}
	if (zColor == "red"){
		for (var red = 0; red < jump.length; red++){
			if (red == 0){
				str += '<tr><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			else if (red % columns == 0){
				str += '</table></td></tr><tr><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			else{
				str += '</table></td><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			for (var green = 0; green < jump.length; green++){
				str += '<tr>';
				for (var blue = 0; blue < jump.length; blue++){
					composite = "#" + jump[red] + jump[green] + jump[blue];
					str += '<td bgcolor="' + composite + '" height="' + cellHeight + '" width="' + cellWidth + '" onmouseover="ShowSafeColor(\'' + jump[red] + '\', \'' + jump[green] + '\', \'' + jump[blue] + '\')" onclick="ColorToClipboard(\'' + jump[red] + jump[green] + jump[blue] + '\')"></td>';
				}
				str += '</tr>';
			}
		}
		str += '</table></td></tr>';
	}
	else if (zColor == "green"){
		for (var green = 0; green < jump.length; green++){
			if (green == 0){
				str += '<tr><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			else if (green % columns == 0){
				str += '</table></td></tr><tr><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			else{
				str += '</table></td><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			for (var blue = 0; blue < jump.length; blue++){
				str += '<tr>';
				for (var red = 0; red < jump.length; red++){
					composite = "#" + jump[red] + jump[green] + jump[blue];
					str += '<td bgcolor="' + composite + '" height="' + cellHeight + '" width="' + cellWidth + '" onmouseover="ShowSafeColor(\'' + jump[red] + '\', \'' + jump[green] + '\', \'' + jump[blue] + '\')" onclick="ColorToClipboard(\'' + jump[red] + jump[green] + jump[blue] + '\')"></td>';
				}
				str += '</tr>';
			}
		}
		str += '</table></td></tr>';
	}
	else if (zColor == "blue"){
		for (var blue = 0; blue < jump.length; blue++){
			if (blue == 0){
				str += '<tr><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			else if (blue % columns == 0){
				str += '</table></td></tr><tr><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			else{
				str += '</table></td><td><table border="0" cellpadding="0" cellspacing="' + cellSpacing + '">';
			}
			for (var red = 0; red < jump.length; red++){
				str += '<tr>';
				for (var green = 0; green < jump.length; green++){
					composite = "#" + jump[red] + jump[green] + jump[blue];
					str += '<td bgcolor="' + composite + '" height="' + cellHeight + '" width="' + cellWidth + '" onmouseover="ShowSafeColor(\'' + jump[red] + '\', \'' + jump[green] + '\', \'' + jump[blue] + '\')" onclick="ColorToClipboard(\'' + jump[red] + jump[green] + jump[blue] + '\')"></td>';
				}
				str += '</tr>';
			}
		}
		str += '</table></td></tr>';
	}
	
	str += '</table>';
	theSaveColorContainer.innerHTML = str;
}

function ShowSafeColor(red, green, blue){
	var theSafeColorComposite = document.getElementById("safeColorComposite");
	var theSafeColorRed = document.getElementById("safeColorRed");
	var theSafeColorGreen = document.getElementById("safeColorGreen");
	var theSafeColorBlue = document.getElementById("safeColorBlue");
	var theSafeColorRedHex = document.getElementById("safeColorRedHex");
	var theSafeColorGreenHex = document.getElementById("safeColorGreenHex");
	var theSafeColorBlueHex = document.getElementById("safeColorBlueHex");
	
	theSafeColorComposite.style.background = "#" + red + green + blue;
	theSafeColorRed.style.background = "#" + red + "0000";
	theSafeColorGreen.style.background = "#00" + green + "00";
	theSafeColorBlue.style.background = "#0000" + blue;
	
	theSafeColorRedHex.innerText = red;
	theSafeColorGreenHex.innerText = green;
	theSafeColorBlueHex.innerText = blue;
}

function DrawMakeColor(){
	var colorHeight = 12;
	var colorWidth = 2;
	
	var theMakeColorRed = document.getElementById("makeColorRed");
	var theMakeColorGreen = document.getElementById("makeColorGreen");
	var theMakeColorBlue = document.getElementById("makeColorBlue");
	
	var colorRedPosition = document.getElementById("colorRedPosition");
	var colorGreenPosition = document.getElementById("colorGreenPosition");
	var colorBluePosition = document.getElementById("colorBluePosition");
	var makeColorResult = document.getElementById("makeColorResult");
	colorRedPosition.innerText = DecToHex(127);
	colorGreenPosition.innerText = DecToHex(127);
	colorBluePosition.innerText = DecToHex(127);
	makeColorResult.style.background = "#" + DecToHex(127) + DecToHex(127) + DecToHex(127); 
	
	var strRed = '<table border="0" cellpadding="0" cellspacing="0"><tr>';
	for (var r = 0; r < 256; r++){
		strRed += '<td width="' + colorWidth + '" height="' + colorHeight + '" style="background-color:RGB(' + r + ', 0, 0)"></td>';
	}
	strRed += '</tr></table>';
	var strGreen = '<table border="0" cellpadding="0" cellspacing="0"><tr>';
	for (var g = 0; g < 256; g++){
		strGreen += '<td width="' + colorWidth + '" height="' + colorHeight + '" style="background-color:RGB(0, ' + g + ', 0)"></td>';
	}
	strGreen += '</tr></table>';
	var strBlue = '<table border="0" cellpadding="0" cellspacing="0"><tr>';
	for (var b = 0; b < 256; b++){
		strBlue += '<td width="' + colorWidth + '" height="' + colorHeight + '" style="background-color:RGB(0, 0, ' + b + ')"></td>';
	}
	strBlue += '</tr></table>';
	theMakeColorRed.innerHTML = strRed;
	theMakeColorGreen.innerHTML = strGreen;
	theMakeColorBlue.innerHTML = strBlue;
}

function ColorToClipboard(colorCode){
	if (colorCode.indexOf("#") == 0){
		colorCode = colorCode.substring(1, 7);
	}
	window.clipboardData.setData("Text", colorCode);
}

function MoveObjectInit(obj){
	obj.adjustX = event.clientX - obj.offsetLeft;
	obj.adjustY = event.clientY - obj.offsetTop;
	obj.moving = true;
}

function MoveObject(obj){
	if (obj.moving){
		obj.style.left = event.clientX - obj.adjustX;
		if (obj == colorMoveRed){
			colorRedPosition.innerText = DecToHex(Math.floor(obj.offsetLeft / 2));
		}
		else if (obj == colorMoveGreen){
			colorGreenPosition.innerText = DecToHex(Math.floor(obj.offsetLeft / 2));
		}
		else if (obj == colorMoveBlue){
			colorBluePosition.innerText = DecToHex(Math.floor(obj.offsetLeft / 2));
		}
		if (obj.offsetLeft > (2 * 255)){
			ClearAll();
			obj.style.left = (2 * 255);
		}
		else if (obj.offsetLeft <= 0){
			ClearAll();
			obj.style.left = 0;
		}
		makeColorResult.style.background = "#" + DecToHex(colorMoveRed.offsetLeft / 2) + DecToHex(colorMoveGreen.offsetLeft / 2) + DecToHex(colorMoveBlue.offsetLeft / 2);
	}
}

function DecToHexBaseTable(dec){
	switch (dec){
		case 0 :
			return "0";
			break;
		case 1 :
			return "1";
			break;
		case 2 :
			return "2";
			break;
		case 3 :
			return "3";
			break;
		case 4 :
			return "4";
			break;
		case 5 :
			return "5";
			break;
		case 6 :
			return "6";
			break;
		case 7 :
			return "7";
			break;
		case 8 :
			return "8";
			break;
		case 9 :
			return "9";
			break;
		case 10 :
			return "A";
			break;
		case 11 :
			return "B";
			break;
		case 12 :
			return "C";
			break;
		case 13 :
			return "D";
			break;
		case 14 :
			return "E";
			break;
		case 15 :
			return "F";
			break;
	}
}

function DecToHexPower(power){
	if (power == 0){
		return 1;
	}
	else {
		var base = 1;
		for (var p = 0; p < power; p++){
			base = base * 16;
		}
		return base;
	}
}

function DecToHex(dec){
	if (dec <= 0){return "00";}
	var power = 0;
	while (dec >= (16 * DecToHexPower(power))){
		power++;
	}
	var cifre = new Array();
	var remainder = dec;
	for (var c = power; c > -1; c--){
		cifre[cifre.length] = DecToHexBaseTable(Math.floor(remainder / DecToHexPower(c)));
		remainder = remainder % DecToHexPower(c)
	}

	//Here I not only return a string but also prefix a "0" if power == 0
	//this is convenient if like here used in connection with RGB, but
	//it should really be done in a place external to a function of this kind.
	var strHex = "";
	if (power == 0){strHex += "0";}
	for (var c = 0; c < cifre.length; c++){
		strHex += cifre[c];
	}
	return strHex;
}

function DrawRainbow(){
	var cellWidth = 11;
	var cellHeight = 7;
	var theRainbowContainer = document.getElementById("rainbowContainer");
	var str = '<table border="0" cellpadding="0" cellspacing="0">';

	var zone;
	var x;
	var y;
	var red;
	var green;
	var blue;
	var dark;

	var valueMiddle = 127;
	var valueJump = 16;
	var valueMax = 255;
	
	var redHex, greenHex, blueHex;

	y = 0;
	dark = 0;
	while (y < 400){
		str += '<tr>';
		x = 0;
		red = valueMax;
		green = valueMiddle;
		blue = valueMiddle;
		zone = 1;
		while (x <= 770){
			redHex = DecToHex(red-dark);
			greenHex = DecToHex(green-dark);
			blueHex = DecToHex(blue-dark);
			str += '<td onclick="ColorToClipboard(\'' + redHex + greenHex + blueHex + '\')" onmouseover="RainbowValues(\'' + redHex + '\', \'' + greenHex + '\', \'' + blueHex + '\')" style="width:' + cellWidth + ';height:' + cellHeight + ';background:#' + redHex + greenHex + blueHex + '"></td>';
			if (zone == 1){red = valueMax; green += valueJump; blue = valueMiddle;}
			else if (zone == 2) {red -= valueJump; green = valueMax; blue = valueMiddle;}
			else if (zone == 3) {red = valueMiddle; green = valueMax; blue += valueJump;}
			else if (zone == 4) {red = valueMiddle; green -= valueJump; blue = valueMax;}
			else if (zone == 5) {red += valueJump; green = valueMiddle; blue = valueMax;}
			else {red = valueMax; green = valueMiddle; blue -= valueJump; zone = 1;}
			x += 20;
			if (x % 160 == 0 && x != 0){zone++;}
		}
		y += 10;
		dark += 5;
		str += '</tr>';
	}

	str += '</table>';
	theRainbowContainer.innerHTML = str;
}

function RainbowValues(red, green, blue){
	rainbowShowColor.style.background = "#" + red + green + blue;
	rainbowShowRed.style.background = "#" + red + "0000";
	rainbowShowGreen.style.background = "#00" + green + "00";
	rainbowShowBlue.style.background = "#0000" + blue;
	rainbowRedHex.innerText = red;
	rainbowGreenHex.innerText = green;
	rainbowBlueHex.innerText = blue;
}

function TextsToRainbowInitialize(){
	var textMoreThanMillionColors = document.getElementById("moreThanMillionColors");
	var textMoreChanged = textMoreThanMillionColors.innerText;
	textMoreChanged = TextToRainbowText(textMoreChanged, rainbowArray1);
	textMoreThanMillionColors.innerHTML = textMoreChanged;
	
	var tips = new Array();
	var groupHeaders = new Array();
	var allFont = document.getElementsByTagName("FONT");
	for (var f = 0; f < allFont.length; f++){
		if (allFont[f].id.indexOf("tip_") == 0){
			tips[tips.length] = allFont[f];
		}
		else if (allFont[f].id.indexOf("gh_") == 0){
			groupHeaders[groupHeaders.length] = allFont[f];
		}
	}

	for (var t = 0; t < tips.length; t++){
		tips[t].innerHTML = TextToRainbowText("Tip:", rainbowTipArray1);
	}
	for (var gh = 0; gh < groupHeaders.length; gh++){
		var innerText = groupHeaders[gh].innerText;
		groupHeaders[gh].innerHTML = TextToRainbowText(innerText, rainbowArray3);
	}
}


function InitializeColorTool(){
	colorMoveRed = document.getElementById("colorMoveRed");
	colorMoveGreen = document.getElementById("colorMoveGreen");
	colorMoveBlue = document.getElementById("colorMoveBlue");
	
	colorMoveRed.setAttribute("moving", false);
	colorMoveRed.setAttribute("adjustX", 0);
	colorMoveGreen.setAttribute("moving", false);
	colorMoveGreen.setAttribute("adjustX", 0);
	colorMoveBlue.setAttribute("moving", false);
	colorMoveBlue.setAttribute("adjustX", 0);
	
	colorRedPosition = document.getElementById("colorRedPosition");
	colorGreenPosition = document.getElementById("colorGreenPosition");
	colorBluePosition = document.getElementById("colorBluePosition");
	
	makeColorResult = document.getElementById("makeColorResult");
	
	rainbowShowColor = document.getElementById("rainbowShowColor");
	rainbowShowRed = document.getElementById("rainbowShowRed");
	rainbowShowGreen = document.getElementById("rainbowShowGreen");
	rainbowShowBlue = document.getElementById("rainbowShowBlue");
	rainbowRedHex = document.getElementById("rainbowRedHex");
	rainbowGreenHex = document.getElementById("rainbowGreenHex");
	rainbowBlueHex = document.getElementById("rainbowBlueHex");
	
	DrawNamedColors();
	DrawSafeColors();
	DrawRainbow();
	DrawMakeColor();
	
	TextsToRainbowInitialize();
}
