var cp;
var ev;


/* general.js functions */
function hideDIV(id)
	{
	obj = document.getElementById(id);

	var args = hideDIV.arguments;
		extra = (args[1]) ? args[1] : false;

	//alert(obj.style.display);

	if(extra)
		{
		obj.style.visibility = "hidden";
		}
		else
			{
			obj.style.display = "none";
			}
	}
function showDIV(id)
	{
	obj = document.getElementById(id);

	var args = showDIV.arguments;
		extra = (args[1]) ? args[1] : false;

	//alert(obj.style.display);

	if(extra)
		{
		obj.style.visibility = "visible";
		}
		else
			{
			obj.style.display = "block";
			}
	}
/* general.js functions */

/*
function addEvent(obj,evType,fn,useCapture){
var ret=false;
if(obj!=null){
if(obj.addEventListener){
obj.addEventListener(evType,fn,useCapture);
ret=true;
}
else if(obj.attachEvent){
obj.attachEvent("on"+evType,fn);ret=true;
}
}
return ret;
}
*/
function getGradientColor(x, y)
	{
	// rgb in rgb out
	x = x<0?0:x>255?255:x;
	y = y<0?0:y>255?255:y;
			

		cp.rgb.Color = hex2rgb(cp.cpVerticalColor);

	r = Math.round((1-(1-(cp.rgb.Color[0]/255))*(x/255))*(255-y));
	g = Math.round((1-(1-(cp.rgb.Color[1]/255))*(x/255))*(255-y));
	b = Math.round((1-(1-(cp.rgb.Color[2]/255))*(x/255))*(255-y));

		cObj = document.getElementById("imageMemory");
		cObj.style.top = "" + cp.store["y"] + "px";
		cObj.style.left = "" + cp.store["x"] + "px";

		
	return [r,g,b];
	}

function getWebSafeColor(color)
	{
	// rgb in rgb out
	var rMod = color[0] % 51;
	var gMod = color[1] % 51;
	var bMod = color[2] % 51;

	//if((rMod==0) && (gMod==0) && (bMod==0)) return false;

	r=(rMod<=25?Math.floor(color[0]/51)*51:Math.ceil(color[0]/51)*51);
	g=(gMod<=25?Math.floor(color[1]/51)*51:Math.ceil(color[1]/51)*51);
	b=(bMod<=25?Math.floor(color[2]/51)*51:Math.ceil(color[2]/51)*51);

	return [r,g,b];
	}
function cpMouseClick(ev)
	{
	ev           = ev || window.event;
	var mousePos = mouseCoordinates(ev);

	var x        = mousePos.x-cp.cpPos.x-1;
	var y        = mousePos.y-cp.cpPos.y-1;

			cp.store["x"] = x + 4;		// used when vertical clicked, will update to this same color
			cp.store["y"] = y + 16;

	rgb = (getGradientColor(x, y));
		hex = rgb2hex(rgb);
	updateColors(hex,true);
	}
function cpMouseDown(ev)
	{
	
	cp.cpMouseDown = true;

		return false;
	}

/*drag doesn't work as expected */

var startDrag = null;
function dragMe(ev)
	{
	if(startDrag == null)
		{
		
		var tempM = mouseCoordinates(ev);
		var tempO = getPosition(cp.div);
		var offsetM = {x:tempM.x - tempO.x, y:tempM.y - tempO.y}
		return false;
		}

	var nowM = mouseCoordinates(ev);

		var myLeft = nowM.x - offsetM.x;
		var myTop = nowM.y - offsetM.y
	cp.div.style.left = "" + myLeft + "px";
		//window.status = myLeft + " : " + myTop;
	cp.div.style.top = "" + myTop + "px";

	return false;
	
	}

function endDrag(ev)
	{
	startDrag=null;
	

	cp.sliderPos = getPosition(document.getElementById("imageSlider"));
	cp.cpPos       = getPosition(document.getElementById("imageOverlay"));
	cp.store["drag"] = getPosition(cp.div);

	return false;
	}


/*drag doesn't work as expected */

function cpMouseUp(ev)
	{
	cp.cpMouseDown = false;
	}

function cpSliderMouseDown(ev)
	{
		
		cp.SliderMouseDown = true;

		return false;
	}

function cpSliderMouseUp(ev)
		{
		cp.SliderMouseDown = false;
		}

function cpSliderClick(ev)
		{
		ev           = ev || window.event;
		var mousePos = mouseCoordinates(ev);

		var y        = mousePos.y-cp.sliderPos.y-4;

		cpSliderSetColor(y);

		rgb = (getGradientColor(cp.store["x"], cp.store["y"]));
			hex = rgb2hex(rgb);
			updateColors(hex,true);
		}
function getVertColor(i, sZ){
		var n=sZ/6, j=sZ/n, C=i, c=C%n;

		r=C<n?255:C<n*2?255-c*j:C<n*4?0:C<n*5?c*j:255;
		g=C<n*2?0:C<n*3?c*j:C<n*5?255:255-c*j;
		b=C<n?c*j:C<n*3?255:C<n*4?255-c*j:0;

		return [r,g,b];
	}
function setVertical(hex)
	{
	// H in hsl is from 360 top to 1 bottom, 

	hsv = rgb2hsv(hex2rgb(hex));
	H = 360-hsv[0];

	y = parseInt(255*H/360);

	y = y<0?0:y>255?255:y;

	document.getElementById("imageArrows").style.top   = (y+18)+'px';

		
	return y;
	// cp.sliderPos           = getPosition(document.getElementById("imageArrows"));
	}
function cpSliderSetColor(y)
	{	
	cp.cpVerticalColor = rgb2hex(getVertColor(y, 256));
	y = y<0?0:y>255?255:y;

	document.getElementById("imageArrows").style.top   = (y+18)+'px';
		updateColors(cp.cpVerticalColor);

	
	}
function isWebSafe()
	{
	return cp.form.checkbox.checked;
	}
function selectWebSafeColor()
	{
	rgb = getWebSafeColor([parseInt(cp.store["RGBr"]),parseInt(cp.store["RGBg"]),parseInt(cp.store["RGBb"])]);

	updateColors(rgb2hex(rgb),true);
	}
function resetColor()
	{
	updateColors(cp.cpBaseColor);
	}
var cpBasePath = "./";
function writeSwatch(which)
	{
	switch(which)
		{
		case "html":
		default:
			var myS = '<TABLE bgcolor="#000000" border=1><TR><TD colspan=4 valign="top"><TABLE width="100%" cellpadding=0 cellspacing=0><TR><TD align="center" width="75%" id="swatch_html_info" style=" width: 65px; height: 30px; font-weight: bold; font-size: 12px; background-color: #000000; color: #ffffff"> (16) HTML </TD><TD width="25%" valign="top"><img ALT="close" src="'+cpBasePath+'images/close.png" id="swatch_html_close" onclick="hideDIV(\'swatch_html\');" style="width:20px; height: 20px; background-color: #0000FF; float: right; text-align: center;" /></TD></TR></TABLE></TD></TR>';

			for (var color in cp.colors["html"])
				{
				column = cp.colors["html"][color].column;

				if(column == 1)
					{
					myS += '<TR>';
					}

					var txtColor = ((color.indexOf('80') != -1) || color == "000000" || color == "0000FF") ? "ffffff" : "000000";

				myS += '<TD valign="top" align="center" style="font-size: 10px; color: '+txtColor+';" bgcolor="'+color+'"><DIV style="height: 20px; width: 20px; border: 1px solid rgb(0, 0, 0); background-color: #'+color+'; padding: 0px; margin: 0px;" onmouseover="this.style.borderColor=\'ffffff\'; var sObj = document.getElementById(\'swatch_html_info\'); sObj.innerHTML=\''+cp.colors["html"][color].name+'\'; sObj.style.backgroundColor=\''+color+'\'; sObj.style.color=\''+txtColor+'\';" onmouseout="this.style.borderColor=\'000000\'; var sObj = document.getElementById(\'swatch_html_info\'); sObj.innerHTML=\' (16) HTML \'; sObj.style.backgroundColor=\'#000000\'; sObj.style.color=\'#ffffff\';" onclick="switchSwatch(\'html\',\''+color+'\');" > &nbsp; </DIV></TD>';


				if(column == 4)
					{
					myS += '</TR>';
					}
				}
			myS += '</TABLE>';

			cp.swatch[which] = document.body.appendChild(document.createElement("div"));
			cp.swatch[which].innerHTML = myS;
			cp.swatch[which].id = "swatch_html";
			cp.swatch[which].style.position = "absolute";

		break;

		case "x11":
			var i;
			var oldClass =	"old";
			var newClass =	"";
			var myS = '<TABLE bgcolor="#000000" border=1><TR><TD colspan=12 valign="top"><TABLE width="100%" cellpadding=0 cellspacing=0 border=1><TR><TD align="center" style="background-color: #000000; color: #ffffff; width: 101px;">(139) x11 &rsaquo;</TD><TD align="center" id="swatch_x11_info" style=" width: 224px; height: 30px; font-weight: bold; font-size: 16px; background-color: #000000; color: #ffffff; text-decoration: underline;"></TD><TD width=22 align="right" valign="top"><img ALT="close" src="'+cpBasePath+'images/close.png" id="swatch_x11_close" onclick="hideDIV(\'swatch_x11\');" style="width:20px; height: 20px; background-color: #0000FF; float: right; text-align: center;" /></TD></TR></TABLE></TD></TR>';

			for (var color in cp.colors["x11"])
				{
				newClass = cp.colors["x11"][color]["class"];

				

				if(oldClass != newClass)
					{
					i =0;
					if(oldClass != "old")
						{
						myS += '</TR></TABLE></TD></TR></TABLE></TD></TR>';
						}


					myS += '<TR><TD><TABLE><TR><TD width=100 style="color: #ffffff; font-weight: bold; font-family: arial, san-serif;" align="right" valign="top">'+newClass+'</TD><TD><TABLE><TR>';
					}
				if(i==12){myS += '</TR><TR>'; i=0;}
					var star = (cp.colors["x11"][color].star != undefined) ? " * " : " &nbsp; ";
						var Lab = xyz2lab(rgb2xyz(hex2rgb(color)));	
							//document.getElementById("debug1").innerHTML += "" + Lab + " | ";
					var txtColor = (Lab[0] > 59.5) ? "000000" : "ffffff";

				myS += '<TD valign="top" align="center" style="font-size: 10px; color: '+txtColor+';" bgcolor="'+color+'"><DIV style="height: 15px; width: 15px; border: 1px solid rgb(0, 0, 0); border-color: #'+color+'; background-color: #'+color+'; padding: 0px; margin: 0px;" onmouseover="this.style.borderColor=\''+txtColor+'\'; var sObj = document.getElementById(\'swatch_x11_info\'); sObj.innerHTML=\''+cp.colors["x11"][color].name+'\'; sObj.style.backgroundColor=\''+color+'\'; sObj.style.color=\''+txtColor+'\';" onmouseout="this.style.borderColor=\''+color+'\';" onclick="switchSwatch(\'x11\',\''+color+'\');" > &nbsp; </DIV></TD>';


				oldClass = newClass;
				i++;
				}
			myS += '</TR></TABLE></TABLE>';

			cp.swatch[which] = document.body.appendChild(document.createElement("div"));
			cp.swatch[which].innerHTML = myS;
			cp.swatch[which].id = "swatch_x11";
			cp.swatch[which].style.position = "absolute";

			//document.getElementById("debug1").innerHTML = myS;

		break;

		case "web":
			var myS = '<TABLE bgcolor="#000000" border=1><TR><TD colspan=12 valign="top"><TABLE width="100%" cellpadding=0 cellspacing=0 border=1><TR><TD width=70 align="center" style="background-color: #000000; color: #ffffff">(216) WEB &rsaquo;</TD><TD align="center" id="swatch_web_info" style=" width: 65px; height: 30px; font-weight: bold; font-size: 16px; background-color: #000000; color: #ffffff; text-decoration: underline;"></TD><TD width=22 align="right" valign="top"><img ALT="close" src="'+cpBasePath+'images/close.png" id="swatch_web_close" onclick="hideDIV(\'swatch_web\');" style="width:20px; height: 20px; background-color: #0000FF; float: right; text-align: center;" /></TD></TR></TABLE></TD></TR>';

			for (var color in cp.colors["web"])
				{
				column = cp.colors["web"][color].column;

				if(column == 1)
					{
					myS += '<TR>';
					}
					var star = (cp.colors["web"][color].star != undefined) ? " * " : " &nbsp; ";
						var Lab = xyz2lab(rgb2xyz(hex2rgb(color)));	
							//document.getElementById("debug1").innerHTML += "" + Lab + " | ";
					var txtColor = (Lab[0] > 59.5) ? "000000" : "ffffff";

				myS += '<TD valign="top" align="center" style="font-size: 10px; color: '+txtColor+';" bgcolor="'+color+'"><DIV style="height: 11px; width: 11px; border: 1px solid rgb(0, 0, 0); border-color: #'+color+'; background-color: #'+color+'; padding: 0px; margin: 0px;" onmouseover="this.style.borderColor=\''+txtColor+'\'; var sObj = document.getElementById(\'swatch_web_info\'); sObj.innerHTML=\''+star+color+star+'\'; sObj.style.backgroundColor=\''+color+'\'; sObj.style.color=\''+txtColor+'\';" onmouseout="this.style.borderColor=\''+color+'\';" onclick="switchSwatch(\'web\',\''+color+'\');" > &nbsp; </DIV></TD>';


				if(column == 12)
					{
					myS += '</TR>';
					}
				}
			myS += '</TABLE>';

			cp.swatch[which] = document.body.appendChild(document.createElement("div"));
			cp.swatch[which].innerHTML = myS;
			cp.swatch[which].id = "swatch_web";
			cp.swatch[which].style.position = "absolute";

		break;
		}

		cp.swatch[which].style.zIndex = 10 + cp.zIndex;
// cp.swatch[which] = document.body.appendChild(document.createElement("div"));
	}
var swatchObj = null;
function showSwatch(evt,which)
	{
	hideOthers();
	if(cp.swatch[which] == null)
		{
		writeSwatch(which);
		}
		dId = "swatch_"+which;

	swObj = document.getElementById(dId);

	switch(which)
		{
		default:
		case "html":
			iD = "swatchBasic";
				x=12;
				y=12;
		break;

		case "x11":
			iD = "swatchX11";
				x=12;
				y=12;
		break;

		case "web":
			iD = "swatchWebSafe";
				x=12;
				y=12;
		break;
		}

	pObj = document.getElementById(iD);
		parentPos = getPosition(pObj);

	myX = parentPos.x + x;
	myY = parentPos.y + y;

	swObj.style.left = "" + myX + "px";
	swObj.style.top = "" + myY + "px";
	

	showDIV(dId);
	}
function switchSwatch(which,color)
	{
	dId = "swatch_"+which;

	y = setVertical(color);
			cpSliderSetColor(y);

	updateColors(color,true);

	// get memory off the chart
		cp.store["y"] = -22;
		cp.store["x"] = 3;

		cObj = document.getElementById("imageMemory");
			cObj.style.top = "" + cp.store["y"] + "px";
			cObj.style.left = "" + cp.store["x"] + "px";


	hideDIV(dId);
	}
function closeSwatch(evt,which)
	{
	return;
	}
function hideOthers()
	{	
	if(cp.swatch["html"] != undefined){hideDIV("swatch_html");}
	if(cp.swatch["web"] != undefined){hideDIV("swatch_web");}
	if(cp.swatch["x11"] != undefined){hideDIV("swatch_x11");}
	}
function hideStuff()
	{
	hideOthers();
	hideDIV('_cp');	
	}
function updateRGB()
	{
	r = parseInt(cp.form.RGBr.value);
	g = parseInt(cp.form.RGBg.value);
	b = parseInt(cp.form.RGBb.value);

	if(r == ""){r=0;}
	if(r>255){r=255;}

	if(g == ""){g=0;}
	if(g>255){g=255;}

	if(b == ""){b=0;}
	if(b>255){b=255;}
	

	hex = rgb2hex([r,g,b]);

	updateColors(hex,true);
	}
colorPicker = function () 
	{
	// member variables
	/* COLORS */
	this.colors = {"x11":_cp_x11,"web": _cp_web,"html":_cp_html};

	this.formName = "colorPickerFormName";

	this.cpMouseDown = false;
	this.SliderMouseDown = false;
	this.sliderPos= {"x":this.x,"y":this.y},

	this.rgb = {};
	this.form = {};

	this.top = 27;		// default offset from object to show div
	this.left = 33;

	this.zIndex = 29;
	this.zChanged = false;

	this.x = 0;
	this.y = 0;

	this.swatch= {"x11":null,"web": null,"html":null};


	this.cpPos = {"x":this.x,"y":this.y},

	this.cpBaseColor = "000000";  /* base color never changes after open */
	this.cpVerticleColor = "0000ff";	/* changes when scrollbar changes */
	this.cpColor = "ff0000";
	this.callback = "cpCallback";  /* function that receives color [currently in HEX] form */

	this.store = {"hex":"","RGBr":"","RGBg":"","RGBb":"","CMYKc":"","CMYKm":"","CMYKy":"","CMYKk":""   ,"HSVh":"","HSVs":"","HSVv":"","LabL":"","Laba":"","Labb":"", "x":255,"y":18,"safe":""};

	this.store["drag"] = {};
	};



var hex_continue;
var specialKey;
var previousKey = null;
function validateHex(evt)
	{
	hex_continue=false;
		
	evt = (evt) ? evt : event;
		var keyCode = (evt.charCode) ? evt.charCode :((evt.which) ? evt.which : evt.keyCode);	
		
	var myChar = String.fromCharCode(keyCode);
	specialKey = false;
			
		var allowedChars = new Array(8, 17, 37, 38, 39, 40, 46);	//Backspace, delete and arrow keys
		for(var x=0; x<allowedChars.length; x++) if(allowedChars[x] == keyCode){specialKey = true;}

			if(previousKey == "ctrl" && "v" == myChar.toLowerCase())
				{
				hex_continue = true;
				return true;
				}
	

			// override Cntrl - V (paste)
			if(keyCode == 17){previousKey = "ctrl";}else{previousKey = null;}

			
	var aS = "0123456789ABCDEFabcdef";   
	// allow given characters
    if (aS.indexOf(myChar) == -1) 
		{
		
		if(specialKey == true) {hex_continue = true;}else{hex_continue = false;}
		} 
		else 
			{
			hex_continue = true;
			}	
	
	return hex_continue;
	}
function selectedText()
	{
	var txt = '';
     if (window.getSelection)	{txt = window.getSelection();}
		else if (document.getSelection) { txt = document.getSelection(); }
			else if (document.selection) { txt = document.selection.createRange().text; }
				else return;
	return txt;
	}

function updateHex(evt,str)
	{
	len = str.length;
	if(len < 7)
		{
		cp.store["hex"] = "";
		var nI;

		for(var x=0;x<6;x++)
			{
			nI = str.substr(x,1);
			cp.store["hex"] += "" + ((nI == "") ? "0" : nI);
			}
		cp.store["hex"] = cp.store["hex"].toUpperCase();

		updateColors(cp.store["hex"]);
		}
	

	if(len > 6){cp.form.hex.value = cp.store["hex"];}
	}
	/*
	cp.cpColor      = color;
		cp.curColorDiv.style.backgroundColor = '#'+hex(color.r)+hex(color.g)+hex(color.b);
		*/
function updateColors(color)
	{

	color = color.toUpperCase();		// just to be certain
		cp.store["safe"] = rgb2hex(getWebSafeColor(hex2rgb(color)));

	// do websafe logic and reupdate if necessary
	if(isWebSafe()==true)
		{
		color = cp.store["safe"];		
		}



	cp.cpColor = cp.store["hex"] = color;
	// added parameter to update textfield
	if((updateColors.arguments[1])){cp.form.hex.value = cp.cpColor;}
			

	
	
		
	// FORM
		rgb = hex2rgb(color);
			cp.store["RGBr"] = cp.form.RGBr.value=rgb[0];
			cp.store["RGBg"] = cp.form.RGBg.value=rgb[1];
			cp.store["RGBb"] = cp.form.RGBb.value=rgb[2];
		cmyk = rgb2cmyk(rgb);
			cp.store["CMYKc"] = cp.form.CMYKc.value=(100*cmyk[0]).toFixed(0);
			cp.store["CMYKm"] = cp.form.CMYKm.value=(100*cmyk[1]).toFixed(0);
			cp.store["CMYKy"] = cp.form.CMYKy.value=(100*cmyk[2]).toFixed(0);
			cp.store["CMYKk"] = cp.form.CMYKk.value=(100*cmyk[3]).toFixed(0);
		hsv = rgb2hsv(rgb);
			cp.store["HSVh"] = cp.form.HSVh.value=(hsv[0]).toFixed(0);
			cp.store["HSVs"] = cp.form.HSVs.value=(100*hsv[1]).toFixed(0);
			cp.store["HSVv"] = cp.form.HSVv.value=(100*hsv[2]).toFixed(0);
		lab  = xyz2lab(rgb2xyz(rgb));
			cp.store["LabL"] = cp.form.LabL.value=(lab[0]).toFixed(0);
			cp.store["Laba"] = cp.form.Laba.value=(10000*lab[1]).toFixed(0);
			cp.store["Labb"] = cp.form.Labb.value=(10000*lab[2]).toFixed(0);


	// IMAGES	

		document.getElementById("imageCurrentColorBackgroundBottom").style.backgroundColor= "#" + cp.cpBaseColor;
		document.getElementById("imageCurrentColorBackgroundTop").style.backgroundColor= "#" + cp.cpColor;
		document.getElementById("imageBackground").style.backgroundColor= "#" + cp.cpVerticalColor;
			y = setVertical(color);

	// iswebsafe
		document.getElementById("imageWebSafe").style.display = (cp.colors.web[color] == undefined) ? "block" : "none";

	// text

	}

function showColorPicker()
	{
	cp.form = eval("document."+cp.formName);

	cp.form.hex.value = cp.cpColor;


	cp.div.style.top = "" + parseInt(cp.y) + "px";
	cp.div.style.left = ""+ parseInt(cp.x) + "px";

	hideOthers();
	showDIV("_cp");

	cp.sliderPos	= getPosition(document.getElementById("imageSlider"));
	cp.cpPos		= getPosition(document.getElementById("imageOverlay"));

	
	

	updateColors(cp.cpColor);
	}
function returnColor()
	{
	//cp.obj.value = cp.cpColor;

	eval(cp.callback + "('"+cp.cpColor+"');");



	hideDIV("_cp");
	}
function updateZ(z)
	{
	// update form z elements... if they have the z-index attribute, grab the value and increment by z
	
		var myList = listNodes(cp.div);

		

		for(var i=0; i<myList.length; i++)
			{
			var _id = null;
			var tObj = myList[i];
			if(tObj.style != undefined)
				{
				if(tObj.style.zIndex != undefined)
					{			
					var oldIndex = 1+ tObj.style.zIndex;
					_id = tObj.getAttribute("id");
	
					document.getElementById("showJSON").innerHTML += "" + '<BR />' + "id: " + _id + " z: " + tObj.style.zIndex ;
					
					}
					else
						{
						var oldIndex = 0;
						_id = tObj.getAttribute("id");
						//tObj.style.zIndex = z;
						}
				}
			if(_id != null)
				{
				// firefox
				if(_id != "")
					{
					// IE
					var newIndex = parseInt(parseInt(z) + parseInt(oldIndex));
					document.getElementById(_id).style.zIndex = newIndex;
							document.getElementById("showJSON").innerHTML += "" + '<BR />' + "id: " + _id + " z: " + newIndex ;
					}
				}
			}
	cp.zChanged = false;
	}
function _pickMe(params)
	{
	// obj which will received the updated value (form.value or obj.innerHTML)
	cp.params = params;

	// var pickParams =	{"obj":document.pickMe.myColor, "trigger":document.getElementById("eyeDropper"), "initialColor":document.pickMe.myColor.value, "callback": cpCallback};
		cp.obj = (params.obj != undefined) ? params.obj : null;
		cp.trigger = (params.trigger != undefined) ? params.trigger : params.obj;
		cp.cpColor = (params.initialColor != undefined) ? (params.initialColor.toUpperCase()) : cp.cpColor;
				cp.cpBaseColor = cp.cpVerticalColor = cp.cpColor;
		cp.callback = (params.callback != undefined) ? params.callback : cp.callback;

		if(params.zIndex != undefined)
			{
			oldZ = cp.zIndex;			
				cp.zIndex	= params.zIndex;
			if(cp.zIndex != oldZ){cp.zChanged = true;}
			}
			else
				{
				cp.zIndex	= cp.zIndex; 
				}
		if(cp.zChanged == true)
			{
			updateZ(cp.zIndex);
			}
		
				


		/* if you hack the form element of this class */
		cp.formName = (_pickMe.arguments[4]) ? (_pickMe.arguments[4]) : cp.formName;
		temp = (getPosition(cp.trigger));
			cp.x = cp.left + temp.x;
			cp.y = cp.top + temp.y;

		/* x and y of popup */
		cp.x = (_pickMe.arguments[5]) ? (_pickMe.arguments[5]) : cp.x;
		cp.y = (_pickMe.arguments[6]) ? (_pickMe.arguments[6]) : cp.y;

		/* from memory */
		cp.x = (cp.store["drag"].x != undefined) ? (cp.store["drag"].x) : cp.x;
		cp.y = (cp.store["drag"].y != undefined) ? (cp.store["drag"].y) : cp.y;





		/* x,y parameter can overrid */  /*could also do offset here */
		if(params.placeMe != undefined)
			{
			cp.x = params.placeMe.x;
			cp.y = params.placeMe.y;
			}

	showColorPicker();
	}

function mouseCoordinates(ev){
		ev = ev || window.event;
		if(ev.pageX || ev.pageY)
			return {x:ev.pageX, y:ev.pageY};
		return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
				  y:ev.clientY + document.body.scrollTop  - document.body.clientTop};
	}
function getPosition(obj){
		var left = 0;
		var top  = 0;
		
		
		while (obj.offsetParent){
			left += obj.offsetLeft;
			top  += obj.offsetTop;
			obj   = obj.offsetParent;
		}
		left += obj.offsetLeft;
		top  += obj.offsetTop;
			

		return {x:left, y:top};
	}

function createColorPicker()
	{
	if(cp.div == undefined)
		{

		cp.div = document.body.appendChild(document.createElement("div"));
		cp.div.id = "_cp";
			var tForm = _cpForm;
					//document.getElementById("showJSON").innerHTML = tForm;
				tForm = tForm.split('src="').join('src="' + cpBasePath);
					//document.getElementById("showTIME").innerHTML = tForm;
		cp.div.innerHTML = tForm;
					
			
					
				//document.getElementById("debug").innerHTML = cp.div.innerHTML;
		cp.div.style.position= "absolute";
		cp.div.style.top= "0px";
		cp.div.style.left= "0px";
		cp.div.style.display= "none";

		cp.div.style.height= "340px";
		cp.div.style.border= "5px outset #999999";



		

		
		


		/* Let's add lot's of events for various divs */

		}
		else
			{
			return;	// already built
			}	
	}