var cp_init = false;
var cp_slider;
var cp_binding;

var cp_red = 0;
var cp_blue = 0;
var cp_green = 0;

//Backup values for undo
var cp_redi = 0;
var cp_bluei = 0;
var cp_greeni = 0;

var hexV = new Array( 
"00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0A", "0B", "0C", "0D", "0E", "0F", 
"10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1A", "1B", "1C", "1D", "1E", "1F",
"20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2A", "2B", "2C", "2D", "2E", "2F",
"30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3A", "3B", "3C", "3D", "3E", "3F",
"40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4A", "4B", "4C", "4D", "4E", "4F",
"50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5A", "5B", "5C", "5D", "5E", "5F",
"60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6A", "6B", "6C", "6D", "6E", "6F",
"70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7A", "7B", "7C", "7D", "7E", "7F",
"80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8A", "8B", "8C", "8D", "8E", "8F",
"90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9A", "9B", "9C", "9D", "9E", "9F",
"A0", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "AA", "AB", "AC", "AD", "AE", "AF",
"B0", "B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "BA", "BB", "BC", "BD", "BE", "BF",
"C0", "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "CA", "CB", "CC", "CD", "CE", "CF",
"D0", "D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "DA", "DB", "DC", "DD", "DE", "DF",
"E0", "E1", "E2", "E3", "E4", "E5", "E6", "E7", "E8", "E9", "EA", "EB", "EC", "ED", "EE", "EF",
"F0", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "FA", "FB", "FC", "FD", "FE", "FF" );

function cp_launch(binding)
{
	cp_binding = binding;
	
	if ( cp_binding == 1 )
		cp_readRGB( document.getElementById("bg_color").value );

	else if ( cp_binding == 2 )
		cp_readRGB( document.getElementById("tb_color").value );

	else if ( cp_binding == 3 )
		cp_readRGB( document.getElementById("tb_borderColor").value );

	else if ( cp_binding >= 4 )
	{
		cp_readRGB( document.getElementById("text_color" + ( cp_binding - 3 ) ).value );
	}

	// Backup so we can undo if necessary
	cp_redi = cp_red;
	cp_bluei = cp_blue;
	cp_greeni = cp_green;

	showLoadBox("Launching Color Picker");		

	setTimeout(cp_launchEx, 20);
}

function cp_launchEx()
{
	if ( !cp_init )
	{
		cp_create("r");
		cp_create("g");
		cp_create("b");
	}
	
	//Fill the sliders
	cp_fill("r");
	cp_fill("g");
	cp_fill("b");
	
	//Move the sliders
	document.getElementById("cp_sr").style.left = cp_red;
	document.getElementById("cp_sg").style.left = cp_green;
	document.getElementById("cp_sb").style.left = cp_blue;

	//Fill the text controls
	document.getElementById("cp_rt").value = cp_red;
	document.getElementById("cp_gt").value = cp_green;
	document.getElementById("cp_bt").value = cp_blue;

	document.getElementById("cp_sc").style.backgroundColor = cp_getHexColor();

	hideLoadBox();

	//display the color box
	var x =	document.getElementById("cp")
	x.style.left = getCenterX(600);
	x.style.top = getCenterY(250);
	x.style.display = "block";

	cp_init = true;
}

function cp_fill(which)
{
	for (var i=0; i<256; i++)
	{
		if ( which == "r" )
			value = hexV[i] + hexV[cp_green] + hexV[cp_blue];
		else if ( which == "g" )
			value = hexV[cp_red] + hexV[i] + hexV[cp_blue];
		else if ( which == "b" )
			value = hexV[cp_red] + hexV[cp_green] + hexV[i];

		document.getElementById("cp_" + which + i).style.backgroundColor = value;
	}
}

function cp_readRGB(hex)
{
	cp_red = 0;
	cp_green = 0;
	cp_blue = 0;
	if ( hex.length != 6 )
		return;

	var r = parseInt(hex.substring(0,2),16);
	var g = parseInt(hex.substring(2,4),16);
	var b = parseInt(hex.substring(4,6),16);

	if ( isNaN(r) || isNaN(g) || isNaN(b) )
		return;

	if ( r > 255 || r < 0 || g > 255 || g < 0 || b > 255 || b < 0 )
		return;

	cp_red = r;
	cp_green = g;
	cp_blue = b;
}


function cp_create(which)
{
	var x = new Array();
	x.push("<table cellpadding=0 cellspacing=0><tr>");
	for (var i=0; i<256; i++)
		x.push("<td><div class='cp' id='cp_" + which + i + "'></div>");

	document.getElementById("cp_" + which).innerHTML = x.join('');
}

function cp_getLegalValue(x)
{
	x = parseInt(x);
	if ( isNaN(x) )
		return 0;	
	if ( x > 255 )
		return 255;
	if ( x < 0 )
		return 0;
	return x;
}

function cp_getHexColor()
{
	return hexV[cp_red] + hexV[cp_green] + hexV[cp_blue];
}

function cp_showChanges()
{
	c = cp_getHexColor();
	document.getElementById("cp_sc").style.backgroundColor = c;
	//do it this way so a different function can call cp_showChangesEx() without affecting the color picker
	cp_showChangesEx(c, cp_binding);
}

function cp_showChangesEx(c,binding)
{
	if ( binding == 1 )
	{
		document.getElementById("bg_colorPreview").style.backgroundColor = c;
		document.getElementById("bg_color").value = c;
		preview();
	}
	else if ( binding == 2 )
	{
		document.getElementById("tb_colorPreview").style.backgroundColor = c;
		document.getElementById("tb_color").value = c;
		preview();
	}
	else if ( binding == 3 )
	{
		document.getElementById("tb_borderPreview").style.backgroundColor = c;
		document.getElementById("tb_borderColor").value = c;
		preview();
	}
	else if ( binding >= 4 )
	{
		var v = binding - 3;
		document.getElementById("text_colorPreview" + v).style.backgroundColor = c;
		document.getElementById("text_color" + v).value = c;
		changeTextStyle(v);
	}
}


/** Drag Events **/

function cp_setDrag(event, which) 
{
	cp_slider = new Object();
	if ( isIE() )
	{
		cp_slider.target = window.event.srcElement;
		cp_slider.x = window.event.clientX;
	}
	else
	{
		cp_slider.target = event.target;
		cp_slider.x = event.clientX;
	}

	cp_slider.initPos = parseInt(cp_slider.target.style.left);
	cp_slider.which = which;

	if ( isIE() )
	{
		document.attachEvent("onmousemove", cp_drag);
		document.attachEvent("onmouseup", cp_stopDrag);
	    window.event.cancelBubble = true;
	    window.event.returnValue = false;
	}
	else
	{
		document.addEventListener("mousemove", cp_drag, true);
		document.addEventListener("mouseup", cp_stopDrag, true);
		event.preventDefault();
	}
}

function cp_drag(event)
{
	var x;
	if ( isIE() )
		x = cp_slider.initPos + window.event.clientX - cp_slider.x;
	else
		x = cp_slider.initPos + event.clientX - cp_slider.x;


	x = cp_getLegalValue(x);

	cp_slider.target.style.left = x + "px";
	
	if ( isIE() )
	{
	    window.event.cancelBubble = true;
	    window.event.returnValue = false;
	}
	else
		event.preventDefault();
}

function cp_stopDrag(event) 
{
	if ( isIE() )
	{
		document.detachEvent("onmousemove", cp_drag);
		document.detachEvent("onmouseup", cp_stopDrag);
	}
	else
	{
		document.removeEventListener("mousemove", cp_drag, true);
		document.removeEventListener("mouseup", cp_stopDrag, true);
	}
	cp_dragCommit(cp_slider.which, parseInt(cp_slider.target.style.left) );
}

/**** End Drag Events ***/

/* When the drag ends */
function cp_dragCommit(which, val)
{
	// update the text field corresponding to the slider
	document.getElementById("cp_" + which + "t").value = val;

	cp_updateUnderlyingValue(which, val);
	cp_refillSliders(which);

	cp_showChanges();
}

// user types in the text field for r,g,or b

function cp_changeText(which)
{
	var val = cp_getLegalValue( document.getElementById("cp_" + which + "t").value );

	// reset text field to legal value
	document.getElementById("cp_" + which + "t").value = val;
	
	cp_updateUnderlyingValue(which, val);
	
	cp_refillSliders(which);

	// update slider position
	document.getElementById("cp_s" + which).style.left = val; 

	cp_showChanges();
}

function cp_updateUnderlyingValue(which, val)
{
	if ( which == "r" )
	{
		cp_red = val;
	}
	else if ( which == "g" )
	{
		cp_green = val;
	}
	else if ( which == "b" )
	{
		cp_blue = val;
	}
}

// refill sliders when the value of which has changed
function cp_refillSliders(which)
{
	if ( which == "r" )
	{
		cp_fill("g");
		cp_fill("b");
	}
	else if ( which == "g" )
	{
		cp_fill("r");
		cp_fill("b");
	}
	else if ( which == "b" )
	{
		cp_fill("r");
		cp_fill("g");
	}

}

function cp_cancel()
{
	cp_red = cp_redi;
	cp_blue = cp_bluei;
	cp_green = cp_greeni;

	cp_showChanges();

	document.getElementById("cp").style.display = "none";
}


function cp_commit()
{
	document.getElementById("cp").style.display = "none";
}