function ColorPicker(uniqId)
{
	this.id = uniqId;
	this.pickedColor = "000000";
	this.print = print;
	this.rgb2hex = rgb2hex;
	this.hex2rgb = hex2rgb;
	this.toggle = toggle;
	this.handleEvent = handleEvent;
	this.setColor = setColor;
	this.reset = reset;
	this.over = over;
	this.field = null;
	this.fieldRed = null;
	this.fieldGreen = null;
	this.fieldBlue = null;
	this.convert = convert;
	this.assocRgbFields = assocRgbFields;

	this.assocField = assocField;

	hexcode = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
	this.colortable = new Array();

	for(i=0;i<256;i++)
	{
		s1 = Math.floor(i / 16);
		s2 = i % 16;

		this.colortable[i] = hexcode[s1]+hexcode[s2];
	}
}

function print()
{
	code = "<div style=\"border:1px solid #666666;background-color:#cccccc;width:25px\" align=\"right\" id=\""+this.id+"\">\n";
	code+= "<div style=\"width:15px;height:10px;border:1px solid #666666;background-color:#" + this.pickedColor + ";margin:2px\" id=\"" + this.id + "_color\">\n";
	code+= "<div id=\""+this.id+"_picker\" style=\"width:200px;visibility:hidden;position:relative;top:1px;left:-8px\">\n";
	code+= "<span style=\"font-size: 12px\" id=\""+this.id+"_hex\">#" + this.pickedColor + "</span>\n";
	code+= "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"border:1px solid #666666\" id=\"" + this.id + "_table\">\n"

	for(r=0;r<256;r+=51)
	{
		code+= "<tr>";
		for(b=0;b<256;b+=51)
		{
			for(g=0;g<256;g+=51)
			{
				color = this.rgb2hex(r, g, b);
				code+= "<td id=\"" + this.id + "_" + color + "\" style=\"width:5px;height:10px;background-color:#" + color + "\">";
			}
		}
		code+= "</tr>";
	}

	code += "<tr>";
	for(var rgb=0;rgb<256;rgb+=51) {
		color = this.rgb2hex(rgb, rgb, rgb);
		code += "<td id=\"" + this.id + "_" + color + "\" style=\"height:10px;background-color:#" + color + "\" colspan=\"6\"></td>";
	}
	code += "</tr>";
	code+= "</table>\n";

	code+= "</div>\n";
	code+= "</div>\n";
	code+= "</div>\n";

	document.writeln(code);

	document.getElementById(this.id + "_table").addEventListener("mouseover", this, false);
	document.getElementById(this.id + "_table").addEventListener("mouseup", this, false);
	document.getElementById(this.id + "_table").addEventListener("mouseout", this, false);
	document.getElementById(this.id).addEventListener("click", this, false);
}

function handleEvent(e)
{
	switch(e.type)
	{
		case "mouseup":
			this.setColor(this.convert(e.target.style.backgroundColor));
			break;
		case "mouseout":
			this.reset();
			break;
		case "click":
			this.toggle();
			break;
		case "mouseover":
			if(!e.target.style.backgroundColor)
				return;

			this.over(this.convert(e.target.style.backgroundColor));
			break;
		case "blur":
			if(this.field && !this.setColor(this.field.value))
			{
				alert("Falsche Farbangabe!");
				e.target.focus();
			}
			else if(this.fieldRed && this.fieldGreen && this.fieldBlue)
			{
				if(this.fieldRed.value != "" && this.fieldGreen.value != "" && this.fieldBlue.value != "" && !this.setColor(this.rgb2hex(this.fieldRed.value, this.fieldGreen.value, this.fieldBlue.value)))
					alert("Falsche Farbangabe!");
			}
			this.reset();
			break;
	}
}

function convert(color)
{
	rgb = new Array();
	b = color.substring(color.lastIndexOf(",")+2, color.length-1);
	color = color.substring(0, color.lastIndexOf(","));
	g = color.substring(color.lastIndexOf(",")+2, color.length);
	color = color.substring(0, color.lastIndexOf(","));
	r = color.substring(4, color.length);
	return this.rgb2hex(r, g, b);
}

function setColor(bgcolor)
{
	if(bgcolor.indexOf("#") == 0 && (bgcolor.length == 7 || bgcolor.length == 4))
		this.pickedColor = bgcolor.substring(1, bgcolor.length);
	else if(bgcolor.length == 6 || bgcolor.length == 3)
		this.pickedColor = bgcolor;
	else return false;

	if(this.field)
		this.field.value = "#" + this.pickedColor;
	else if(this.fieldRed && this.fieldGreen && this.fieldBlue)
	{
		this.fieldRed.value = this.hex2rgb(this.pickedColor, "r");
		this.fieldGreen.value = this.hex2rgb(this.pickedColor, "g");
		this.fieldBlue.value = this.hex2rgb(this.pickedColor, "b");
	}

	return true;
}

function hex2rgb(color, rgb)
{
	switch(rgb)
	{
		case "r":
			value = color.substring(0, 2);
			break;
		case "g":
			value = color.substring(2, 4);
			break;
		case "b":
			value = color.substring(4, 6);
			break;
	}

	for(i=0;i<this.colortable.length;i++)
	{
		if(this.colortable[i] == value)
			return i;
	}
}

function reset()
{
	document.getElementById(this.id + "_hex").innerHTML = "#" + this.pickedColor;
	document.getElementById(this.id+"_color").style.backgroundColor = "#" + this.pickedColor;
}

function rgb2hex(r, g, b)
{
	return this.colortable[r] + this.colortable[g] + this.colortable[b];
}

function toggle()
{
	if(document.getElementById(this.id+"_picker").style.visibility == "visible")
		document.getElementById(this.id+"_picker").style.visibility = "hidden";
	else
		document.getElementById(this.id+"_picker").style.visibility = "visible";
}

function over(color)
{
	document.getElementById(this.id+"_hex").innerHTML = "#" + color;
	document.getElementById(this.id+"_color").style.backgroundColor = "#" + color;
}

function assocField(id)
{
	this.field = document.getElementById(id);

	this.field.addEventListener("blur", this, false);

	if(this.field.value != "")
		this.setColor(this.field.value);
}

function assocRgbFields(id_red, id_green, id_blue)
{
	this.fieldRed = document.getElementById(id_red);
	this.fieldGreen = document.getElementById(id_green);
	this.fieldBlue = document.getElementById(id_blue);

	this.fieldRed.addEventListener("blur", this, false);
	this.fieldGreen.addEventListener("blur", this, false);
	this.fieldBlue.addEventListener("blur", this, false);

	if(this.fieldRed.value != "" && this.fieldRed.value != "" && this.fieldRed.value != "")
		this.setColor(this.rgb2hex(this.fieldRed.value, this.fieldGreen.value, this.fieldBlue.value));
}