SLIDER_HALF_WIDTH = 11;

DEFAULT_DARK_COLOR = "D18B47";
DEFAULT_LIGHT_COLOR = "FFCE9E";
DEFAULT_FONT_COLOR = "000000";
DEFAULT_BG_COLOR = "E1E1E1";

CURRENT_DARK_COLOR = "D18B47";
CURRENT_LIGHT_COLOR = "FFCE9E";
CURRENT_FONT_COLOR = "000000";
CURRENT_BG_COLOR = "E1E1E1";

/*
	This function is called when the user types an HTML color code into the input field
*/
/*
function processTextInput()
{
	htmlColorCode = document.getElementById("htmlColorInput").value;
	setColor(htmlColorCode, getCheckedValue("colorRadio"));
}
*/

/*
	This function is called when a the color sliders need to be
	PROGRAMMATICALLY set to a given HTML color for the specified component.

	l = light square
	d = dark square
	f = font
	b = background

*/
function setColor(htmlColorCode, component)
{
	if(validColorCode(htmlColorCode))
	{
		rHex = htmlColorCode.substring(0,2);
		gHex = htmlColorCode.substring(2,4);
		bHex = htmlColorCode.substring(4);

		rDec = h2d(rHex);
		gDec = h2d(gHex);
		bDec = h2d(bHex);
	   
		hsvArr = rgb_to_hsl(rDec, gDec, bDec);

		hue		= Math.round(hsvArr[0]*360);
		sat		= Math.round(hsvArr[1]*100);
		light	= Math.round(hsvArr[2]*100);

		setHue(hue);
		setSat(sat);
		setLight(light);
		selectColor(component);

	}
}

function validColorCode(val)
{
	//TODO: create code to validate whether the color is valid
	return true;
}


/*
	This method is called when the user drags one of the sliders and the color changes
*/
function selectColor(component)
{
	hue = getHue();
	sat = getSat();
	light = getLight();

	rgbArr = hsl_to_rgb(hue/360, sat/100, light/100);
	
	htmlCode = d2h(rgbArr[0]) + d2h(rgbArr[1]) + d2h(rgbArr[2]);

	//document.getElementById("htmlColorInput").value = htmlCode;
	if(component == "l")
	{
		CURRENT_LIGHT_COLOR = htmlCode;
		colorSquares();
	}
	else if(component == "d")
	{
		CURRENT_DARK_COLOR = htmlCode;
		colorSquares();
	}
	else if(component == "f")
	{
		CURRENT_FONT_COLOR = htmlCode;
		colorFontBG();
	}
	else if(component == "b")
	{
		CURRENT_BG_COLOR = htmlCode;
		colorFontBG();
	}
}


function colorRadioChange()
{
	radioVal = getCheckedValue("colorRadio");

	color = "";

	if(radioVal == "l")
		color = CURRENT_LIGHT_COLOR;
	else if(radioVal == "d")
		color = CURRENT_DARK_COLOR;
	else if(radioVal == "f")
		color = CURRENT_FONT_COLOR;
	else if(radioVal == "b")
		color = CURRENT_BG_COLOR;

	setColor(color, radioVal);
}


///////////////////////////////////////////
// Color the squares on the chessboard. ///
///////////////////////////////////////////
function colorSquares()
{

	document.getElementById("lightSquareImage").style.background = "#" + CURRENT_LIGHT_COLOR;
	document.getElementById("darkSquareImage").style.background = "#" + CURRENT_DARK_COLOR;
	
	for(i = 0; i < 8; i++)
		for(j = 0; j < 8; j++)
		{
			id = "s" + i + "" + j;
			if( (i%2 == 0 && j%2 == 0) ||
				(i%2 != 0 && j%2 != 0))
			{
				color = CURRENT_LIGHT_COLOR;	
			}
			else
			{
				color = CURRENT_DARK_COLOR;
			}

				document.getElementById(id).style.backgroundColor = color;
		
		}
}

////////////////////////////////////////////
// Color the font and background example ///
////////////////////////////////////////////
function colorFontBG()
{
	fArea = document.getElementById("fontBGArea");
	fArea.style.backgroundColor = CURRENT_BG_COLOR;
	fArea.style.color = CURRENT_FONT_COLOR;
	document.getElementById("fontSquareImage").style.background = "#" + CURRENT_FONT_COLOR;
	document.getElementById("backgroundSquareImage").style.background = "#" + CURRENT_BG_COLOR;
}


/*
	////////////////////////////////////////////////////
	////////////////////////////////////////////////////
	///////////// GET & SET for Hue/Sat/Light //////////
	////////////////////////////////////////////////////
	////////////////////////////////////////////////////
*/

function getHue()
{

	var sliderObj = dd.elements["target"];
	var rail = sliderObj.getEltBelow();

	sliderX = sliderObj.x;
	railX = rail.x;
	hue = (sliderX - railX) + Math.floor(sliderObj.w/2); 

	return hue;
}

function getSat()
{
	var sliderObj = dd.elements["satSlider"];
	var rail = sliderObj.getEltBelow();

	sliderX = sliderObj.x + SLIDER_HALF_WIDTH;
	railX = rail.x;

	sat = Math.floor((sliderX - railX)/3); 

	return sat;
}

function getLight()
{

	var sliderObj = dd.elements["lightSlider"];
	var rail = sliderObj.getEltBelow();

	sliderX = sliderObj.x + SLIDER_HALF_WIDTH;
	railX = rail.x;

	light = Math.floor((sliderX - railX)/3); 

	return light;
}

function setHue(val)
{
	// val in [0,360]
	hue = val;
	var sliderObj = dd.elements["target"];
	var rail = sliderObj.getEltBelow();

	railX = rail.x;

	sliderX = railX + hue - Math.floor(sliderObj.w/2);
	
	//sliderObj.x = sliderX;
	sliderObj.moveTo(sliderX, sliderObj.y);
}

function setSat(val)
{
	// val in [0,100]
	sat = val;
	var sliderObj = dd.elements["satSlider"];
	var rail = sliderObj.getEltBelow();

	railX = rail.x;

	sliderX = railX + (sat*3) - Math.floor(sliderObj.w/2);
	
	//sliderObj.x = sliderX;
	sliderObj.moveTo(sliderX, sliderObj.y);
}

function setLight(val)
{
	// val in [0,100]
	light = val;
	var sliderObj = dd.elements["lightSlider"];
	var rail = sliderObj.getEltBelow();

	railX = rail.x;

	sliderX = railX + (light*3) - Math.floor(sliderObj.w/2);
	
	//sliderObj.x = sliderX;
	sliderObj.moveTo(sliderX, sliderObj.y);
}


function colorInit()
{
	// Restore defaults
	setColor(DEFAULT_DARK_COLOR, "d");
	setColor(DEFAULT_FONT_COLOR, "f");
	setColor(DEFAULT_BG_COLOR, "b");
	setColor(DEFAULT_LIGHT_COLOR, "l");
	document.getElementById("lightRadio").checked=true;
}

function colorStylePieceInit()
{
	//fen = readMultiValueCookie(COOKIE_NAME, "fen");
	/*
	writeMultiValueCookie(COOKIE_NAME, "fen", getFEN(), expDate);
	writeMultiValueCookie(COOKIE_NAME, "style", currentStyle, expDate);
	writeMultiValueCookie(COOKIE_NAME, "dcolor", CURRENT_DARK_COLOR, expDate);
	writeMultiValueCookie(COOKIE_NAME, "lcolor", CURRENT_LIGHT_COLOR, expDate);
	writeMultiValueCookie(COOKIE_NAME, "fcolor", CURRENT_FONT_COLOR, expDate);
	writeMultiValueCookie(COOKIE_NAME, "bcolor", CURRENT_BG_COLOR, expDate);
	*/

	/////////////////////////
	////// COLOR ////////////
	/////////////////////////
	CURRENT_LIGHT_COLOR = readMultiValueCookie(COOKIE_NAME, "lcolor");
	if(CURRENT_LIGHT_COLOR == null || CURRENT_LIGHT_COLOR == "")
		CURRENT_LIGHT_COLOR = DEFAULT_LIGHT_COLOR;

	CURRENT_DARK_COLOR = readMultiValueCookie(COOKIE_NAME, "dcolor");
	if(CURRENT_DARK_COLOR == null || CURRENT_DARK_COLOR == "")
		CURRENT_DARK_COLOR = DEFAULT_DARK_COLOR;

	CURRENT_FONT_COLOR = readMultiValueCookie(COOKIE_NAME, "fcolor");
	if(CURRENT_FONT_COLOR == null || CURRENT_FONT_COLOR == "")
		CURRENT_FONT_COLOR = DEFAULT_FONT_COLOR;

	CURRENT_BG_COLOR = readMultiValueCookie(COOKIE_NAME, "bcolor");
	if(CURRENT_BG_COLOR == null || CURRENT_BG_COLOR == "")
		CURRENT_BG_COLOR = DEFAULT_BG_COLOR;

	setColor(CURRENT_DARK_COLOR, "d");
	setColor(CURRENT_FONT_COLOR, "f");
	setColor(CURRENT_BG_COLOR, "b");
	setColor(CURRENT_LIGHT_COLOR, "l");
	document.getElementById("lightRadio").checked=true;

	/////////////////////////
	//// PIECE STYLE ////////
	/////////////////////////
	newStyle = readMultiValueCookie(COOKIE_NAME, "style");
	document.getElementById(newStyle).checked=true;
	//alert("Piece change. currentStyle = " + currentStyle);
	pieceChange();

	////////////////////////
	//// Pieces ////////////
	////////////////////////
	fen = readMultiValueCookie(COOKIE_NAME, "fen");
	//alert("FEN = " + fen);
	if(fen != null)
	{
		setupFEN(fen);
	}

}

/*
//////////////////////////////////////////////////
///////////// HSL <-> RGB Conversions ////////////
//////////////////////////////////////////////////
*/
var hD="0123456789ABCDEF";

function d2h(d) 
{
	var h = hD.substr(d&15,1);
	while(d>15) 
		{d>>=4;h=hD.substr(d&15,1)+h;}

	if(h.length == 1)
		h = "0" + h;
	return h;
}

function h2d(h) 
{
	return parseInt(h,16);
}


function min_three_args(argOne,argTwo,argThree)
{
	var minValue;
	minValue = Math.min(argOne,argTwo);
	minValue = Math.min(minValue,argThree);
	return minValue;
}

function max_three_args(argOne,argTwo,argThree)
{
	var maxValue;
	maxValue = Math.max(argOne,argTwo);
	maxValue = Math.max(maxValue,argThree);
	return maxValue;
}

function hsl_to_rgb(H,S,L){

	//formula from easyrgb.com converted to JavaScript by me
	var R;
	var G;
	var B;
	var var_1;
	var var_2;
	var returnObject;
	returnObject = new Object;
	if( S == 0 )
	{
		//HSL values = 0 ? 1
		R = L * 255; //RGB results = 0 ? 255
		G = L * 255;
		B = L * 255;
	}
	else
	{

		if( L < (1/2) )
		{
			var_2 = (L * ( 1 + S ));

		}
		else
		{
			var_2 = (( L + S ) - ( S * L ));
		}

		var_1 = ((2 * L) - var_2);
		R = 255 * Hue_2_RGB( var_1, var_2, (H + ( 1 / 3 )) );
		G = 255 * Hue_2_RGB( var_1, var_2, H );
		B = 255 * Hue_2_RGB( var_1, var_2, (H - ( 1 / 3 )) );
	}
	//alert("R=" + R + " G=" + G + " B=" + B);
	returnObject[0] = Math.round(R);
	returnObject[1] = Math.round(G);
	returnObject[2] = Math.round(B);
	return returnObject;

}

function Hue_2_RGB( v1, v2, vH )
{

	//formula from easyrgb.com converted to JavaScript by me
	//Function Hue_2_RGB

	if( vH < 0 )
	{
		vH += 1;
	}

	if( vH > 1 )
	{
		vH -= 1;
	}

	if(( 6 * vH ) < 1 )
	{
		return ( v1 + ( v2 - v1 ) * 6 * vH );
	}

	if(( 2 * vH ) < 1 )
	{
		return v2;
	}

	if(( 3 * vH ) < 2 )
	{
		return ( v1 + ( v2 - v1 ) * ( ( 2 / 3 ) - vH ) * 6 );
	}

	return v1;

}


function rgb_to_hsl(R,G,B)
{
	//formula for conversion from easyrgb.com converted to JavaScript by me
	var var_R;
	var var_G;
	var var_B;
	var H;
	var S;
	var L;
	var del_R;
	var del_G;
	var del_B;

	var returnObject;

	returnObject = new Object;

	var_R = ( R / 255 ); //Where RGB values = 0 ? 255
	var_G = ( G / 255 );
	var_B = ( B / 255 );

	var_Min = min_three_args( var_R, var_G, var_B ); //Min. value of RGB
	var_Max = max_three_args( var_R, var_G, var_B ); //Max. value of RGB
	del_Max = (var_Max - var_Min) //Delta RGB value

	L = (( var_Max + var_Min ) / 2);
	if ( del_Max == 0 ) //This is a gray, no chroma...
	{
	H = 0; //HSL results = 0 ? 1
	S = 0;
	}
	else
	{

	//Chromatic data...

	if( L < (1/2) )
	{
		(S = del_Max / ( var_Max + var_Min ));

	}
	else
	{
		(S = del_Max / ( 2 - var_Max - var_Min ));
	}

	del_R = (((( var_Max - var_R ) / 6 ) + ( del_Max / 2 )) / del_Max);
	del_G = (((( var_Max - var_G ) / 6 ) + ( del_Max / 2 )) / del_Max);
	del_B = (((( var_Max - var_B ) / 6 ) + ( del_Max / 2 )) / del_Max);

	if( var_R == var_Max )
	{
		H = del_B - del_G;
	}
	else if ( var_G == var_Max )
	{
		H = (( 1 / 3 ) + del_R - del_B);
	}
	else if ( var_B == var_Max )
	{
		H = (( 2 / 3 ) + del_G - del_R);
	}

	if( H < 0 )
	{
		H += 1;
	}

	if( H > 1 )
	{
		H -= 1;
	}

	}

	returnObject[0] = H;
	returnObject[1] = S;
	returnObject[2] = L;

	return returnObject;
}