var objCurrent = objCurrentDiv = objPalette = objForm = Lclick = null;
var GblWidth = 404;
var GblHeight = 280;
var readyToHide = 0;
var doAlert = false;

fctShow = function(objFormElt,objDiv)
{	
	if (readyToHide == 1) readyToHide = 0;
	objCurrentDiv = document.getElementById(objDiv);
 if (objCurrentDiv) {
  objCurrent = objFormElt;  
  if (objFormElt.value + '' != '') {
    var hex = objCurrentDiv.style.backgroundColor.replace('#', '');
	hex = hex.toUpperCase();
	if(hex.length == 7) hex = hex.substr(1,6);
	objForm.txtHex.value = hex;	
	document.getElementById('pnlOldColor').style.backgroundColor = "#" + hex;	
	Hex_Changed();
  } 
 }
 if (objCurrent) {  
  get_scrolls();
  if (objPalette.style.display != 'block') {objPalette.style.display = 'block';}
  //objPalette.style.top = parseInt(screen.height/2 - GblHeight + t) + 'px';
  //objPalette.style.left = parseInt(screen.width/2 - GblWidth/2 + l + 260) + 'px';    
  objPalette.style.top = parseInt(mouseY + t - 120) + 'px';
  objPalette.style.left = parseInt(mouseX + l - 150) + 'px';   
 }
 HideSelect();
 if (!ie) document.getElementById('myPlayer').style.visibility = "hidden";
}

fctHide = function()
{
 objPalette.style.display = 'none';
 objCurrent = null; 
 ShowSelect();
 if (!ie)
 {
  var myP = document.getElementById ('myPlayer');
  if(myP!=null) myP.style.visibility = "visible";
 }
}
                                       

fctClose = function()
{
if (readyToHide == 1)
{
 fctHide();
 }
 else{
  readyToHide = 1;
  }
}

function btnWebSafeColor_Click()
{
	var hex = new String(objForm.txtHex.value);
	var rgb = HexToRgb(hex);
	rgb = RgbToWebSafeRgb(rgb);
	objForm.txtHex.value = RgbToHex(rgb);
	Hex_Changed();
}
function RgbIsWebSafe(rgb)
{
	var hex = RgbToHex(rgb);
	var isSafe = new Boolean(true);
	for(var i = 0; i < 3; i++)
		if("00336699CCFF".indexOf(hex.substr(i*2, 2)) == -1)
		{
			isSafe = false;
			break;
		}

	return isSafe;
}
function RgbToWebSafeRgb(rgb)
{
	var safeRgb = new Array(rgb[0], rgb[1], rgb[2]);

	if(RgbIsWebSafe(rgb)) return new Array(rgb[0], rgb[1], rgb[2]);
	
	var safeValue = new Array(0x00, 0x33, 0x66, 0x99, 0xCC, 0xFF);	
	
	for(var i = 0; i < safeRgb.length; i++)
		for(var j = 1; j < safeValue.length; j++)
			if(safeRgb[i] > safeValue[j-1] && safeRgb[i] < safeValue[j])
			{
				if(safeRgb[i] - safeValue[j-1] > safeValue[j] - safeRgb[i]) 
					safeRgb[i] = safeValue[j];
				else
					safeRgb[i] = safeValue[j-1];
				break;
			}

	return safeRgb;
}
function checkWebSafe()
{
	var hex = new String(objForm.txtHex.value);
	var rgb = HexToRgb(hex);
	
	if(RgbIsWebSafe(rgb))
	{
		objForm.btnWebSafeColor.style.display = "none";
		document.getElementById('pnlWebSafeColor').style.display = "none";
		document.getElementById('pnlWebSafeColorBorder').style.display = "none";
	}
	else
	{
		rgb = RgbToWebSafeRgb(rgb);
		document.getElementById('pnlWebSafeColor').style.backgroundColor = RgbToHex(rgb);
		objForm.btnWebSafeColor.style.display = "block";
		document.getElementById('pnlWebSafeColor').style.display = "block";
		document.getElementById('pnlWebSafeColorBorder').style.display = "block";
	}

}

function validateNumber()
{

	var key = String.fromCharCode(event.keyCode);

	var keys = new Array(0, 8, 9, 13, 27);

	if(key == null) return;

	for(var i = 0; i < keys.length; i++)
		if(event.keyCode == keys[i]) return;
	
	if("01234567879".indexOf(key) != -1) return;

	event.keyCode = 0;	
}
function validateHex()
{

	var key = String.fromCharCode(event.keyCode);

	var keys = new Array(0, 8, 9, 13, 27);

	if(key == null) return;

	for(var i = 0; i < keys.length; i++)
		if(event.keyCode == keys[i]) return;
	
	if("abcdef".indexOf(key) != -1)
	{
		event.keyCode = key.toUpperCase().charCodeAt(0);
		return;
	}

	if("01234567879ABCDEF".indexOf(key) != -1) return;

	event.keyCode = 0;	
}
function RgbToXyz(rgb)
{
	var sRgb = new Array(rgb[0], rgb[1], rgb[2]);
	
	for(var i = 0; i < sRgb.length; i++)
	{
		// linier
		sRgb[i] = rgb[i] / 255;

		// gamma curve
		if(sRgb[i] <= .04045) // .03928
			sRgb[i] = sRgb[i] / 12.92;
		else
			sRgb[i] = Math.pow((sRgb[i] + .055) / 1.055, 2.4);

		sRgb[i] *= 100;
	}

	var xyz = new Array(0, 0, 0);

	var matrix = new Array(
		new Array(.4124, .3576, .1805),
		new Array(.2126, .7152, .0722),
		new Array(.0193, .1192, .9505)
		)

	for(var i = 0; i < xyz.length; i++)
		for(var n = 0; n < sRgb.length; n++)
			xyz[i] += sRgb[n] * matrix[i][n];

	return xyz;
}
function RgbToCmy(rgb)
{
	var cmy = new Array(0, 0, 0);
	for(var i = 0; i < cmy.length; i++)
		cmy[i] = 255 - rgb[i];
	return cmy;
}
function CmyToCmyk(cmy)
{
	var cmyk = new Array(0, 0, 0, 255);
	
	for(var i = 0; i < cmy.length; i++)
		if(cmy[i] < cmyk[3]) cmyk[3] = cmy[i];
		
	for(var i = 0; i < cmy.length; i++)
		cmyk[i] = (cmy[i] - cmyk[3]);

	for(var i = 0; i < cmyk.length; i++)
		cmyk[i] = cmyk[i] / 255;

	return cmyk;
}
function RgbToCmyk(rgb)
{
	return CmyToCmyk(RgbToCmy(rgb));
}
function XyzToHunterLab(xyz)
{
	var Lab = new Array(0, 0, 0);
	Lab[0] = 10 * Math.sqrt(xyz[1]);
	Lab[1] = 17.5 * (((1.02 * xyz[0]) - xyz[1]) / Math.sqrt(xyz[1]));
	Lab[2] = 7 * ((xyz[1] - (.847 * xyz[2])) / Math.sqrt(xyz[1]));
	return Lab;
}
function RgbToLab(rgb)
{
	return XyzToHunterLab(RgbToXyz(rgb));
}

function btnCancel_Click()
{
	fctHide();
}
function btnOK_Click()
{
	try
	{
		objCurrentDiv.style.backgroundColor = '#'+new String(objForm.txtHex.value);
		objCurrent.value = '#'+new String(objForm.txtHex.value);
	}
	catch(e)
	{
	}
	fctHide();
}
function SetGradientPosition(x, y)
{
	if (ie) { 
	   l = document.documentElement.scrollLeft;
	   t = document.documentElement.scrollTop;
	  }	
  
	x -= parseInt(objPalette.style.left) - l;
	y -= parseInt(objPalette.style.top) - t;		
	
	document.getElementById('pnlGradientPosition').style.left = x + "px";
	document.getElementById('pnlGradientPosition').style.top = y + "px";
	
	// get true x/y
	x -= 7;
	y -= 8; 	
	
	var saturation = (x / 255) * 100;
	var brightness = 100 - ((y / 255) * 100);
	var hue = new Number(objForm.txtHSB_Hue.value);
	
	objForm.txtHSB_Saturation.value = Math.round(saturation);
	objForm.txtHSB_Brightness.value = Math.round(brightness);
	
	Hsb_Changed('pnlGradientPosition');
}
function Hex_Changed()
{	
	var hex = new String(objForm.txtHex.value);
	for(var i = 0; i < hex.length; i++)
		if("0123456789ABCDEFabcdef".indexOf(hex.substr(i, 1)) == -1)
		{
			hex = "000000";
			rgb = HexToRgb(hex);
			objForm.txtHex.value = "000000";
			if (doAlert) alert("An integer between 000000 and FFFFFF is required. Closest\r\nvalue inserted.");
		}
		
	while(hex.length < 6)
	{
		hex = "0" + hex;
	}
	
	var rgb = HexToRgb(hex);
	var hsb = RgbToHsb(rgb);
	var Lab = RgbToLab(rgb);
	var cmyk = RgbToCmyk(rgb);
	
	objForm.txtRGB_Red.value = rgb[0];
	objForm.txtRGB_Green.value = rgb[1];
	objForm.txtRGB_Blue.value = rgb[2];

	objForm.txtHSB_Hue.value = Math.round(hsb[0] * 360);
	objForm.txtHSB_Saturation.value = Math.round(hsb[1] * 100);
	objForm.txtHSB_Brightness.value = Math.round(hsb[2] * 100);

	objForm.txtLab_Luminancy.value = Math.round(Lab[0]);
	objForm.txtLab_A.value = Math.round(Lab[1]);
	objForm.txtLab_B.value = Math.round(Lab[2]);
	
	objForm.txtCMYK_Cyan.value = Math.round(cmyk[0] * 100);
	objForm.txtCMYK_Magenta.value = Math.round(cmyk[1] * 100);
	objForm.txtCMYK_Yellow.value = Math.round(cmyk[2] * 100);
	objForm.txtCMYK_Black.value = Math.round(cmyk[3] * 100);

	document.getElementById('pnlNewColor').style.backgroundColor = "#" + RgbToHex(rgb);

	if(Lab[0] >= 54)
		SetGradientPositionDark();
	else
		SetGradientPositionLight();
	
	document.getElementById('pnlGradientPosition').style.left = Math.round((hsb[1] * 255) + 7) + "px";
	document.getElementById('pnlGradientPosition').style.top = Math.round((255 - (hsb[2] * 255)) + 7) + "px";
	
	if(Math.round(hsb[0] * 360) == 360 || Math.round(hsb[0] * 360) == 0)
	{
		document.getElementById('pnlVerticalPosition').style.top = "7px";
		document.getElementById('pnlGradient_Hue').style.backgroundColor = "#FF0000";
	}
	else
	{
		document.getElementById('pnlVerticalPosition').style.top = Math.round((255 - (hsb[0] * 255)) + 7) + "px";
		document.getElementById('pnlGradient_Hue').style.backgroundColor = "#" + RgbToHex(HueToRgb(hsb[0]));
	}
	
	checkWebSafe();
}
function Rgb_Changed()
{
	var rgb = new Array(0, 0, 0);
	rgb[0] = new Number(objForm.txtRGB_Red.value);
	rgb[1] = new Number(objForm.txtRGB_Green.value);
	rgb[2] = new Number(objForm.txtRGB_Blue.value);
	
	if(rgb[0] > 255)
	{
		rgb[0] = 255;
		objForm.txtRGB_Red.value = 255;
		if (doAlert) alert("An integer between 0 and 255 is required. Closest\r\nvalue inserted.");
	}
	if(rgb[1] > 255)
	{
		rgb[1] = 255;
		objForm.txtRGB_Green.value = 255;
		if (doAlert) alert("An integer between 0 and 255 is required. Closest\r\nvalue inserted.");
	}
	if(rgb[2] > 255)
	{
		rgb[2] = 255;
		objForm.txtRGB_Blue.value = 255;
		if (doAlert) alert("An integer between 0 and 255 is required. Closest\r\nvalue inserted.");
	}
	
	var hsb = RgbToHsb(rgb);
	var Lab = RgbToLab(rgb);
	var cmyk = RgbToCmyk(rgb);
	
	objForm.txtHSB_Hue.value = Math.round(hsb[0] * 360);
	objForm.txtHSB_Saturation.value = Math.round(hsb[1] * 100);
	objForm.txtHSB_Brightness.value = Math.round(hsb[2] * 100);

	objForm.txtLab_Luminancy.value = Math.round(Lab[0]);
	objForm.txtLab_A.value = Math.round(Lab[1]);
	objForm.txtLab_B.value = Math.round(Lab[2]);
	
	objForm.txtCMYK_Cyan.value = Math.round(cmyk[0] * 100);
	objForm.txtCMYK_Magenta.value = Math.round(cmyk[1] * 100);
	objForm.txtCMYK_Yellow.value = Math.round(cmyk[2] * 100);
	objForm.txtCMYK_Black.value = Math.round(cmyk[3] * 100);

	objForm.txtHex.value = RgbToHex(rgb);
	document.getElementById('pnlNewColor').style.backgroundColor = "#" + RgbToHex(rgb);
	

	if(Lab[0] >= 54)
		SetGradientPositionDark();
	else
		SetGradientPositionLight();
	
	document.getElementById('pnlGradientPosition').style.left = Math.round((hsb[1] * 255) + 7) + "px";
	document.getElementById('pnlGradientPosition').style.top = Math.round((255 - (hsb[2] * 255)) + 7) + "px";
	
	if(Math.round(hsb[0] * 360) == 360 || Math.round(hsb[0] * 360) == 0)
	{
		document.getElementById('pnlVerticalPosition').style.top = "7px";
		document.getElementById('pnlGradient_Hue').style.backgroundColor = "#FF0000";
	}
	else
	{
		document.getElementById('pnlVerticalPosition').style.top = Math.round((255 - (hsb[0] * 255)) + 7) + "px";
		document.getElementById('pnlGradient_Hue').style.backgroundColor = "#" + RgbToHex(HueToRgb(hsb[0]));
	}
	
	checkWebSafe();
}
function Hsb_Changed(event_srcElement)
{
	var saturation = new Number(objForm.txtHSB_Saturation.value) / 100;
	var brightness = new Number(objForm.txtHSB_Brightness.value) / 100;
	var hue = new Number(objForm.txtHSB_Hue.value) / 360;

	if(hue > 1)
	{
		hue = 1;
		objForm.txtHSB_Hue.value = 360;
		if (doAlert) alert("An integer between 0 and 360 is required. Closest\r\nvalue inserted.");
	}
	if(saturation > 1)
	{
		saturation = 1;
		objForm.txtHSB_Saturation.value = 100;
		if (doAlert) alert("An integer between 0 and 100 is required. Closest\r\nvalue inserted.");
	}
	if(brightness > 1)
	{
		brightness = 1;
		objForm.txtHSB_Brightness.value = 100;
		if (doAlert) alert("An integer between 0 and 100 is required. Closest\r\nvalue inserted.");
	}

	var rgb = HsbToRgb(hue, saturation, brightness);
	var Lab = RgbToLab(rgb);
	var cmyk = RgbToCmyk(rgb);
	
	objForm.txtHex.value = RgbToHex(rgb);
	document.getElementById('pnlNewColor').style.backgroundColor = "#" + RgbToHex(rgb);
	
	switch (document.getElementById(event_srcElement).id)
	{
		case "pnlVertical_Top":
		case "txtHSB_Hue":
			document.getElementById('pnlGradient_Hue').style.backgroundColor = "#" + RgbToHex(HueToRgb(hue));
			break;
		default:
			break;
	}
	
	objForm.txtRGB_Red.value = rgb[0];
	objForm.txtRGB_Green.value = rgb[1];
	objForm.txtRGB_Blue.value = rgb[2];
	
	objForm.txtLab_Luminancy.value = Math.round(Lab[0]);
	objForm.txtLab_A.value = Math.round(Lab[1]);
	objForm.txtLab_B.value = Math.round(Lab[2]);
	
	objForm.txtCMYK_Cyan.value = Math.round(cmyk[0] * 100);
	objForm.txtCMYK_Magenta.value = Math.round(cmyk[1] * 100);
	objForm.txtCMYK_Yellow.value = Math.round(cmyk[2] * 100);
	objForm.txtCMYK_Black.value = Math.round(cmyk[3] * 100);
	
	if(Lab[0] >= 54)
		SetGradientPositionDark();
	else
		SetGradientPositionLight();
	
	if(document.getElementById(event_srcElement).tagName != "div")
	{
		document.getElementById('pnlGradientPosition').style.left = ((saturation * 255) + 7) + "px";
		document.getElementById('pnlGradientPosition').style.top = ((255 - (brightness * 255)) + 7) + "px";
		if(hue == 0)
			document.getElementById('pnlVerticalPosition').style.top = "7px";
		else
			document.getElementById('pnlVerticalPosition').style.top = ((255 - (hue * 255)) + 7) + "px";
	}
	
	checkWebSafe();		
	readyToDrag = 0;
}

var GradientPositionDark = new Boolean(false);
function SetGradientPositionDark()
{
	if(GradientPositionDark) return;
	GradientPositionDark = true;
	document.getElementById('pnlGradientPosition').style.backgroundImage = "url(images/colorpicker/GradientPositionDark.gif)";
}
function SetGradientPositionLight()
{
	if(!GradientPositionDark) return;
	GradientPositionDark = false;
	document.getElementById('pnlGradientPosition').style.backgroundImage = "url(images/colorpicker/GradientPositionLight.gif)";
}
function RgbToHsb(rgb)
{
	var sRgb = new Array(rgb[0], rgb[1], rgb[2]);
	var min = new Number(1);
	var max = new Number(0);
	var delta = new Number(1);
	var hsb = new Array(0, 0, 0);
	var deltaRgb = new Array(0, 0, 0);

	for(var i = 0; i < sRgb.length; i++)
	{
		sRgb[i] = rgb[i] / 255;
		if(sRgb[i] < min) min = sRgb[i];
		if(sRgb[i] > max) max = sRgb[i];
	}

	delta = max - min;
	hsb[2] = max;

	if(delta == 0) return hsb;

	hsb[1] = delta / max;

	for(var i = 0; i < sRgb.length; i++)
		deltaRgb[i] = (((max - sRgb[i]) / 6) + (delta / 2)) / delta;

	if (sRgb[0] == max)
		hsb[0] = deltaRgb[2] - deltaRgb[1];
	else if (sRgb[1] == max)
		hsb[0] = (1 / 3) + deltaRgb[0] - deltaRgb[2];
	else if (sRgb[2] == max)
		hsb[0] = (2 / 3) + deltaRgb[1] - deltaRgb[0];

	if(hsb[0] < 0)
		hsb[0] += 1;
	else if(hsb[0] > 1)
		hsb[0] -= 1;

	return hsb;
}
function HsbToRgb(hue, saturation, brightness)
{
	var rgb = HueToRgb(hue);
	var s = brightness * 255;

	for(var i = 0; i < rgb.length; i++)
	{
		rgb[i] = rgb[i] * brightness;
		rgb[i] = ((rgb[i] - s) * saturation) + s;
		rgb[i] = Math.round(rgb[i]);
	}
	return rgb;
}
function RgbToHex(rgb)
{
	var hex = new String();
	
	for(var i = 0; i < rgb.length; i++)
	{
		rgb[2 - i] = Math.round(rgb[2 - i]);
		hex = rgb[2 - i].toString(16) + hex;
		if(hex.length % 2 == 1) hex = "0" + hex;
	}
	
	return hex.toUpperCase();
}
function HexToRgb(hex)
{
	var rgb = new Array(0, 0, 0);
	for(var i = 0; i < rgb.length; i++)
		rgb[i] = new Number("0x" + hex.substr(i * 2, 2));
	return rgb;	
}
function pnlGradient_Top_Click()
{
	if (ie) {
		event.cancelBubble = true;
		SetGradientPosition(event.clientX - 5, event.clientY - 5);
	}
	else {
		SetGradientPosition(e_event.pageX - 5, e_event.pageY - 5);
	}
}
function pnlGradient_Top_MouseMove()
{
	readyToDrag = 0;	
	if (ie) {
		event.cancelBubble = true;
		if(event.button != 1) return;
		SetGradientPosition(event.clientX - 5, event.clientY - 5);
	}
	else {
		if(!Lclick) return; 
		SetGradientPosition(e_event.pageX - 5, e_event.pageY - 5);
	}
}
function pnlGradient_Top_MouseDown()
{
	if (ie) {
		event.cancelBubble = true;
		SetGradientPosition(event.clientX - 5, event.clientY - 5);
	}
	else {
		SetGradientPosition(e_event.pageX - 5, e_event.pageY - 5);
	}
	Lclick = true;
}
function pnlGradient_Top_MouseUp()
{
	if (ie) {
		event.cancelBubble = true;
		SetGradientPosition(event.clientX - 5, event.clientY - 5);
	}
	else {
		SetGradientPosition(e_event.pageX - 5, e_event.pageY - 5);
	}
	Lclick = false;
}
function HueToRgb(hue)
{
	var degrees = hue * 360;
	var rgb = new Array(0, 0, 0);
	var percent = (degrees % 60) / 60;
	
	if(degrees < 60)
	{
		rgb[0] = 255;
		rgb[1] = percent * 255;
	}
	else if(degrees < 120)
	{
		rgb[1] = 255;
		rgb[0] = (1 - percent) * 255;
	}
	else if(degrees < 180)
	{
		rgb[1] = 255;
		rgb[2] = percent * 255;
	}
	else if(degrees < 240)
	{
		rgb[2] = 255;
		rgb[1] = (1 - percent) * 255;
	}
	else if(degrees < 300)
	{
		rgb[2] = 255;
		rgb[0] = percent * 255;
	}
	else if(degrees < 360)
	{
		rgb[0] = 255;
		rgb[2] = (1 - percent) * 255;
	}
	
	return rgb;
}
function SetVerticalPosition(y,event_srcElement)
{
	if (ie) { //Internet Explorer
	   t = document.documentElement.scrollTop;
	  }	
	
	y -= parseInt(objPalette.style.top) - t;
	document.getElementById('pnlVerticalPosition').style.top = y + "px";
	var hue = 0;
	if(y == 7)
		objForm.txtHSB_Hue.value = 0;
	else
	{
		// Determine hue degree on color wheel
		hue = ((255 - (y - 7)) / 255) * 360;
		objForm.txtHSB_Hue.value = Math.round(hue);
	}
	Hsb_Changed(event_srcElement);
}
function pnlVertical_Top_Click()
{
	if (ie) {
		SetVerticalPosition(event.clientY - 5,'pnlVertical_Top');
		event.cancelBubble = true;
	}
	else {
		SetVerticalPosition(e_event.pageY - 5,'pnlVertical_Top');		
	}
}
function pnlVertical_Top_MouseMove()
{
	readyToDrag = 0;
	if (ie) {
		if(event.button != 1) return;
		SetVerticalPosition(event.clientY - 5,'pnlVertical_Top');
		event.cancelBubble = true;
	}
	else {
		if(!Lclick) return; 
		SetVerticalPosition(e_event.pageY - 5,'pnlVertical_Top');
	}	
}
function pnlVertical_Top_MouseDown()
{
	if (ie) {
		SetVerticalPosition(event.clientY - 5,'pnlVertical_Top');
		event.cancelBubble = true;
	}
	else {
		SetVerticalPosition(e_event.pageY - 5,'pnlVertical_Top');
	}	
	Lclick = true;
	
}
function pnlVertical_Top_MouseUp()
{
	if (ie) {
		SetVerticalPosition(event.clientY - 5,'pnlVertical_Top');
		event.cancelBubble = true;
	}
	else {
		SetVerticalPosition(e_event.pageY - 5,'pnlVertical_Top');
	}		
	Lclick = false;
}

//Construction HTML
StringBuilder = function()
{
 this.arrStr = new Array();
 this.Append = function( inVAL )
 {
  this.arrStr[this.arrStr.length] = inVAL;
 }
 this.toString = function()
 {
  return this.arrStr.join('');
 }
 this.Init = function()
 {
  this.arrStr = null;
  this.arrStr = new Array();
 }
}

var readyToDrag = 0;
var dragX = dragY = 0;

function objGlobal_Click()
{
	readyToHide = 0;
}

function objGlobal_MouseMove()
{
	if (readyToDrag)
	{
		objPalette.style.left = (mouseX + l - dragX)+'px';
		objPalette.style.top =( mouseY + t - dragY)+'px';
	}
}

function objGlobal_MouseDown()
{
	readyToDrag = 1;
	dragX = mouseX + l - parseInt(objPalette.style.left);
	dragY = mouseY + t - parseInt(objPalette.style.top);
}

function objGlobal_MouseUp()
{
	readyToDrag = 0;
}

function objGlobal_MouseOut()
{
	readyToDrag = 0;
}
	
var objSB = new StringBuilder();
objSB.Append('<div id="objGlobal" class="cpdiv" style="display:block;width:'+GblWidth+'px;height:'+GblHeight+'px;" onclick="objGlobal_Click()" onmousemove="objGlobal_MouseMove()" onmousedown="objGlobal_MouseDown()" onmouseup="objGlobal_MouseUp()" onmouseout="objGlobal_MouseOut()">');			
objSB.Append('<div id="pnlGradient_Top" class="cpdiv" onclick="pnlGradient_Top_Click()" onmousemove="pnlGradient_Top_MouseMove()" onmousedown="pnlGradient_Top_MouseDown()" onmouseup="pnlGradient_Top_MouseUp()"></div>');
objSB.Append('<div id="pnlGradient_Background1" class="cpdiv" onclick="pnlGradient_Top_Click()" onmousemove="pnlGradient_Top_MouseMove()" onmousedown="pnlGradient_Top_MouseDown()" onmouseup="pnlGradient_Top_MouseUp()"></div>');
objSB.Append('<div id="pnlGradient_Background2" class="cpdiv"></div>');
objSB.Append('<div id="pnlVertical_Background2" class="cpdiv"></div>');
objSB.Append('<div id="pnlVertical_Background1" class="cpdiv"></div>');
objSB.Append('<div id="pnlVertical_Top" class="cpdiv" onclick="pnlVertical_Top_Click()" onmousemove="pnlVertical_Top_MouseMove()" onmousedown="pnlVertical_Top_MouseDown()" onmouseup="pnlVertical_Top_MouseUp()"></div>');
objSB.Append('<div id="pnlGradient_Hue" class="cpdiv"></div>');
objSB.Append('<div id="pnlGradient_Black" class="cpdiv" style="filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, startY=100, finishY=0, startX=0, finishX=0);"></div>');
objSB.Append('<div id="pnlGradient_White" class="cpdiv" style="filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, startX=0, finishX=100, startY=0, finishY=0);"></div>');
objSB.Append('<div id="pnlSpectrum_Background" class="cpdiv"></div>');
objSB.Append('<div id="pnlSpectrum_RedMagenta" class="cpdiv"></div>');
objSB.Append('<div id="pnlSpectrum_MagentaBlue" class="cpdiv"></div>');
objSB.Append('<div id="pnlSpectrum_Blue" class="cpdiv"></div>');
objSB.Append('<div id="pnlSpectrum_BlueCyan" class="cpdiv"></div>');
objSB.Append('<div id="pnlSpectrum_CyanGreen" class="cpdiv"></div>');
objSB.Append('<div id="pnlSpectrum_Green" class="cpdiv"></div>');
objSB.Append('<div id="pnlSpectrum_GreenYellow" class="cpdiv"></div>');
objSB.Append('<div id="pnlSpectrum_YellowRed" class="cpdiv"></div>');
objSB.Append('<div id="pnlOldColor" class="cpdiv"></div>');
objSB.Append('<div id="pnlOldColorBorder" class="cpdiv"></div>');
objSB.Append('<div id="pnlNewColor" class="cpdiv"></div>');
objSB.Append('<div id="pnlNewColorBorder" class="cpdiv"></div>');
objSB.Append('<div id="pnlWebSafeColor" class="cpdiv" title="Click to select web safe color" onclick="btnWebSafeColor_Click()"></div>');
objSB.Append('<div id="pnlWebSafeColorBorder" class="cpdiv" onclick="btnWebSafeColor_Click()"></div>');
objSB.Append('<div id="pnlVerticalPosition" class="cpdiv"></div>');
objSB.Append('<div id="pnlGradientPosition" class="cpdiv"></div>');
objSB.Append('<div id="lblSelectColorMessage class="cpdiv"" style="display:none;">Select foreground color:</div>');
objSB.Append('<div id="lblHSB_Hue" class="cpdiv" style="display:none;">H:</div>');
objSB.Append('<div id="lblUnitHSB_Hue" class="cpdiv" style="display:none;">°</div>');
objSB.Append('<div id="lblHSB_Saturation" class="cpdiv" style="display:none;">S:</div>');
objSB.Append('<div id="lblUnitHSB_Saturation" class="cpdiv" style="display:none;">%</div>');
objSB.Append('<div id="lblHSB_Brightness" class="cpdiv" style="display:none;">B:</div>');
objSB.Append('<div id="lblUnitHSB_Brightness" class="cpdiv" style="display:none;">%</div>');
objSB.Append('<div id="lblRGB_Red" class="cpdiv">R</div>');
objSB.Append('<div id="lblRGB_Green" class="cpdiv">G</div>');
objSB.Append('<div id="lblRGB_Blue" class="cpdiv">B</div>');
objSB.Append('<div id="lblLab_Luminancy class="cpdiv"" style="display:none;">L:</div>');
objSB.Append('<div id="lblLab_A" class="cpdiv" style="display:none;">a:</div>');
objSB.Append('<div id="lblLab_B" class="cpdiv" style="display:none;">b:</div>');
objSB.Append('<div id="lblCMYK_Cyan" style="display:none;">C:</div>');
objSB.Append('<div id="lblUnitCMYK_Cyan" class="cpdiv" style="display:none;">%</div>');
objSB.Append('<div id="lblCMYK_Magenta" class="cpdiv" style="display:none;">M:</div>');
objSB.Append('<div id="lblUnitCMYK_Magenta" class="cpdiv" style="display:none;">%</div>');
objSB.Append('<div id="lblCMYK_Yellow" class="cpdiv" style="display:none;">Y:</div>');
objSB.Append('<div id="lblUnitCMYK_Yellow" class="cpdiv" style="display:none;">%</div>');
objSB.Append('<div id="lblCMYK_Black" class="cpdiv" style="display:none;">K:</div>');
objSB.Append('<div id="lblUnitCMYK_Black class="cpdiv"" style="display:none;">%</div>');
objSB.Append('<div id="lblHex" class="cpdiv">#</div>');
objSB.Append('<form id="frmColorPicker" name="frmColorPicker">');		
objSB.Append('<input type="text" class="cpinput" id="txtHSB_Hue" style="display:none;" onkeypress="validateNumber()" onkeyup="Hsb_Changed(\'txtHSB_Hue\')"/>');
objSB.Append('<input type="text" class="cpinput" id="txtHSB_Saturation" style="display:none;" onkeypress="validateNumber()" onkeyup="Hsb_Changed(\'txtHSB_Saturation\')"/>');
objSB.Append('<input type="text" class="cpinput" id="txtHSB_Brightness" style="display:none;" onkeypress="validateNumber()" onkeyup="Hsb_Changed(\'txtHSB_Brightness\')"/>');
objSB.Append('<input type="text" class="cpinput" id="txtRGB_Red" onkeypress="validateNumber()" onkeyup="Rgb_Changed()"/>');
objSB.Append('<input type="text" class="cpinput" id="txtRGB_Green" onkeypress="validateNumber()" onkeyup="Rgb_Changed()"/>');
objSB.Append('<input type="text" class="cpinput" id="txtRGB_Blue" onkeypress="validateNumber()" onkeyup="Rgb_Changed()"/>');
objSB.Append('<input type="text" class="cpinput" id="txtLab_Luminancy" style="display:none;" readonly/>'); 
objSB.Append('<input type="text" class="cpinput" id="txtLab_A" style="display:none;" readonly/>'); 
objSB.Append('<input type="text" class="cpinput" id="txtLab_B" style="display:none;" readonly/>');
objSB.Append('<input type="text" class="cpinput" id="txtCMYK_Cyan" style="display:none;" readonly/>');
objSB.Append('<input type="text" class="cpinput" id="txtCMYK_Magenta" style="display:none;" readonly/>');
objSB.Append('<input type="text" class="cpinput" id="txtCMYK_Yellow" style="display:none;" readonly/>');
objSB.Append('<input type="text" class="cpinput" id="txtCMYK_Black" style="display:none;" readonly/>');
objSB.Append('<input type="text" class="cpinput" id="txtHex" maxlength="6" onkeyup="Hex_Changed()" onkeypress=" validateHex()"/>');
objSB.Append('<button id="btnWebSafeColor" class="cpbutton" type="button" title="Warning: not a web safe color" onclick="btnWebSafeColor_Click()"></button>');
objSB.Append('<button id="btnOK" class="cpbutton" type="button" onclick="btnOK_Click()">OK</button>'); 
objSB.Append('<button id="btnCancel" class="cpbutton" type="button" onclick="btnCancel_Click()">Cancel</button>');
objSB.Append('</form>');
objSB.Append('</div>');

// assign event handlers
if (window.addEventListener)
{
	window.addEventListener("load", window_load, false)
	window.addEventListener("click", fctClose, false)
	ie = false;
}
else if (window.attachEvent)
{
	window.attachEvent("onload",window_load)	
	document.attachEvent("onclick",fctClose)	
	ie = true;
}

function window_load()
{
	var objDiv = document.createElement('div');
	objDiv.id = 'objCP';
	objDiv.style.display = 'none';
	objDiv.className = 'cpdiv';
	objDiv.style.border = '1px solid #000000';
	objDiv.style.backgroundColor = '#FFFFFF';
	var ww = GblWidth + 2;
	var hh = GblHeight + 2;
	objDiv.style.width = ww+'px';
	objDiv.style.height = hh+'px';
	document.body.appendChild(objDiv);
	objDiv.innerHTML = objSB.toString();
	objPalette = objDiv;	
	objForm = document.getElementById('frmColorPicker');
	objDiv.style.top = '0px';
	objDiv.style.left = '0px';
}