var perline = 9;
	var divSet = false;

	var colorArray = [];
	colorArray["r"] = [];
	colorArray["g"] = [];
	colorArray["b"] = [];

	var length = 6 * 255 + 1;

	var nocolor = 'none';

	var linkPrefix = "_link";

	var id;

	var is = new browserCheck();

	var showColorCallback;

	var rawValues=new Array(
	255, 255, 255, // first row.
	204, 255, 255,
	204, 204, 255,
	204, 204, 255,
	204, 204, 255,
	204, 204, 255,
	204, 204, 255,
	204, 204, 255,
	204, 204, 255,
	204, 204, 255,
	204, 204, 255,
	255, 204, 255,
	255, 204, 204,
	255, 204, 204,
	255, 204, 204,
	255, 204, 204,
	255, 204, 204,
	255, 204, 204,
	255, 204, 204,
	255, 204, 204,
	255, 204, 204,
	255, 255, 204,
	204, 255, 204,
	204, 255, 204,
	204, 255, 204,
	204, 255, 204,
	204, 255, 204,
	204, 255, 204,
	204, 255, 204,
	204, 255, 204,
	204, 255, 204,
	204, 204, 204, // second row.
	153, 255, 255,
	153, 204, 255,
	153, 153, 255,
	153, 153, 255,
	153, 153, 255,
	153, 153, 255,
	153, 153, 255,
	153, 153, 255,
	153, 153, 255,
	204, 153, 255,
	255, 153, 255,
	255, 153, 204,
	255, 153, 153,
	255, 153, 153,
	255, 153, 153,
	255, 153, 153,
	255, 153, 153,
	255, 153, 153,
	255, 153, 153,
	255, 204, 153,
	255, 255, 153,
	204, 255, 153,
	153, 255, 153,
	153, 255, 153,
	153, 255, 153,
	153, 255, 153,
	153, 255, 153,
	153, 255, 153,
	153, 255, 153,
	153, 255, 204,
	204, 204, 204, // third row
	102, 255, 255,
	102, 204, 255,
	102, 153, 255,
	102, 102, 255,
	102, 102, 255,
	102, 102, 255,
	102, 102, 255,
	102, 102, 255,
	153, 102, 255,
	204, 102, 255,
	255, 102, 255,
	255, 102, 204,
	255, 102, 153,
	255, 102, 102,
	255, 102, 102,
	255, 102, 102,
	255, 102, 102,
	255, 102, 102,
	255, 153, 102,
	255, 204, 102,
	255, 255, 102,
	204, 255, 102,
	153, 255, 102,
	102, 255, 102,
	102, 255, 102,
	102, 255, 102,
	102, 255, 102,
	102, 255, 102,
	102, 255, 153,
	102, 255, 204,
	153, 153, 153, // fourth row
	51, 255, 255,
	51, 204, 255,
	51, 153, 255,
	51, 102, 255,
	51, 51, 255,
	51, 51, 255,
	51, 51, 255,
	102, 51, 255,
	153, 51, 255,
	204, 51, 255,
	255, 51, 255,
	255, 51, 204,
	255, 51, 153,
	255, 51, 102,
	255, 51, 51,
	255, 51, 51,
	255, 51, 51,
	255, 102, 51,
	255, 153, 51,
	255, 204, 51,
	255, 255, 51,
	204, 255, 51,
	153, 244, 51,
	102, 255, 51,
	51, 255, 51,
	51, 255, 51,
	51, 255, 51,
	51, 255, 102,
	51, 255, 153,
	51, 255, 204,
	153, 153, 153, // Fifth row
	0, 255, 255,
	0, 204, 255,
	0, 153, 255,
	0, 102, 255,
	0, 51, 255,
	0, 0, 255,
	51, 0, 255,
	102, 0, 255,
	153, 0, 255,
	204, 0, 255,
	255, 0, 255,
	255, 0, 204,
	255, 0, 153,
	255, 0, 102,
	255, 0, 51,
	255, 0 , 0,
	255, 51, 0,
	255, 102, 0,
	255, 153, 0,
	255, 204, 0,
	255, 255, 0,
	204, 255, 0,
	153, 255, 0,
	102, 255, 0,
	51, 255, 0,
	0, 255, 0,
	0, 255, 51,
	0, 255, 102,
	0, 255, 153,
	0, 255, 204,
	102, 102, 102, // sixth row
	0, 204, 204,
	0, 204, 204,
	0, 153, 204,
	0, 102, 204,
	0, 51, 204,
	0, 0, 204,
	51, 0, 204,
	102, 0, 204,
	153, 0, 204,
	204, 0, 204,
	204, 0, 204,
	204, 0, 204,
	204, 0, 153,
	204, 0, 102,
	204, 0, 51,
	204, 0, 0,
	204, 51, 0,
	204, 102, 0,
	204, 153, 0,
	204, 204, 0,
	204, 204, 0,
	204, 204, 0,
	153, 204, 0,
	102, 204, 0,
	51, 204, 0,
	0, 204, 0,
	0, 204, 51,
	0, 204, 102,
	0, 204, 153,
	0, 204, 204,
	102, 102, 102, // seventh row
	0, 153, 153,
	0, 153, 153,
	0, 153, 153,
	0, 102, 153,
	0, 51, 153,
	0, 0, 153,
	51, 0, 153,
	102, 0, 153,
	153, 0, 153,
	153, 0, 153,
	153, 0, 153,
	153, 0, 153,
	153, 0, 153,
	153, 0, 102,
	153, 0, 51,
	153, 0, 0,
	153, 51, 0,
	153, 102, 0,
	153, 153, 0,
	153, 153, 0,
	153, 153, 0,
	153, 153, 0,
	153, 153, 0,
	102, 153, 0,
	51, 153, 0,
	0, 153, 0,
	0, 153, 51,
	0, 153, 102,
	0, 153, 153,
	0, 153, 153,
	51, 51, 51, // eigth row
	0, 102, 102,
	0, 102, 102,
	0, 102, 102,
	0, 102, 102,
	0, 51, 102,
	0, 0, 102,
	51, 0, 102,
	102, 0, 102,
	102, 0, 102,
	102, 0, 102,
	102, 0, 102,
	102, 0, 102,
	102, 0, 102,
	102, 0, 102,
	102, 0, 51,
	102, 0, 0,
	102, 51, 0,
	102, 102, 0,
	102, 102, 0,
	102, 102, 0,
	102, 102, 0,
	102, 102, 0,
	102, 102, 0,
	102, 102, 0,
	51, 102, 0,
	0, 102, 0,
	0, 102, 51,
	0, 102, 102,
	0, 102, 102,
	0, 102, 102,
	0, 0, 0, // ninth row
	0, 51, 51,
	0, 51, 51,
	0, 51, 51,
	0, 51, 51,
	0, 51, 51,
	0, 0, 51,
	51, 0, 51,
	51, 0, 51,
	51, 0, 51,
	51, 0, 51,
	51, 0, 51,
	51, 0, 51,
	51, 0, 51,
	51, 0, 51,
	51, 0, 51,
	51, 0, 0,
	51, 51, 0,
	51, 51, 0,
	51, 51, 0,
	51, 51, 0,
	51, 51, 0,
	51, 51, 0,
	51, 51, 0,
	51, 51, 0,
	0, 51, 0,
	0, 51, 51,
	0, 51, 51,
	0, 51, 51,
	0, 51, 51,
	51, 51, 51
);

	/**
	 * Perform a browser check to see what browser the client is using.
	 * Added this line
	 */
	function browserCheck() {
		this.ns4 = (document.layers) ? true : false;
		this.ie = (document.all && (!window.opera)) ? true : false;
		this.dom = (document.getElementById) ? true : false;
		this.ns6 = (window.sidebar) ? true : false;
		this.moz = (window.sidebar || navigator.userAgent.indexOf('Gecko') != -1) ? true : false;
		this.opera = (window.opera) ? true : false;
		this.mac = (navigator.userAgent.indexOf('Mac') != -1) ? true : false;
	}

	/**
	 * Convert the given hex color value (eg. #ffffff) to a valid
	 * rgb decimal number. This script has been taken from javas color
	 * class (java.awt.Color)
	 * Please note that this script uses the 4th rgb channel (alpha) in it conversions
	 * and defaults this to 255 (or) no transparency.
	 */
	function toRGBDecimal(value) {
		try{
			var alpha = 255;
			var red = eval("0x" + value.substring(1, 3));
			var green = eval("0x" + value.substring(3, 5));
			var blue = eval("0x" + value.substring(5, 7));

			return ((alpha & 0xFF) << 24) |
				((red & 0xFF) << 16) |
				((green & 0xFF) << 8) |
				((blue & 0xFF) << 0);
		} catch (exception) {
			return value;
		}
	}

	/**
	 * This is the reverse of the toRGBDecimal method. It will take a rbg decminal in
	 * the format described in toRGBDecimal and converts it back to a hex color.
	 */
	function RGBDecimalToHex(rgb) {
		var red = (rgb >> 16) & 0xFF;
		var green = (rgb >> 8) & 0xFF;
		var blue = (rgb >> 0) & 0xFF;
		var hex = "#" + int2Hex(red) + int2Hex(green) + int2Hex(blue);
		return hex;
	}

	/**
	 *	Converts an integer into a hexadecimal value.
	 */
	function int2Hex(integer) {
		integer = (integer > 255) ? 255 : (integer < 0) ? 0 : integer;
		hex1 = Math.floor(integer / 16);
		hex2 = integer % 16;
		return hex1.toString(16) + hex2.toString(16)
	}

	function RGBToDecimal(r,g,b){
		var a = 255;
		var value = ((a & 0xFF) << 24) |
				((r & 0xFF) << 16) |
				((g & 0xFF) << 8) |
				((b & 0xFF) << 0);

		return value;
	}

	function RGBToHex(r,g,b){
		var decimal = RGBToDecimal(r,g,b);
		return RGBDecimalToHex(decimal);
	}


	/**
	 * Called when the user manually types into the hex colour field
	 * on the parent page. It will take the inputed hex value and convert it to a valid
	 * rgb integer and set the value.
	 */
	function setHexKeypress(hexField, identifier)
	{
		if (hexField.value.length == 7)
		{
			relateColor(identifier);
		}
	}

	/**
	 * Called when the user manually types into the hex colour field
	 * on the parent page. It will take the inputed hex value and convert it to a valid
	 * rgb integer and set the value.
	 */
	function setHexBlur(hexField, identifier)
	{
		relateColor(identifier);
	}

/*	function isMouseOverPicker(){
		var picker = getObj('colorpicker');
		var height = picker.offsetHeight;
		var left = picker.offsetLeft;
		var top = picker.offsetTop;
		var width = picker.offsetWidth;

		var mouseX = event.clientX;
		var mouseY = event.clientY;

		if(mouseX > left && mouseX < left+width){
			if(mouseY > top && mouseY < top + height){
				return true;
			}
		}
		return false;
	}*/

	function isMouseOverPicker(){
		var picker = getObj('colorpicker');
		var height = picker.offsetHeight;
		var left = picker.offsetLeft;
		var top = picker.offsetTop;
		var width = picker.offsetWidth;

		var mouseX = event.clientX;
		var mouseY = event.clientY;

		if(this.ie){
			mouseX = mouseX + getScrollX();
			mouseY = mouseY + getScrollY();
		}

		if(mouseX > left && mouseX < (left+width)){
			if(mouseY > top && mouseY < (top + height)){
				over = true;
			}
		}

		var leftWidth = left+width;
		var topHeight = top+height;

		return over;
	}

	/**
	 * Determine how much the page has been scrolled horrizontally
	 */
	function getScrollX(){
		var x;
		if (self.pageYOffset) // all except Explorer
		{
			x = self.pageXOffset;
		}
		else if (document.documentElement && document.documentElement.scrollTop) // Explorer 6 Strict
		{
			x = document.documentElement.scrollLeft;
		}
		else if (document.body) // all other Explorers
		{
			x = document.body.scrollLeft;
		}
		return x;
	}

	/**
	 * Determine how much the page has been scrolled vertically
	 */
	function getScrollY(){
		var y;
		if (self.pageYOffset) // all except Explorer
		{
			y = self.pageYOffset;
		}
		else if (document.documentElement && document.documentElement.scrollTop) // Explorer 6 Strict
		{
			y = document.documentElement.scrollTop;
		}
		else if (document.body) // all other Explorers
		{
			y = document.body.scrollTop;
		}
		return y
	}

	function closePicker(){
		var picker = getObj('colorpicker');
		if(isMouseOverPicker()){
			return;
		}

		if(picker){
			showColor(picker.currentColor);
			pickerStyle = getStyleElement(picker);

			if(pickerStyle.visibility == 'visible') {
				pickerStyle.visibility = 'hidden'
				showAllElements();
				return;
			}
		}
	}

	function showColor(color){
		var picker = getObj('colorpicker');
		var hex = getObj(id);
		var linkField = getObj(id + linkPrefix);

		var height = picker.offsetHeight;
		var left = picker.offsetLeft;
		var top = picker.offsetTop;
		var width = picker.offsetWidth;

		hex.value = color.toUpperCase();

		linkFieldStyle = getStyleElement(linkField)

		if (color == '') {
			linkFieldStyle.background = nocolor;
			linkFieldStyle.color = nocolor;
			color = nocolor;
		} else {
			linkFieldStyle.background = color;
			linkFieldStyle.color = color;
		}
		if(showColorCallback){
			showColorCallback(toRGBDecimal(hex.value));
		}
	}

	/**
	 * When the user selects a color from the picker, this script is executed.
	 * It sets the rgb value of the color and updates the hex field.
	 */
	function setColor(color) {
		var picker = getObj('colorpicker');
		showColor(color);
		this.id = "";
		pickerStyle = getStyleElement(picker);
		pickerStyle.visibility = 'hidden';

		showAllElements();
	}

	/**
	 * Creates the div to hold the picker.
	 * This script should only ever be called once
	 */
	function setDiv() {
		var html = '<span style="font-family:Verdana; font-size:11px;">'
				+ getColorTable()
				+ '</span>';
		if(is.ns4){
			document.createElement = createElement;
		}

		var elemDiv = document.createElement('layer');
		elemDiv.name = 'colorpicker';
		elemDiv.id = 'colorpicker';
		elemDivStyle = getStyleElement(elemDiv);
		elemDivStyle.position = 'absolute';
		elemDivStyle.visibility = 'hidden';
		elemDivStyle.border = '#000000 1px solid';
		elemDivStyle.background = '#FFFFFF';
		elemDivStyle.zIndex = '1';

		if(is.ns4){
			elemDiv.open();
			elemDiv.write(html);
			elemDiv.close();
		} else {
			elemDiv.innerHTML = html;
			document.body.appendChild(elemDiv);
		}
		divSet = true;
	}

	/**
	 * Used to show the picker popup. This script is called from the
	 * button next to the hex field.
	 */
	function pickColor(id, callback) {
		this.id = id;

		if (!divSet) {
			setDiv();
		}

		var picker = getObj('colorpicker');
		var hex = getObj(id);

		pickerStyle = getStyleElement(picker);

		if(pickerStyle.visibility == 'visible') {
			pickerStyle.visibility = 'hidden'
			showAllElements();
			return;
		}

		var linkField = getObj(id + linkPrefix);

		pickerStyle.top = getAbsoluteOffsetTop(linkField) + 20;
		pickerStyle.left = getAbsoluteOffsetLeft(linkField);
		pickerStyle.visibility = 'visible';
		picker.currentColor = hex.value;

		hideAllElementsBehind('colorpicker');
		this.showColorCallback = callback
	}

	function pickerMouseOut(){
		if (!isMouseOverPicker()) {
			showColor(getObj('colorpicker').currentColor)
		}
	}

	/**
	 * writes the actual html needed to display the color table in the div.
	 * Should only be called once by setDiv
	 */
	function getColorTable() {
		var tableInnerHtml = '<table border="0" cellpadding="0" cellspacing="1" onMouseOut="pickerMouseOut()">';
		var numberOfColors = rawValues.length / 3;
		var rows = 9;
		var cols = numberOfColors / rows

		var currentPosition = 0;
		for(var i=1; i<=rows; i++){
			tableInnerHtml += '<tr>'
			for(var x=1; x<=cols; x++){
				var r = rawValues[currentPosition++];
				var g = rawValues[currentPosition++];
				var b = rawValues[currentPosition++];
				var hex = RGBToHex(r,g,b);
				tableInnerHtml += '<td bgcolor="'+hex+'" width="8" height="8" onMouseMove="showColor(\''+hex+'\')" onClick="setColor(\''+hex+'\')"></td>';
			}
			tableInnerHtml += '</tr>'
		}
		tableInnerHtml += '</table>';
		return tableInnerHtml;
	}

	/**
	 * Ensures that the value in the hex field is the same as teh colour displated in the button
	 * and the rgb decimal stored in the hidden field. The parameter is the id of the rgb decimal field.
	 */
	function relateColor(identifier) {
		hex = getObj(identifier);
		link = getObj(identifier + linkPrefix);
		hexStyle = getStyleElement(hex);
		linkStyle = getStyleElement(link);

		if (hex.value == '')
		{
			linkStyle.background = nocolor;
			linkStyle.color = nocolor;
			hexStyle.color = nocolor;
			hex.value = nocolor;
		}
		else
		{
			linkStyle.background = hex.value;
			linkStyle.color = hex.value;

			if(is.ns4)
			{
				hexStyle.color = hex.value;
			}
		}
	}

	/**
	 * Netscape 4 helper method.
	 * In browsers newer than NS4, all objects have a valid style object, however in
	 * NS4, the attributes of the style object are all incorporated into the main object.
	 * Hence this method.
	 */
/*	e getStyleElement(object){
		if(is.ns4){
			return object;
		} else {
			return object.style;
		}
	}

	!!!moved to base.js!!!

	*/

	/**
	 *	Positioning script for the div to ensure it is poistioned in the correct spot
	 */
	function getAbsoluteOffsetTop(obj) {
		var top = obj.offsetTop;
		var parent = obj.offsetParent;
		while (parent != document.body) {
			top += parent.offsetTop;
			parent = parent.offsetParent;
		}
		return top;
	}

	/**
	 *	Positioning script for the div to ensure it is poistioned in the correct spot
	 */
	function getAbsoluteOffsetLeft(obj) {
		var left = obj.offsetLeft;
		var parent = obj.offsetParent;
		while (parent != document.body) {
			left += parent.offsetLeft;
			parent = parent.offsetParent;
		}
		return left;
	}

	/**
	 *	Browser safe getElementByName (or id) method.
	 */
	function getObj(nameOfObject) {

		if (is.ie){
			return document.all[nameOfObject]
		} else if (is.dom) {
			return findDOMObject(nameOfObject)
		} else if (is.ns4) {
			//For this script we are only concerned with elements that are positioned within form tags.
			for(var i=0; i<document.forms.length; i++){
				obj = eval("document.forms[i].elements['"+nameOfObject+"']");
				if(obj){
					return obj;
				}
			}
			for(var i=0; i<document.layers.length; i++){
				if(document.layers[i].document.name == nameOfObject){
					return document.layers[i].document;
				}
			}
		}

		return "Object not found";
	}

	function findDOMObject(nameOfObject) {
		for (var i = 0; i < document.images.length; i++) {
			if (document.images[i].name == nameOfObject) return document.images[i]
		}
		return document.getElementById(nameOfObject)
	}

	function createElement(name){
		document.layers[name] = new Layer(300);
		document.layers[name].document.open();
		document.layers[name].document.write("abcd");
		document.layers[name].document.close();
		document.layers[name].document.name = name;
		document.layers[name].document.id = id;
		return document.layers[name].document;
	}