function colorcube()
{

// When created a colour cube has 3 colours red, green and blue. Red and Green are set to FF and Blue set to 00. IE #ffff00
// The currcolor variable is used to set the initial value and colour in the text box
var r = 255;
var g = 0;
var b = 255;
var currcolor = '';

// This line is used to determine the width of the box on the screen and is basically 100 divide the nocolors set before creation

var colwidth = 100 / nocolors;

// This line adds the showCube method to the colorcube

	this.showCube = showCube;




// The gethexcolor is used to return the hex value. For example 255 returns FF.

	incolors=gethexcolor(g);
	barcolors=gethexcolor(r);
	outcolors=gethexcolor(b);

// The current colour is set to rgb.

	currcolor = "#" + barcolors + incolors + outcolors;

// htmlstr is used to build up two tables and a form for the colour cube

	htmlstr="";
	htmlstr+="<img id='"+cubename+"arrow' src='arrow1.gif' style='z-index:10;position:absolute;left:0;top:0'>";
	htmlstr+="<img id='"+cubename+"arrow2' src='arrow1.gif' style='z-index:10;position:absolute;left:0;top:0'>";

	htmlstr += "<table id=\""+cubename+"colcube\" border=0 cellspacing=0 cellpadding=0 style='border-width:0;border-style:solid;border-color:black;float:left'>";
	var base = 0;
	var rem = 0;

// The outer creates table rows and the inner loop creates table cells.
// Each cell has a different colour and the green value is increased by the nocolors variable set prior to creation
// Once FF has been reached the blue value is lowered by nocolors and green reset to 0.
// Once the blue value reaches zero the box is full of colour.
//
// A click on a cell calls the selectcol function
//
	while (b > 0)
	{
		htmlstr += "<tr>";

		while (g < 255)
		{
			incolors=gethexcolor(g);
			barcolors=gethexcolor(r);
			outcolors=gethexcolor(b);
			totcol = "#" + barcolors + incolors + outcolors;
			htmlstr+="<td class='colcube' onclick='selectcol(this,event)' width='"+colwidth+"px' height='"+colwidth+"px' style=\"background:"+totcol+"\"></td>";
			g+=nocolors;

		}
		b = b - nocolors;
		g = 0;
		htmlstr += "</tr>";
	
	}
	htmlstr += "</table>";

// This section builds the initial red bar down the side
// A table is created with a row for each shade of red starting from 0 until red is equal to FF
//
// A click on a cell in the bar calls the refreshthis function


	htmlstr += "<table id=\""+cubename+"bar\" width=10 cellspacing=0 cellpadding=0 style='border-width:0;border-style:solid;border-color:black;float:left'>";
	while (r > 0)
	{
		htmlstr += "<tr>";

		g = 0;
		b = 0;
		incolors=gethexcolor(g);
		barcolors=gethexcolor(r);
		outcolors=gethexcolor(b);
		totcol = "#" + barcolors + incolors + outcolors;
		htmlstr+="<td id='"+cubename+"bar"+r+"' onclick=\"refreshcol(this)\" height="+colwidth+" bgcolor='"+totcol+"'></td>";

		htmlstr += "</tr>";
		r = r - nocolors;
	}
		
	htmlstr += "</table>";

// This section creates a form to enable the user to choose a different start colour.


	htmlstr += "<form id='"+cubename+"colcubeform' style='float:left' class='colcube'>";

	htmlstr += "<ul class='colcube'>";
	htmlstr += "<li><input class='colcube' type='radio' name='"+cubename+"col' id='"+cubename+"col' value='red' checked='yes' onclick=\"changecube('red',true,255,'"+cubename+"')\"> Red";

	htmlstr += "<li><input class='colcube' type='radio' name='"+cubename+"col' id='"+cubename+"col' value='green' onclick=\"changecube('green',true,255,'"+cubename+"')\"> Green";
	htmlstr += "<li><input class='colcube' type='radio' name='"+cubename+"col' id='"+cubename+"col' value='blue' onclick=\"changecube('blue',true,255,'"+cubename+"')\"> Blue";
	htmlstr += "<li><input class='colcube' type='radio' name='"+cubename+"col' id='"+cubename+"col' value='grey' onclick=\"saturate('"+cubename+"')\"> Grey Scale";
	htmlstr += "<li><input class='colcube' type='text' id='"+cubename+"actcol' size=20 style='border-width:1px;border-style:solid;border-color:black;background:"+currcolor+"'><br>";
	htmlstr += "<li><input class='colcube' type='text' id='"+cubename+"currentcol' value='"+currcolor+"' size=20 style='border-width:1px;border-style:solid;border-color:black'>";

//
	htmlstr += "</ul>"
	htmlstr += "</form>";
	htmlstr += "<br clear=all>";
}



function showCube()
{

	document.writeln(htmlstr); // Shows the actual cube

	var barname = cubename+"bar";
	var x = document.getElementById(barname);
	var td = x.getElementsByTagName("td").item(0);
	var posx = findposx(td);
	var posy = findposy(td);
	var ie;
	if (document.all)
	{
		ie = true;
	}
	else
	{
		ie = false;
	}

	if (!ie)
	{

	var arrowname = cubename+"arrow2";
	var td = document.getElementById(arrowname);
	td.style.left = posx + 'px';
	td.style.top = posy + 'px';

	}
	else
	{
		var arrowname = cubename+"arrow2";
                document.all[arrowname].style.left = posx;
                document.all[arrowname].style.top = posy;
	}

	colname = cubename+"colcube";
	var x = document.getElementById(colname);
	var td = x.getElementsByTagName("td").item(0);
	var posx = findposx(td);
	var posy = findposy(td);
	if (!ie)
	{		
	var arrowname = cubename+"arrow";
	var td = document.getElementById(arrowname);
	td.style.left = posx + 'px';
	td.style.top = posy + 'px';
	}
	else
	{
		var arrowname = cubename+"arrow";
                document.all[arrowname].style.left = posx;
                document.all[arrowname].style.top = posy;
	}


}

function findposx(s)
{

	var curLeft = 0;
	var idx = 0;
	var cnt = 2;
	if (s.offsetParent)
	{

		while (s.offsetParent)
		{
			curLeft += s.offsetLeft;
			s = s.offsetParent;
			idx+=1;

		}


	}
	else if (s.x) { curLeft += s.x; }
	return curLeft;

	
}

function findposy(s)
{
	var curTop = 0;
	var idx = 0;
	var cnt = 2;

	if (s.offsetParent)
	{
		while (s.offsetParent)
		{
			curTop += s.offsetTop;
			s = s.offsetParent;
			idx+=1;
		}


	}
	else if (s.x) { curTop += s.x; }

	return curTop;
	
}

function gethexcolor(hcolor)
{

// The base variable holds the hex value divided by 16 (hex)
// The rem variable holds the remainder 

	base = hcolor / 16;
	rem = hcolor % 16;
	base = base - (rem / 16);

// The MakeHex function turns the decimal into the hex value

	baseS = MakeHex(base);
	remS = MakeHex(rem);
	hcolor = baseS + '' + remS		
	return hcolor;
}

function MakeHex(x) {
if((x >= 0) && (x <= 9))
return x;
else {
switch(x) {
case 10: return "A"; 
case 11: return "B";  
case 12: return "C";  
case 13: return "D";  
case 14: return "E";  
case 15: return "F";  
      }
   }
}


function saturate(cubeid)
{
// The saturate function is called if the user chooses gray.
// 
// These lines clear the current selection
//
	var colname = cubeid+"colcube";

	var id = document.getElementById(colname);
	var td = id.getElementsByTagName("td").item(0);
	var posx = findposx(td);
	var posy = findposy(td);
		
	var ie;
	if (document.all)
	{
		ie = true;
	}
	else
	{
		ie = false;
	}


	if (ie)
	{
		var arrowname = cubeid+"arrow";
                document.all[arrowname].style.left = posx;
                document.all[arrowname].style.top = posy;

	}
	else
	{
		var arrowname=cubeid+"arrow";
		var td = document.getElementById(arrowname);
		td.style.left = posx + "px";
		td.style.top = posy + "px";

	}
	formname = cubeid+"colcubeform";
	var td = document.getElementById(formname);
	var act = cubeid+"actcol";
	var cur = cubeid+"currentcol";

	td[act].style.backgroundColor = "#FFFFFF";
	td[cur].value = "#FFFFFF";



	var lth = id.getElementsByTagName("td").length;
	var ind = 0;
	while (ind < lth)
	{
		var td = id.getElementsByTagName("td").item(ind);
		td.style.border = "none";
		ind += 1;
	}

// On a grey scale each cell on the line is the same colour
// Each row is slightly darker

	outcolor = 255;
	incolor = 255;
	barcolor = 255;
	ind = 0;	
	var ind2 = 0;
	var colname = cubeid+"colcube";

	id = document.getElementById(colname);
	var across = 0;

	while (outcolor > 0)
	{

		while (ind < 255)
		{
			incolors=gethexcolor(incolor);
			barcolors=gethexcolor(barcolor);
			outcolors=gethexcolor(outcolor);

			totcol = "#" + incolors + barcolors + outcolors;

			td = id.getElementsByTagName("td").item(ind2);
			
			td.style.backgroundColor = totcol;
			
			ind2 += 1;

			ind += nocolors;
		}		
		ind = 0;
		outcolor = outcolor - nocolors;
		barcolor = barcolor - nocolors;
		incolor = incolor - nocolors;
	}

}

function selectcol(s,e)
{

// This function is called if someone clicks in the cube itself.
//
//

	var cubeid = s.offsetParent.id;	
	cubeid = cubeid.replace("colcube","");
	

	if (document.all)
	{
		IE = true;
	}
	else
	{
		IE = false;
	}
	var colname = cubeid+"colcube";
	var id = document.getElementById(colname);

	var posx = findposx(s);
	var posy = findposy(s);
		
	if (IE)
	{
		var arrowname = cubeid+"arrow";
                document.all[arrowname].style.left = posx;
                document.all[arrowname].style.top = posy;
	}
	else
	{

		var arrowname=cubeid+"arrow";
		var td = document.getElementById(arrowname);

		td.style.left = posx + "px";
		td.style.top = posy + "px";

	}
	

// These lines set the new selection

	if (!IE)
	{
		var newcolor = s.style.backgroundColor;
		var ind = 7;

		while (isNaN(newred))
		{
			var newred = newcolor.substring(4,ind);	
			ind-=1;
		}
		ind+=1;
		newred = newcolor.substring(4,ind);
		var startind = ind + 2;	
		ind = startind + 3;
		while (isNaN(newgreen))
		{
			var newgreen = newcolor.substring(startind,ind);	
			ind-=1;
		}
		ind+=1;
		var newgreen = newcolor.substring(startind,ind);
		var startind = ind + 2;	
		ind = newcolor.length;
		while (isNaN(newblue))
		{
			var newblue = newcolor.substring(startind,ind);	
			ind-=1;
		}
		ind+=1;
		var newblue = newcolor.substring(startind,ind);
		newred=gethexcolor(newred);
		newgreen=gethexcolor(newgreen);
		newblue=gethexcolor(newblue);

		totcol = "#" + newred + newgreen + newblue;		
		formname = cubeid+"colcubeform";
		var act = cubeid+"actcol";
		var td = document.getElementById(act);
		td.style.backgroundColor = s.style.backgroundColor;

		var cur = cubeid+"currentcol";
		var td = document.getElementById(cur);
		td.value = totcol;



	}
	else
	{
		formname = cubeid+"colcubeform";

		var td = document.getElementById(formname);
		var act = cubeid+"actcol";
		var cur = cubeid+"currentcol";

		td[act].style.backgroundColor = s.style.backgroundColor;

		var x = s.style.backgroundColor;
		td[cur].value = x.toUpperCase();
	}

// If the backgroundcolor is darker than #666666 then change the font color to white
//

}

function refreshcol(s)
{

// This function is called when a user clicks on the bar
//
// These lines clear the current selection on the bar

	var cubeid = s.offsetParent.id;	

	cubeid = cubeid.replace("bar","");


	var posx = findposx(s);
	var posy = findposy(s);


	var ie;
	if (document.all)
	{
		ie = true;
	}
	else
	{
		ie = false;
	}


	if (ie)
	{
		var arrowname = cubeid+"arrow2";
                document.all[arrowname].style.left = posx;
                document.all[arrowname].style.top = posy;
	}
	else
	{
		var arrowname=cubeid+"arrow2";
		var td = document.getElementById(arrowname);

		td.style.left = posx + "px";
		td.style.top = posy + "px";

	}


	var colname = cubeid+"colcube";
	var id = document.getElementById(colname);



	var x = s.id;
	x = x.replace(cubeid,"");


// X currently contains the td object just clicked. The id for each td on the bar is bar010 or bar255 or bar123.
// By extracting the number the barcolor can be set.

	var y = x.substring(3,6);
	var barcolor = parseInt(y);
	
// This bit checks the form values so that the changecube function can be called with the correct form value.
	cubeid = cubeid.replace("colcubeform","");


	formname = cubeid+"colcubeform";
	var td = document.getElementById(formname);

	if (td[0].checked)
	{

		var col = 'red';

	}


	if (td[1].checked)
	{
		var col = 'green';
	}


	if (td[2].checked)
	{
		var col = 'blue';
	}

// Only change the cube if the form selection isn't grey

	if (!td[3].checked)
	{

		changecube(col,true,barcolor,cubeid);
	
	}

}
function changecube(col,whole,barcolor,cubeid)
{

// This function rebuilds the colour cube if the user clicks on one of the radio buttons
// Or clicks on the colour bar.

// The first part of the function sets the cell in the top left corner of the colour cube as the default
// and updates the text box on the form control
//


	var colname = cubeid+"colcube";
	var id = document.getElementById(colname);
	var td = id.getElementsByTagName("td").item(0);
	var posx = findposx(td);
	var posy = findposy(td);
		
	var ie;
	if (document.all)
	{
		ie = true;
	}
	else
	{
		ie = false;
	}


	if (ie)
	{
		var arrowname = cubeid+"arrow";
                document.all[arrowname].style.left = posx;
                document.all[arrowname].style.top = posy;
	}
	else
	{
		var arrowname=cubeid+"arrow";
		var td = document.getElementById(arrowname);


		td.style.left = posx + "px";
		td.style.top = posy + "px";
	}


	var ind = 0;

	var outcolor = 255;
	var incolor = 0;

	incolors=gethexcolor(incolor);
	barcolors=gethexcolor(barcolor);
	outcolors=gethexcolor(outcolor);
	formname = cubeid+"colcubeform";
	var td = document.getElementById(formname);

	if (col == "red")
	{
		var act = cubeid+"actcol";
		var cur = cubeid+"currentcol";

		td[cur].value = "#" + barcolors + incolors + outcolors;

		td[act].style.backgroundColor = "#" + barcolors + incolors + outcolors;
		

	}			
	if (col == "green")
	{
		var act = cubeid+"actcol";
		var cur = cubeid+"currentcol";
		td[cur].value = "#" + incolors + barcolors + outcolors;
		td[act].style.backgroundColor = "#" + incolors + barcolors + outcolors;
	}
	if (col == "blue")
	{
		var act = cubeid+"actcol";
		var cur = cubeid+"currentcol";
		td[cur].value = "#" + incolors + outcolors + barcolors;
		td[act].style.backgroundColor = "#" + incolors + outcolors + barcolors;
	}


// This section rebuilds the colour cube. Note R,G,B in this function are called outcolor, incolor and barcolor
// 

	while (outcolor > 0)
	{
		while (incolor < 255)
		{

			incolors=gethexcolor(incolor);
			barcolors=gethexcolor(barcolor);
			outcolors=gethexcolor(outcolor);
			if (col == "red")
			{
				totcol = "#" + barcolors + incolors + outcolors;
			}			
			if (col == "green")
			{
				totcol = "#" + incolors + barcolors + outcolors;
			}
			if (col == "blue")
			{
				totcol = "#" + incolors + outcolors + barcolors;
			}
			var td = id.getElementsByTagName("td").item(ind);

			td.style.backgroundColor = totcol;

			ind += 1;
			incolor += nocolors;

		}		
		outcolor = outcolor - nocolors;
		incolor = 0;

	}

// This section rebuilds the colour bar

	if (whole)
	{
		barcolor = 255;
		barname = cubeid+"bar";
		id = document.getElementById(barname);
		ind = 0;

		while (barcolor > 0)
		{
			incolor = 0;
			outcolor = 0;
			incolors=gethexcolor(incolor);
			barcolors=gethexcolor(barcolor);
			outcolors=gethexcolor(outcolor);
			if (col == "red")
			{
				totcol = "#" + barcolors + incolors + outcolors;
			}			
			if (col == "green")
			{
				totcol = "#" + incolors + barcolors + outcolors;
			}
			if (col == "blue")
			{
				totcol = "#" + incolors + outcolors + barcolors;
			}
			var td = id.getElementsByTagName("td").item(ind);
		
			td.style.backgroundColor = totcol;


			ind = ind + 1;
			barcolor = barcolor - nocolors;
		}

	}

}