var ColorPicker_HD = "0123456789ABCDEF";
var ColorPicker_xScale = 6;
var ColorPicker_yScale = 3;

function ColorPicker_Show( e, clientId, outputTextBoxClientId ) {

	ColorPicker_Bind( clientId, outputTextBoxClientId );

	var colorPicker = document.getElementById( clientId );
	colorPicker.style.left = e.offsetLeft + "px";
	colorPicker.style.top = e.offsetTop + "px";
	colorPicker.style.visibility = "visible";
	colorPicker.setAttribute( "outputTextBoxClientId", outputTextBoxClientId );
	
	if( colorPicker.offsetLeft + colorPicker.offsetWidth > document.body.offsetWidth )
		colorPicker.style.left = document.body.offsetWidth - colorPicker.offsetWidth;

	ColorPicker_SetInitialValue( colorPicker );

}



function ColorPicker_Bind( clientId, outputTextBoxClientId ) {

	var spectrum = document.getElementById( clientId + "_spectrum" );
	spectrum.onmousemove = ColorPicker_spectrum_onMove;
	spectrum.onmouseup = ColorPicker_spectrum_onClick;
	spectrum.setAttribute( "clientId", clientId );

	var grayScale = document.getElementById( clientId + "_grayScale" );
	grayScale.onmousemove = ColorPicker_grayScale_onMove;
	grayScale.onmouseup = ColorPicker_grayScale_onClick;
	grayScale.setAttribute( "clientId", clientId );

	var btnOk = document.getElementById( clientId + "_btnOk" );
	btnOk.onclick = ColorPicker_btnOk_onClick;
	btnOk.setAttribute( "clientId", clientId );
	btnOk.setAttribute( "outputTextBoxClientId", outputTextBoxClientId );

	var btnCancel = document.getElementById( clientId + "_btnCancel" );
	btnCancel.onclick = ColorPicker_btnCancel_onClick;
	btnCancel.setAttribute( "clientId", clientId );

}



function ColorPicker_SetInitialValue( colorPicker ) {

	var outputTextBoxClientId = colorPicker.getAttribute( "outputTextBoxClientId" );
	var outputTextBox = document.getElementById( outputTextBoxClientId );
	var color = outputTextBox.value;
	if( color.length < 6 )
		return;
		
	var clientId = colorPicker.id;

	document.getElementById( clientId + "_colorChoice" ).style.backgroundColor = "#" + color;
	document.getElementById( clientId + "_txtColor" ).value = color;

	var redHex = color.substring( 0, 2 );
	var greenHex = color.substring( 2, 4 );
	var blueHex = color.substring( 4, 6 );

	var red = ColorPicker_H2D( redHex );
	var green = ColorPicker_H2D( greenHex );
	var blue = ColorPicker_H2D( blueHex );
}



function ColorPicker_btnOk_onClick( e ) {

	var btnOk = ColorPicker_GetElement( e );
	var color = ColorPicker_GetPickerElement( e, "txtColor" ).value;
	
	var outputTextBoxClientId = btnOk.getAttribute( "outputTextBoxClientId" );
	var outputTextBox = document.getElementById( outputTextBoxClientId );
	
	outputTextBox.value = color;
	outputTextBox.style.backgroundColor = "#" + color;

	document.getElementById( btnOk.getAttribute( "clientId" ) ).style.visibility = "hidden";
	
}



function ColorPicker_btnCancel_onClick( e ) {
	
	var btnCancel = ColorPicker_GetElement( e );
	document.getElementById( btnCancel.getAttribute( "clientId" ) ).style.visibility = "hidden";
	
}



function ColorPicker_spectrum_onClick( e ) {

	var xy = ColorPicker_GetCoordinates( e );
	var strColor = ColorPicker_getColor( xy );

	ColorPicker_GetPickerElement( e, "colorChoice" ).style.backgroundColor = "#" + strColor;
	ColorPicker_GetPickerElement( e, "txtColor" ).value = strColor;

}
function ColorPicker_spectrum_onMove( e ) {

	var xy = ColorPicker_GetCoordinates( e );
	var strColor = ColorPicker_getColor( xy );

	ColorPicker_GetPickerElement( e, "colorView" ).style.backgroundColor = "#" + strColor;

}



function ColorPicker_grayScale_onClick( e ) {

	var xy = ColorPicker_GetCoordinates( e );
	var strColor = ColorPicker_getColorGS( xy );

	ColorPicker_GetPickerElement( e, "colorChoice" ).style.backgroundColor = "#" + strColor;
	ColorPicker_GetPickerElement( e, "txtColor" ).value = strColor;

}
function ColorPicker_grayScale_onMove( e ) {

	var xy = ColorPicker_GetCoordinates( e );
	var strColor = ColorPicker_getColorGS( xy );
	ColorPicker_GetPickerElement( e, "colorView" ).style.backgroundColor = "#" + strColor;

}



function ColorPicker_getColorGS( xy ) {
	
	var yPos = xy.y * ColorPicker_yScale;

	// Force the bottom row to be "max".
	yPos = yPos == 252 ? 0 : ( 255 - yPos );

	var value = ColorPicker_D2H( yPos );
	
	return value + "" + value + "" + value;

}



function ColorPicker_getColor( xy ) {

	var red = 0;
	var blue = 0;
	var green = 0;
	
	xPos = xy.x * ColorPicker_xScale;
	yPos = xy.y * ColorPicker_xScale;
	
	// Get the hue based on the x position.
	
	// Get Red Value
	if( xPos < 256 || xPos >= 1280 ) {
		red = 255;
	} else if( xPos >= 256 && xPos < 512 ) {
		red = 256 + ( 256 - xPos );
	} else if( xPos >= 1024 ) {
		red = xPos - 1024;
	}
	
	//Get Green Value
	if( xPos < 256 ) {
		green = xPos;
	} else if( xPos >= 256 && xPos < 768 ) {
		green = 255;
	} else if( xPos >= 768 && xPos < 1024 ) {
		green = 256 + ( 768 - xPos );
	}
	
	//Get Blue Value
	if( xPos >= 768 && xPos < 1280 ) {
		blue = 255;
	} else if( xPos >= 512 && xPos < 768 ) {
		blue = xPos - 512;
	} else if( xPos >= 1280 ) {
		blue = 256 + ( 1280 - xPos );
	}
	
	// Darken or lighten the correct percentage based on the y position.
	if( yPos > 255 ) {

		var darkenPct = ( yPos - 256 ) / 256;

		red = parseInt( red - ( red * darkenPct ) );
		green = parseInt( green - ( green * darkenPct ) );
		blue = parseInt( blue - ( blue * darkenPct ) );
	
	} else {

		yPos = 256 - yPos;
		var lightenPct = yPos / 256;
		
		red = parseInt( red + ( ( 256 - red ) * lightenPct ) );
		green = parseInt( green + ( ( 256 - green ) * lightenPct ) );
		blue = parseInt( blue + ( ( 256 - blue ) * lightenPct ) );

	}
	
	
	// Make sure the value is between 0-255
	red = Math.max( Math.min( red, 255 ), 0 );
	green = Math.max( Math.min( green, 255 ), 0 );
	blue = Math.max( Math.min( blue, 255 ), 0 );

	//return the RGB Hex string
	return ColorPicker_D2H( red ) + "" + ColorPicker_D2H( green ) + "" + ColorPicker_D2H( blue );

}



function ColorPicker_D2H( d ) {
	var h = ColorPicker_HD.substr( d & 15, 1 );
	while( d > 15 ) {
		d >>= 4;
		h = ColorPicker_HD.substr( d & 15, 1 ) + h;
	}
	return h.length == 1 ? "0" + h : h;
}



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



function ColorPicker_GetPickerElement( e, control ) {

	e = e || window.event;
	var target = e.srcElement || e.target;

	var clientId = target.getAttribute( "clientId" );
	var id = clientId + ( control == null ? "" : "_" + control );
	var element = document.getElementById( id );

	return element;

}



function ColorPicker_GetElement( e ) {

	e = e || window.event;
	return e.srcElement || e.target;

}



function ColorPicker_GetCoordinates( e ){ 

	var xy = { x:0, y:0 };
   
	if( window.event && !window.opera && typeof( event.offsetX ) == "number" ) { 

		xy.x = event.offsetX; 
		xy.y = event.offsetY; 
   
	} else if( document.addEventListener && e && typeof( e.pageX ) == "number" ) { 

		var element = e.target; 
		var totalOffsetLeft = 0;
		var totalOffsetTop = 0;

		while( element.offsetParent ) { 
			totalOffsetLeft += element.offsetLeft ; 
			totalOffsetTop += element.offsetTop ; 
			element = element.offsetParent ; 
		} 

		xy.x = e.pageX - totalOffsetLeft ; 
		xy.y = e.pageY - totalOffsetTop ; 
   }

	return xy;

}