<!--
// Begin Script "editcolor.js"

/*
	Color Picker for Windows Desktop By James Melatis
	webmaster@indigotide.com
	Features:
	HSL to RGB conversions
	RGB to HSL conversions
	Persistant User Data! Custom Colors
	DHTML!!! Color Bar Controls  DHTML!!!
*/
	var RED = 0;			// global RED value ( 0.0 to 1.0 )
	var GREEN = 0;			// global GREEN value ( 0.0 to 1.0 )
	var BLUE = 0;			// global BLUE value ( 0.0 to 1.0 )
	var MINIMUM = 0;			// global MINIMUM value of RGB
	var MAXIMUM = 0;			// global MAXIMUM value of RGB
	var deltaMAXIMUM = 0;		// global delta RGB value ( 0 = Grey Scale, no Hue or Saturation )
	var HUE = 0;			// global HUE value ( 0.0 to 1.0 )
	var SATURATION = 0;		// global SATURATION value ( 0.0 to 1.0 )
	var LUMINOSITY = 0;		// global LUMINOSITY value ( 0.0 to 1.0 )
	var reg_R = 0;			// global Red value ( 0 to 255 )
	var reg_G = 0;			// global Green value ( 0 to 255 )
	var reg_B = 0;			// global Blue value ( 0 to 255 )
	var reg_H = 0;			// global Hue value ( 0 to 255 )
	var reg_S = 0;			// global Saturation value ( 0 to 255 )
	var reg_L = 0;			// global Luminosity value ( 0 to 255 )

function loadUserSetting()
{
	var Data = picker.hex;		// (onload=) point to userData field

	Data.load("ColorPickerData");		// XML load saved userData from user's computer if available
                                                            
	picker.hex.value = Data.getAttribute("SavedHexColors");	// load saved color values into form input field
  
	if (picker.hex.value == "null")
	{
	picker.hex.value = "#000000#000000#000000#000000#000000#000000#000000#000000#000000#000000#000000#000000#000000";
	}
	
	var SavedColors = picker.hex.value;	// store 13 colors data

	var hex = picker.hex.value;		// initial color value (hex$)
	hex = hex.substr(1);			// NaN so remove the first"#" so we can parseInt

	var decimal = parseInt( hex,16 );	// convert first hex$ to decimal integer

	setRGB(decimal);			// parse decimal and set RGB registers
	
	document.getElementById( "preview" ).readOnly = true;		// no typing in fields
	document.getElementById( "hex" ).readOnly = true;
	document.getElementById( "selection" ).readOnly = true;

	var index = 0;
	for(index=1;index<=12;index++)
	{
	document.getElementById("hex(" + index + ")").readOnly = true;		// no typing in custom color fields
	document.getElementById("memory(" + index + ")").readOnly = true;
	} 

	showSelectedColor();		// set global RGB values and display previous selected color sample

	getHSLfromRGB();			// set global RGB deltas and set HSL registers

	createControls();			// DHTML!

	updateSatControl();			// colorize 256 Saturation control elements
	updateLumControl();		// colorize 256 Luminosity control elements
	
	updateRGBIndex();			// display current RGB register values
	updateHSLIndex();			// display current HSL register values

	getCustomColors(SavedColors);	// recall the 12 saved custom colors
}

function updateRGBIndex()
{
	picker.redIndex.value = reg_R;	// display current RGB register values
	picker.grnIndex.value = reg_G;
	picker.bluIndex.value = reg_B;
}

function updateHSLIndex()
{
	picker.hueIndex.value = reg_H;	// display current HSL register values
	picker.satIndex.value = reg_S;
	picker.lumIndex.value = reg_L;
}

function getCustomColors(SavedColors)
{

	var index = 0;
	var hex = "#000000";		// parse XML data store and restore saved colors ( items 2 to 13 )
	for(index=1;index<=12;index++)
	{
	hex = SavedColors.substr(index*7,7)
	if( hex == "null" || hex == "" )
	{
	hex = "#000000"
	}
	document.getElementById("hex(" + index + ")").value = hex;
	document.getElementById("memory(" + index + ")").style.backgroundColor = hex;
	} 
}

function createControls()
{
	var index=0;				// BEGIN DYNAMIC HTML
	var hue = 0;
	var red = 0;
	var grn = 0;
	var blu = 0;
	
	var redDynamic = "";			// initialize variables to hold new dynamic html
	var grnDynamic = "";
	var bluDynamic = "";
	var hueDynamic = "";
	var satDynamic = "";
	var lumDynamic = "";			// now build 1,548 new html elements on the fly
	
	for (index=0;index<=255;index++)
	{
	redDynamic += "<INPUT type=\"text\" id=\"redcontrol(" + index + ")\" onmouseover=\"showRed(" + index + ")\" onmouseout=\"hideRed()\" onmousedown=\"changeRed(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
	grnDynamic += "<INPUT type=\"text\" id=\"grncontrol(" + index + ")\" onmouseover=\"showGrn(" + index + ")\" onmouseout=\"hideGrn()\" onmousedown=\"changeGrn(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
	bluDynamic += "<INPUT type=\"text\" id=\"blucontrol(" + index + ")\" onmouseover=\"showBlu(" + index + ")\" onmouseout=\"hideBlu()\" onmousedown=\"changeBlu(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
	hueDynamic += "<INPUT type=\"text\" id=\"huecontrol(" + index + ")\" onmouseover=\"showHue(" + index + ")\" onmouseout=\"hideHue()\" onmousedown=\"changeHue(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
	satDynamic += "<INPUT type=\"text\" id=\"satcontrol(" + index + ")\" onmouseover=\"showSat(" + index + ")\" onmouseout=\"hideSat()\" onmousedown=\"changeSat(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
	lumDynamic += "<INPUT type=\"text\" id=\"lumcontrol(" + index + ")\" onmouseover=\"showLum(" + index + ")\" onmouseout=\"hideLum()\" onmousedown=\"changeLum(" + index + ")\" style=\"width : 1px;height : 24px;border-style : none;\">";
	}

	// and add the Index counters
	redDynamic += "<INPUT type=\"text\" id=\"redIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
	grnDynamic += "<INPUT type=\"text\" id=\"grnIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
	bluDynamic += "<INPUT type=\"text\" id=\"bluIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
	hueDynamic += "<INPUT type=\"text\" id=\"hueIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
	satDynamic += "<INPUT type=\"text\" id=\"satIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";
	lumDynamic += "<INPUT type=\"text\" id=\"lumIndex\" style=\"width : 34px;height : 24px;color : white;background-color : black;border-style : none;\">";

	redDynamic += " RED";			// and finally add labels
	grnDynamic += " GREEN";
	bluDynamic += " BLUE";
	hueDynamic += " HUE";
	satDynamic += " SATURATION";
	lumDynamic += " LUMINOSITY";

	document.getElementById( "redWindow" ).innerHTML = redDynamic;	// next add new html to DIV elements to create controls
	document.getElementById( "grnWindow" ).innerHTML = grnDynamic;
	document.getElementById( "bluWindow" ).innerHTML = bluDynamic;
	document.getElementById( "hueWindow" ).innerHTML = hueDynamic;
	document.getElementById( "satWindow" ).innerHTML = satDynamic;
	document.getElementById( "lumWindow" ).innerHTML = lumDynamic;

	document.getElementById( "redIndex" ).readOnly = true;		// set Index counters to read only
	document.getElementById( "grnIndex" ).readOnly = true;
	document.getElementById( "bluIndex" ).readOnly = true;
	document.getElementById( "hueIndex" ).readOnly = true;
	document.getElementById( "satIndex" ).readOnly = true;
	document.getElementById( "lumIndex" ).readOnly = true;
	
	for (index=0;index<=255;index++)
	{
	var Decimal = new Number( index );				// and last add 256 fixed colors to 4 fixed controls
	hue = Decimal / 255;					// hue is normalized decimal number ( 0.0 to 1.0 )
	hue = getRGBfromHSL( hue,1,0.5 );				// hue is now decimal color value ( 0 to 65535 )

	document.getElementById("huecontrol(" + index + ")").style.backgroundColor = hue;	// hue color bar

	red = Decimal * 65536;					// now get index values as decimal color value ( 0 to 65535 )
	grn = Decimal * 256;
	blu = Decimal * 1;
	document.getElementById("redcontrol(" + index + ")").style.backgroundColor = red;	// RGB color bars
	document.getElementById("grncontrol(" + index + ")").style.backgroundColor = grn;
	document.getElementById("blucontrol(" + index + ")").style.backgroundColor = blu;	// END DYNAMIC HTML
	}
}

function setRGB(decimal)
{
	reg_R = Math.floor( decimal / 65536 );		// get decimal color & convert to RGB
	decimal -= reg_R * 65536;			// set RGB registers
	reg_G = Math.floor( decimal / 256 );
	decimal -= reg_G * 256;
	reg_B = Math.floor(decimal);
}

function showSelectedColor()
{
	var Decimal = new Number( reg_R );		// change red value to decimal number
	RED = Decimal / 255;			// save as global normalized decimal number ( 0.0 to 1.0 )
	var redHex = Decimal.toString(16);		// save as hex $
	
	var Decimal = new Number( reg_G );		// change green value to decimal number
	GREEN = Decimal / 255;			// save as global normalized decimal number ( 0.0 to 1.0 )
	var greenHex = Decimal.toString(16);		// save as hex $
	
	var Decimal = new Number( reg_B );		// change blue value to decimal number
	BLUE = Decimal / 255;			// save as global normalized decimal number ( 0.0 to 1.0 )
	var blueHex = Decimal.toString(16);		// save as hex $
	
	picker.hex.value = "#" + addZero( redHex ) + addZero( greenHex ) + addZero( blueHex );	// show selected color hex value
	document.getElementById("selection").style.backgroundColor = picker.hex.value;	// show selected color
}

function getHSLfromRGB()
{
	MINIMUM = Math.min( Math.min( RED, GREEN ), BLUE );		// Min. value of RGB normalized decimal number ( 0.0 to 1.0 )
	MAXIMUM = Math.max( Math.max( RED, GREEN ), BLUE );		// Max. value of RGB normalized decimal number ( 0.0 to 1.0 )
	deltaMAXIMUM = MAXIMUM - MINIMUM;				// Delta RGB value normalized decimal number ( 0.0 to 1.0 )
	LUMINOSITY = ( MAXIMUM + MINIMUM ) / 2;			// always get luminosity normalized decimal number ( 0.0 to 1.0 )

	if(deltaMAXIMUM != 0)
	{
	var deltaRed = ( ( ( MAXIMUM - RED ) / 6 ) + ( deltaMAXIMUM / 2 ) ) / deltaMAXIMUM;
	var deltaGreen = ( ( ( MAXIMUM - GREEN ) / 6 ) + ( deltaMAXIMUM / 2 ) ) / deltaMAXIMUM;
	var deltaBlue = ( ( ( MAXIMUM - BLUE ) / 6 ) + ( deltaMAXIMUM / 2 ) ) / deltaMAXIMUM;
	
	if( RED == MAXIMUM )
	{
	HUE = deltaBlue - deltaGreen;					// not gray so get hue normalized decimal number ( 0.0 to 1.0 )
	}
	else if( GREEN == MAXIMUM )
	{
	HUE = ( 1 / 3 ) + deltaRed - deltaBlue;
	}
	else if( BLUE == MAXIMUM )
	{
	HUE = ( 2 / 3 ) + deltaGreen - deltaRed;
	}

	if( HUE < 0 )
	{
	HUE += 1;
	}
	else if( HUE > 1 )
	{
	HUE -= 1;
	}	
	}


	if( deltaMAXIMUM == 0 )
	{
	SATURATION = 0;						// grayscale, no color
	}
	else if( LUMINOSITY < 0.5 )
	{
	SATURATION = deltaMAXIMUM / ( MAXIMUM + MINIMUM );		// not gray so get saturation normalized decimal number ( 0.0 to 1.0 )
	}
	else if( LUMINOSITY >= 0.5 )
	{ 
	SATURATION = deltaMAXIMUM / ( 2 - MAXIMUM - MINIMUM );
	}
	
	
	var hueValue = HUE * 255;					// convert to 0 to 255
	var satValue = SATURATION * 255;
	var lumValue = LUMINOSITY * 255;

	reg_H = hueValue.toFixed(0);					// round HSL Values to integer and store values
	reg_S = satValue.toFixed(0);
	reg_L = lumValue.toFixed(0);
}

function updateLumControl()
{
	var index=0;						// colorize 256 Luminosity control elements
	var lum = 0;						// based on current hue and saturation						
	
	for (index=0;index<=255;index++)
	{
	var Decimal = new Number( index );				// get lum value as decimal number
	lum = Decimal / 255;					// get normalized decimal number ( 0.0 to 1.0 )
	lum = getRGBfromHSL( HUE,SATURATION,lum );
	document.getElementById("lumcontrol(" + index + ")").style.backgroundColor = lum;
	}
}

function updateSatControl()
{
	var index=0;					// colorize 256 Saturation control elements
	var sat = 0;					// based on current hue
	var satAdj = 0;

	for (index=0;index<=255;index++)
	{
	var Decimal = new Number( index );			// get lum value as decimal number
	sat = Decimal / 255;					// get normalized decimal number ( 0.0 to 1.0 )

	if(sat == 0 )
	{
	satAdj = sat + 0.0000001;
	}
	else
	{
	satAdj = sat;
	}

	sat = getRGBfromHSL( HUE,satAdj,0.5 );
	document.getElementById("satcontrol(" + index + ")").style.backgroundColor = sat;

	}
}

function normalizeHSL()
{
	var Decimal = new Number( reg_H );		// change hue value to decimal number
	HUE = Decimal / 255;			// get normalized decimal number ( 0.0 to 1.0 )
	
	var Decimal = new Number( reg_S );		// change saturation value to decimal number
	SATURATION = Decimal / 255;			// get normalized decimal number ( 0.0 to 1.0 )
	
	var Decimal = new Number( reg_L );		// change luminosity value to decimal number
	LUMINOSITY = Decimal / 255;			// get normalized decimal number ( 0.0 to 1.0 )
}


function getRGBfromHSL( hue,saturation,luminosity )
{
	var V1 = 0
	var V2 = 0
	var red = 0;
	var green = 0;
	var blue = 0;					// calculate RGB based on HSL

	if( saturation == 0 )
	{
	red = luminosity * 255;				// grayscale, no hue or saturation					
	green = luminosity * 255;				//RGB results from 0 to 255
	blue = luminosity * 255;
	}
	else
	{
		if( luminosity < 0.5 )
		{
		V2 = (luminosity * ( 1 + saturation ));		// not grayscale
		}
		else if( luminosity >= 0.5 )
		{
		V2 = ( luminosity + saturation ) - ( saturation * luminosity );
		}
	
	V1 = 2 * luminosity - V2;

	red = Math.floor( 255 * HUEtoRGB( V1, V2, hue + ( 1 / 3 ) ) ); 

	green = Math.floor( 255 * HUEtoRGB( V1, V2, hue ) );

	blue = Math.floor( 255 * HUEtoRGB( V1, V2, hue - ( 1 / 3 ) ) );

	} 
	var decimal = ( red * 65536 ) + ( green * 256 ) + blue;
	return(decimal);					// return as decimal RGB color
}

function HUEtoRGB( V1, V2, hue )
{
	if( hue < 0 )
	{
	hue += 1;						// used to compute individual RGB values
	}
	else if( hue > 1 )
	{
	hue -= 1;
	}

	if( ( 6 * hue ) < 1 )
	{
	return( V1 + ( V2 - V1 ) * 6 * hue );
	}
	else if( ( 2 * hue ) < 1 )
	{
	return( V2 );
	}
	else if( ( 3 * hue ) < 2 )
	{
	return( V1 + ( V2 - V1 ) * ( ( 2 / 3 ) - hue ) * 6 );
	}
	else return( V1 );
}

function addZero( n )					// adds leading zero if 1 digit hex number 
{
	if( n.length == 1 )
	{
	return "0" + n;
	}
	else
	return n;
}

function showPreview(bgColor)
{
	document.getElementById("preview").style.backgroundColor = bgColor;	// mouseover
}

function showRed(red)
{
	picker.redIndex.value = red;
	var grn = reg_G;
	var blu = reg_B;
	var decimal = ( red * 65536 ) + ( grn * 256 ) + ( blu * 1);			// get decimal RGB value
	document.getElementById("preview").style.backgroundColor = decimal;	// mouseover
}

function showGrn(grn)
{
	picker.grnIndex.value = grn;
	var red = reg_R;
	var blu = reg_B;
	var decimal = ( red * 65536 ) + ( grn * 256 ) + ( blu * 1);			// get decimal RGB value
	document.getElementById("preview").style.backgroundColor = decimal;	// mouseover
}

function showBlu(blu)
{
	picker.bluIndex.value = blu;
	var red = reg_R;
	var grn = reg_G;
	var decimal = ( red * 65536 ) + ( grn * 256 ) + ( blu * 1);			// get decimal RGB value
	document.getElementById("preview").style.backgroundColor = decimal;	// mouseover
}

function showHue(hue)
{
	picker.hueIndex.value = hue;
	hue /= 255;
	var decimal = getRGBfromHSL( hue,SATURATION,LUMINOSITY );		// get decimal RGB value from new HSL values
	document.getElementById("preview").style.backgroundColor = decimal;	// mouseover
}

function showSat(sat)
{
	picker.satIndex.value = sat;
	sat /= 255;
	var decimal = getRGBfromHSL( HUE,sat,LUMINOSITY );			// get decimal RGB value from new HSL values
	document.getElementById("preview").style.backgroundColor = decimal;	// mouseover
}

function showLum(lum)
{
	picker.lumIndex.value = lum;
	lum /= 255;
	var decimal = getRGBfromHSL( HUE,SATURATION,lum );			// get decimal RGB value from new HSL values
	document.getElementById("preview").style.backgroundColor = decimal;	// mouseover
}

function hidePreview()
{
	document.getElementById("preview").style.backgroundColor = 0;		// mouseout
}

function hideRed()
{
	hidePreview();							// mouseout
	picker.redIndex.value = reg_R;
}

function hideGrn()
{
	hidePreview();							// mouseout
	picker.grnIndex.value = reg_G;
}

function hideBlu()
{
	hidePreview();							// mouseout
	picker.bluIndex.value = reg_B;
}

function hideHue()
{
	hidePreview();							// mouseout
	picker.hueIndex.value = reg_H;
}

function hideSat()
{
	hidePreview();							// mouseout
	picker.satIndex.value = reg_S;
}

function hideLum()
{
	hidePreview();							// mouseout
	picker.lumIndex.value = reg_L;
}

function changeRed(red)
{
	reg_R = red;				// new red selected
	showSelectedColor();			// set global RGB values and display selected color sample
	getHSLfromRGB();				// set global RGB deltas and set HSL registers
	updateSatControl();
	updateLumControl();
	updateHSLIndex();
}

function changeGrn(grn)
{
	reg_G = grn;				// new green selected
	showSelectedColor();			// set global RGB values and display selected color sample
	getHSLfromRGB();				// set global RGB deltas and set HSL registers
	updateSatControl();
	updateLumControl();
	updateHSLIndex();
}

function changeBlu(blu)
{
	reg_B = blu;				// new blue selected
	showSelectedColor();			// set global RGB values and display selected color sample
	getHSLfromRGB();				// set global RGB deltas and set HSL registers
	updateSatControl();
	updateLumControl();
	updateHSLIndex();
}

function changeHue(hue)
{
	reg_H = hue;						// new hue selected
	normalizeHSL();
	var decimal = getRGBfromHSL( HUE,SATURATION,LUMINOSITY );	// get decimal RGB value from new HSL values
	setRGB(decimal);						// parse decimal and set RGB registers
	showSelectedColor();					// set global RGB values and display selected color sample
	updateSatControl();
	updateLumControl();
	updateRGBIndex();
}

function changeSat(sat)
{
	reg_S = sat;						// new saturation selected
	normalizeHSL();
	var decimal = getRGBfromHSL( HUE,SATURATION,LUMINOSITY );	// get decimal RGB value from new HSL values
	setRGB(decimal);						// parse decimal and set RGB registers
	showSelectedColor();					// set global RGB values and display selected color sample
	updateLumControl();
	updateRGBIndex();
}

function changeLum(lum)
{
	reg_L = lum;						// new luminosity selected
	normalizeHSL();
	var decimal = getRGBfromHSL( HUE,SATURATION,LUMINOSITY );	// get decimal RGB value from new HSL values
	setRGB(decimal);						// parse decimal and set RGB registers
	showSelectedColor();					// set global RGB values and display selected color sample
	updateRGBIndex();
}

function saveColor(index)
{
	document.getElementById("hex(" + index + ")").value = picker.hex.value;	// set and store a custom color
	
	document.getElementById("memory(" + index + ")").style.backgroundColor = picker.hex.value;

	saveUserSetting();
}

function loadColor(memory)
{
	picker.hex.value = document.getElementById("hex(" + memory + ")").value;	// retrieve a custom color

	var hex = picker.hex.value;				// new color value (hex$)
	hex = hex.substr(1);					// NaN so remove the "#" so we can parseInt

	var decimal = parseInt( hex,16 );			// convert hex$ to decimal integer

	setRGB(decimal);					// parse decimal and set RGB registers

	showSelectedColor();				// set global RGB values and display selected color sample

	getHSLfromRGB();					// set global RGB deltas and set HSL registers

	updateSatControl();
	updateLumControl();

	updateRGBIndex();					// display current RGB register values
	updateHSLIndex();					// display current HSL register values
}

function saveUserSetting()
{
	var currentColor = picker.hex.value;			// XML user DATA

	var index = 0;
	for(index=1;index<=12;index++)
	{
	picker.hex.value += document.getElementById("hex(" + index + ")").value;	// get all 13 hex$ into userData field
	} 

	var Data = picker.hex;				// get color settings from hex field
							// input field object must be class = userData

	Data.setAttribute("SavedHexColors",Data.value);		// like a "cookie" but XML Store (IE only)
	
	Data.save("ColorPickerData");				// save current color settings when page unloads or custom color stored

	picker.hex.value = currentColor;			// restore hex field if custom color stored
}
// End of Script "editcolor.js"
// unhide -->