



var currRed = 141;
var currGreen = 185;
var currBlue = 212;
var preRed = 0;
var preGreen = 0;
var preBlue = 0;
var selectID = 1;
var selectRed = 0;
var selectGreen = 0;
var selectBlue = 0;




function autoPaint()
{
	document.getElementById("canvas").style.backgroundColor = document.getElementById("swatch5").style.backgroundColor;
	document.getElementById("demoHeader").style.backgroundColor = document.getElementById("swatch1").style.backgroundColor;
	document.getElementById("menu").style.backgroundColor = document.getElementById("swatch1").style.backgroundColor;
	document.getElementById("leftColumn").style.backgroundColor = document.getElementById("swatch6").style.backgroundColor;
	document.getElementById("rightColumn").style.backgroundColor = document.getElementById("swatch7").style.backgroundColor;
	document.getElementById("footer").style.backgroundColor = document.getElementById("swatch1").style.backgroundColor;
}




function init()
{
	for (i = 0; i < document.links.length; i++)
	{
		var theLink = document.links[i]
		var theID = theLink.id;

		if (theID.search(/^cC/) != -1)
		{
			document.links[i].onclick = setComponent;
			document.links[i].onmouseover = preColor;
			document.links[i].onmouseout = preColorOff;

			if (theID.search(/^cCRed/) != -1)
			{
				theLink.style.backgroundColor = "rgb(" + theID.replace(/^cCRed/, "") + ",0,0)";
			}
			if (theID.search(/^cCGreen/) != -1)
			{
				theLink.style.backgroundColor = "rgb(0," + theID.replace(/^cCGreen/, "") + ",0)";
			}
			if (theID.search(/^cCBlue/) != -1)
			{
				theLink.style.backgroundColor = "rgb(0,0," + theID.replace(/^cCBlue/, "") + ")";
			}
		}
	}
	
	refreshColors();
	mouseColor();
	
	return true;
}




function mouseColor(theColor)
{

	var theLayer = document.getElementById("swatchValues");
	var theRed = selectRed;
	var theGreen = selectGreen;
	var theBlue = selectBlue;
	
	if (theColor)
	{
		theColor = theColor.replace(/rgb\(/, "");
		theRed = parseInt(theColor);
		
		theColor = theColor.replace(/.*?,/, "");
		theGreen = parseInt(theColor);
		
		theColor = theColor.replace(/.*?,/, "");
		theBlue = parseInt(theColor);
	}
	
	theLayer.innerHTML = "Mouse RGB: " + theRed + ", " + theGreen + ", " + theBlue + " | #" + theRed.toString(16).toUpperCase() + theGreen.toString(16).toUpperCase() + theBlue.toString(16).toUpperCase();

	return true;
}





function preColor()
{
	var theID = this.id;
	var theSwatch = document.getElementById("swatch1");

	if (theID.search(/^cCRed/) != -1)
	{
		preRed = parseInt(theID.replace(/^cCRed/, ""));
		document.getElementById("redValue").innerHTML = preRed;
	}
	if (theID.search(/^cCGreen/) != -1)
	{
		preGreen = parseInt(theID.replace(/^cCGreen/, ""));
		document.getElementById("greenValue").innerHTML = preGreen;
	}
	if (theID.search(/^cCBlue/) != -1)
	{
		preBlue = parseInt(theID.replace(/^cCBlue/, ""));
		document.getElementById("blueValue").innerHTML = preBlue;
	}

	theSwatch.style.backgroundColor = "rgb(" + preRed + "," + preGreen + "," + preBlue + ")";

	return true;
}




function preColorOff()
{
	var theSwatch = document.getElementById("swatch1");

	theSwatch.style.backgroundColor = "rgb(" + currRed + "," + currGreen + "," + currBlue + ")";

	preRed = currRed;
	preGreen = currGreen;
	preBlue = currBlue;

	document.getElementById("redValue").innerHTML = currRed;
	document.getElementById("greenValue").innerHTML = currGreen;
	document.getElementById("blueValue").innerHTML = currBlue;
	
	return true;
}




function refreshColors()
{
	document.getElementById("redValue").innerHTML = currRed;
	document.getElementById("greenValue").innerHTML = currGreen;
	document.getElementById("blueValue").innerHTML = currBlue;

	var theSwatch = document.getElementById("swatch1");
	theSwatch.style.backgroundColor = "rgb(" + currRed + "," + currGreen + "," + currBlue + ")";
	
	theSwatch = document.getElementById("swatch2");
	var modRed = parseInt(currRed + (255 - currRed) / 3);
	var modGreen = parseInt(currGreen + (255 - currGreen) / 3);
	var modBlue = parseInt(currBlue + (255 - currBlue) / 3);
	theSwatch.style.backgroundColor = "rgb(" + modRed + "," + modGreen + "," + modBlue + ")";
	
	theSwatch = document.getElementById("swatch3");
	modRed = parseInt(currRed + 2 * (255 - currRed) / 3);
	modGreen = parseInt(currGreen + 2 * (255 - currGreen) / 3);
	modBlue = parseInt(currBlue + 2 * (255 - currBlue) / 3);
	theSwatch.style.backgroundColor = "rgb(" + modRed + "," + modGreen + "," + modBlue + ")";
	
	theSwatch = document.getElementById("swatch4");
	theSwatch.style.backgroundColor = "rgb(255,255,255)";
	
	theSwatch = document.getElementById("swatch5");
	modRed = parseInt(currRed - currRed / 3);
	modGreen = parseInt(currGreen - currGreen / 3);
	modBlue = parseInt(currBlue - currBlue / 3);
	theSwatch.style.backgroundColor = "rgb(" + modRed + "," + modGreen + "," + modBlue + ")";
	
	theSwatch = document.getElementById("swatch6");
	
	if (currBlue > currRed && currBlue > currGreen)
	{
		modRed = parseInt(currBlue + (255 - currBlue) / 3);
		modGreen = parseInt(currGreen + (255 - currGreen) / 3);
		modBlue = parseInt(currRed + (255 - currRed) / 3);
	}
	
	else if (currRed > currGreen && currRed > currBlue)
	{
		modRed = parseInt(currGreen + (255 - currGreen) / 3);
		modGreen = parseInt(currRed + (255 - currRed) / 3);
		modBlue = parseInt(currBlue + (255 - currBlue) / 3);
	}
	else
	{
		modRed = parseInt(currRed + (255 - currRed) / 3);
		modGreen = parseInt(currBlue + (255 - currBlue) / 3);
		modBlue = parseInt(currGreen + (255 - currGreen) / 3);
	}
	
	theSwatch.style.backgroundColor = "rgb(" + modRed + "," + modGreen + "," + modBlue + ")";
	
	theSwatch = document.getElementById("swatch7");
	
	if (currBlue > currRed && currBlue > currGreen)
	{
		modRed = parseInt(currBlue + 2 * (255 - currBlue) / 3);
		modGreen = parseInt(currGreen + 2 * (255 - currGreen) / 3);
		modBlue = parseInt(currRed + 2 * (255 - currRed) / 3);
	}
	
	else if (currRed > currGreen && currRed > currBlue)
	{
		modRed = parseInt(currGreen + 2 * (255 - currGreen) / 3);
		modGreen = parseInt(currRed + 2 * (255 - currRed) / 3);
		modBlue = parseInt(currBlue + 2 * (255 - currBlue) / 3);
	}
	else
	{
		modRed = parseInt(currRed + 2 * (255 - currRed) / 3);
		modGreen = parseInt(currBlue + 2 * (255 - currBlue) / 3);
		modBlue = parseInt(currGreen + 2 * (255 - currGreen) / 3);
	}
	
	theSwatch.style.backgroundColor = "rgb(" + modRed + "," + modGreen + "," + modBlue + ")";
	
	theSwatch = document.getElementById("swatch8");
	theSwatch.style.backgroundColor = "rgb(128,128,128)";
	
	theSwatch = document.getElementById("swatch9");
	modRed = parseInt(currRed - 2 * currRed / 3);
	modGreen = parseInt(currGreen - 2 * currGreen / 3);
	modBlue = parseInt(currBlue - 2 * currBlue / 3);
	theSwatch.style.backgroundColor = "rgb(" + modRed + "," + modGreen + "," + modBlue + ")";

	theSwatch = document.getElementById("swatch10");

	if (currBlue > currRed && currBlue > currGreen)
	{
		modRed = currBlue;
		modGreen = currGreen;
		modBlue = currRed;
	}
	
	else if (currRed > currGreen && currRed > currBlue)
	{
		modRed = currGreen;
		modGreen = currRed;
		modBlue = currBlue;
	}
	else
	{
		modRed = currRed;
		modGreen = currBlue;
		modBlue = currGreen;
	}
	
	theSwatch.style.backgroundColor = "rgb(" + modRed + "," + modGreen + "," + modBlue + ")";

	theSwatch = document.getElementById("swatch11");
	modRed = 255 - currRed;
	modGreen = 255 - currGreen;
	modBlue = 255 - currBlue;
	theSwatch.style.backgroundColor = "rgb(" + modRed + "," + modGreen + "," + modBlue + ")";

	theSwatch = document.getElementById("swatch12");
	theSwatch.style.backgroundColor = "rgb(0,0,0)";

	var theColor = document.getElementById("swatch" + selectID).style.backgroundColor;
	
	theColor = theColor.replace(/rgb\(/, "");
	selectRed = parseInt(theColor);

	theColor = theColor.replace(/.*?,/, "");
	selectGreen = parseInt(theColor);

	theColor = theColor.replace(/.*?,/, "");
	selectBlue = parseInt(theColor);
}




function selectColor(swatchID)
{
	var theAnchor = document.getElementById("swatch" + swatchID + "Anchor");
	var theColor = document.getElementById("swatch" + swatchID).style.backgroundColor;
	
	selectID = swatchID;
	
	theColor = theColor.replace(/rgb\(/, "");
	selectRed = parseInt(theColor);

	theColor = theColor.replace(/.*?,/, "");
	selectGreen = parseInt(theColor);

	theColor = theColor.replace(/.*?,/, "");
	selectBlue = parseInt(theColor);

	for (i = 1; i <= 12; i++)
	{
		document.getElementById("swatch" + i + "Anchor").className = "";
	}
	
	theAnchor.className = "on";
	mouseColor();
	
	return true;
}




function setColor(swatchID)
{
	var theSwatch = document.getElementById("swatch" + swatchID);
	var theColor = theSwatch.style.backgroundColor;

	document.getElementById("cCRed" + currRed).className = "cC";
	document.getElementById("cCGreen" + currGreen).className = "cC";
	document.getElementById("cCBlue" + currBlue).className = "cC";
	
	theColor = theColor.replace(/rgb\(/, "");
	currRed = parseInt(theColor);

	theColor = theColor.replace(/.*?,/, "");
	currGreen = parseInt(theColor);

	theColor = theColor.replace(/.*?,/, "");
	currBlue = parseInt(theColor);

	document.getElementById("cCRed" + currRed).className = "cC on";
	document.getElementById("cCGreen" + currGreen).className = "cC on";
	document.getElementById("cCBlue" + currBlue).className = "cC on";

	refreshColors();

	return true;
}




function setComponent()
{
	var theID = this.id;

	if (theID.search(/^cCRed/) != -1)
	{
		document.getElementById("cCRed" + currRed).className = "cC";
		currRed = parseInt(theID.replace(/^cCRed/, ""));
	}
	if (theID.search(/^cCGreen/) != -1)
	{
		document.getElementById("cCGreen" + currGreen).className = "cC";
		currGreen = parseInt(theID.replace(/^cCGreen/, ""));
	}
	if (theID.search(/^cCBlue/) != -1)
	{
		document.getElementById("cCBlue" + currBlue).className = "cC";
		currBlue = parseInt(theID.replace(/^cCBlue/, ""));
	}

	this.className = "cC on";
	
	refreshColors();

	return false;
}




function setHex()
{
	var theField = document.getElementById("hexCode");
	var theValue = theField.value;
	var theRed = 0;
	var theGreen = 0;
	var theBlue = 0;
	
	if (theValue.search(/[^0-9,a-f,A-F]/) != -1)
	{
		alert("Please enter a valid hexadecimal colour code");
	}

	if (theValue.length == 6)
	{
		theRed = theValue.substring(0, 2);
		theGreen = theValue.substring(2, 4);
		theBlue = theValue.substring(4, 6);
	}
	else if (theValue.length == 3)
	{
		theRed = theValue[0] + theValue[0];
		theGreen = theValue[1] + theValue[1];
		theBlue = theValue[2] + theValue[2];
	}
	else
	{
		alert("Please enter a valid hexadecimal colour code");
		
		return false;
	}
	
	document.getElementById("cCRed" + currRed).className = "cC";
	document.getElementById("cCGreen" + currGreen).className = "cC";
	document.getElementById("cCBlue" + currBlue).className = "cC";
	
	currRed = parseInt(theRed, 16);
	currGreen = parseInt(theGreen, 16);
	currBlue = parseInt(theBlue, 16);

	document.getElementById("cCRed" + currRed).className = "cC on";
	document.getElementById("cCGreen" + currGreen).className = "cC on";
	document.getElementById("cCBlue" + currBlue).className = "cC on";

	refreshColors();

	return true;
}
