// ===================================================================
// Author: Matt Kruse <matt@mattkruse.com>
// WWW: http://www.mattkruse.com/
//
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
//
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download. 
// If you wish to share this code with others, please just point them
// to the URL instead.
// Please DO NOT link directly to my .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================


/* 
DESCRIPTION: This widget is used to select a color, in hexadecimal #RRGGBB 
form. It uses a color "swatch" to display the standard 216-color web-safe 
palette. The user can then click on a color to select it.

COMPATABILITY: See notes in AnchorPosition.js and PopupWindow.js.
Only the latest DHTML-capable browsers will show the color and hex values
at the bottom as your mouse goes over them.

USAGE:
// Create a new ColorPicker object using DHTML popup
var cp = new ColorPicker();

// Create a new ColorPicker object using Window Popup
var cp = new ColorPicker('window');

// Add a link in your page to trigger the popup. For example:
<A HREF="#" onClick="cp.show('pick');return false;" NAME="pick" ID="pick">Pick</A>

// If using DHTML popup, write out the required DIV tag near the bottom
// of your page.
<SCRIPT LANGUAGE="JavaScript">cp.writeDiv()</SCRIPT>

// Write the 'pickColor' function that will be called when the user clicks
// a color and do something with the value
function pickColor(color) {
	field.value = color;
	}

NOTES:
1) Requires the functions in AnchorPosition.js and PopupWindow.js

2) Your anchor tag MUST contain both NAME and ID attributes which are the 
   same. For example:
   <A NAME="test" ID="test"> </A>

3) There must be at least a space between <A> </A> for IE5.5 to see the 
   anchor tag correctly. Do not do <A></A> with no space.

4) When a ColorPicker object is created, a handler for 'onmouseup' is
   attached to any event handler you may have already defined. Do NOT define
   an event handler for 'onmouseup' after you define a ColorPicker object or
   the color picker will not hide itself correctly.
*/ 

function ColorPicker_writeDiv() {
	document.writeln("<DIV ID=\"colorPickerDiv\" STYLE=\"position:absolute;visibility:hidden;\"> </DIV>");
	}

function ColorPicker_show(anchorname) {
	this.showPopup(anchorname);
	}

function ColorPicker_pickColor(color,obj) {
	obj.hidePopup();
	if (window.pickColor) {
		pickColor(color);
		}
	else {
		alert("You must define a function named 'pickColor' to receive the value clicked!");
		}
	}
	
// This function runs when you move your mouse over a color block, if you have a newer browser
function ColorPicker_highlightColor(c) {
	var thedoc = (arguments.length>1)?arguments[1]:window.document;
	var d = thedoc.getElementById("colorPickerSelectedColor");
	d.style.backgroundColor = c;
	d = thedoc.getElementById("colorPickerSelectedColorValue");
	d.innerHTML = c;
	}

function ColorPicker() {
	var windowMode = false;
	// Create a new PopupWindow object
	if (arguments.length==0) {
		var divname = "colorPickerDiv";
		}
	else if (arguments[0] == "window") {
		var divname = '';
		windowMode = true;
		}
	else {
		var divname = arguments[0];
		}
	
	if (divname != "") {
		var cp = new PopupWindow(divname);
		}
	else {
		var cp = new PopupWindow();
		cp.setSize(400, 225);
		}

	// Object variables
	cp.currentValue = "#FFFFFF";
	
	// Method Mappings
	cp.writeDiv = ColorPicker_writeDiv;
	cp.highlightColor = ColorPicker_highlightColor;
	cp.show = ColorPicker_show;

	// Code to populate color picker window
	var colors = new Array(	"#000000","#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099","#3300CC","#3300FF",
							"#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990000","#990033","#990066","#990099","#9900CC","#9900FF",
							"#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066","#FF0099","#FF00CC","#FF00FF",
							
							"#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333","#333366","#333399","#3333CC","#3333FF",
							"#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300","#993333","#993366","#993399","#9933CC","#9933FF",
							"#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF","#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF",
							
							"#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333","#333366","#333399","#3333CC","#3333FF",
							"#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300","#993333","#993366","#993399","#9933CC","#9933FF",
							"#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF","#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF",
							
							"#006600","#006633","#006666","#006699","#0066CC","#0066FF","#336600","#336633","#336666","#336699","#3366CC","#3366FF",
							"#666600","#666633","#666666","#666699","#6666CC","#6666FF","#996600","#996633","#996666","#996699","#9966CC","#9966FF",
							"#CC6600","#CC6633","#CC6666","#CC6699","#CC66CC","#CC66FF","#FF6600","#FF6633","#FF6666","#FF6699","#FF66CC","#FF66FF",
							
							"#009900","#009933","#009966","#009999","#0099CC","#0099FF","#339900","#339933","#339966","#339999","#3399CC","#3399FF",
							"#669900","#669933","#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999","#9999CC","#9999FF",
							"#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","#FF9999","#FF99CC","#FF99FF",
							
							"#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00","#33CC33","#33CC66","#33CC99","#33CCCC","#33CCFF",
							"#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66","#99CC99","#99CCCC","#99CCFF",
							"#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33","#FFCC66","#FFCC99","#FFCCCC","#FFCCFF",
							
							"#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00","#33FF33","#33FF66","#33FF99","#33FFCC","#33FFFF",
							"#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF","#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF",
							"#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC","#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF",
							
							"#000000","#010101","#020202","#030303","#040404","#050505","#060606","#070707","#080808","#090909","#0A0A0A","#0B0B0B",
							"#0C0C0C","#0D0D0D","#0E0E0E","#0F0F0F","#101010","#111111","#121212","#131313","#141414","#151515","#161616","#171717",
							"#181818","#191919","#1A1A1A","#1B1B1B","#1C1C1C","#1D1D1D","#1E1E1E","#1F1F1F","#202020","#212121","#222222","#232323",
							"#242424","#252525","#262626","#272727","#282828","#292929","#2A2A2A","#2B2B2B","#2C2C2C","#2D2D2D","#2E2E2E","#2F2F2F",
							"#303030","#313131","#323232","#333333","#343434","#353535","#363636","#373737","#383838","#393939","#3A3A3A","#3B3B3B",
							"#3C3C3C","#3D3D3D","#3E3E3E","#3F3F3F","#404040","#414141","#424242","#434343","#444444","#454545","#464646","#474747",
							"#484848","#494949","#4A4A4A","#4B4B4B","#4C4C4C","#4D4D4D","#4E4E4E","#4F4F4F","#505050","#515151","#525252","#535353",
							"#545454","#555555","#565656","#575757","#585858","#595959","#5A5A5A","#5B5B5B","#5C5C5C","#5D5D5D","#5E5E5E","#5F5F5F",
							"#606060","#616161","#626262","#636363","#646464","#656565","#666666","#676767","#686868","#696969","#6A6A6A","#6B6B6B",
							"#6C6C6C","#6D6D6D","#6E6E6E","#6F6F6F","#707070","#717171","#727272","#737373","#747474","#757575","#767676","#777777",
							"#787878","#797979","#7A7A7A","#7B7B7B","#7C7C7C","#7D7D7D","#7E7E7E","#7F7F7F","#808080","#818181","#828282","#838383",
							"#848484","#858585","#868686","#878787","#888888","#898989","#8A8A8A","#8B8B8B","#8C8C8C","#8D8D8D","#8E8E8E","#8F8F8F",
							"#909090","#919191","#929292","#939393","#949494","#959595","#969696","#979797","#989898","#999999","#9A9A9A","#9B9B9B",
							"#9C9C9C","#9D9D9D","#9E9E9E","#9F9F9F","#A0A0A0","#A1A1A1","#A2A2A2","#A3A3A3","#A4A4A4","#A5A5A5","#A6A6A6","#A7A7A7",
							"#A8A8A8","#A9A9A9","#AAAAAA","#ABABAB","#ACACAC","#ADADAD","#AEAEAE","#AFAFAF","#B0B0B0","#B1B1B1","#B2B2B2","#B3B3B3",
							"#B4B4B4","#B5B5B5","#B6B6B6","#B7B7B7","#B8B8B8","#B9B9B9","#BABABA","#BBBBBB","#BCBCBC","#BDBDBD","#BEBEBE","#BFBFBF",
							"#C0C0C0","#C1C1C1","#C2C2C2","#C3C3C3","#C4C4C4","#C5C5C5","#C6C6C6","#C7C7C7","#C8C8C8","#C9C9C9","#CACACA","#CBCBCB",
							"#CCCCCC","#CDCDCD","#CECECE","#CFCFCF","#D0D0D0","#D1D1D1","#D2D2D2","#D3D3D3","#D4D4D4","#D5D5D5","#D6D6D6","#D7D7D7",
							"#D8D8D8","#D9D9D9","#DADADA","#DBDBDB","#DCDCDC","#DDDDDD","#DEDEDE","#DFDFDF","#E0E0E0","#E1E1E1","#E2E2E2","#E3E3E3",
							"#E4E4E4","#E5E5E5","#E6E6E6","#E7E7E7","#E8E8E8","#E9E9E9","#EAEAEA","#EBEBEB","#ECECEC","#EDEDED","#EEEEEE","#EFEFEF",
							"#F0F0F0","#F1F1F1","#F2F2F2","#F3F3F3","#F4F4F4","#F5F5F5","#F6F6F6","#F7F7F7","#F8F8F8","#F9F9F9","#FAFAFA","#FBFBFB",
							"#FCFCFC","#FDFDFD","#FEFEFE","#FFFFFF");
	var total = colors.length;
	var width = 36;
	var cp_contents = "";
	var windowRef = (windowMode)?"window.opener.":"";
	if (windowMode) {
		cp_contents += "<HTML><HEAD><TITLE>Select Color</TITLE></HEAD>";
		cp_contents += "<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFMARGIN=0 TOPMARGIN=0><CENTER>";
		}
	cp_contents += "<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=0 style=\"border: 1px black solid;\">";
	var use_highlight = (document.getElementById || document.all)?true:false;
	for (var i=0; i<total; i++) {
		if ((i % width) == 0) { cp_contents += "<TR>"; }
		if (use_highlight) { var mo = 'onMouseOver="'+windowRef+'ColorPicker_highlightColor(\''+colors[i]+'\',window.document)"'; }
		else { mo = ""; }
		cp_contents += '<TD BGCOLOR="'+colors[i]+'"><FONT SIZE="-3"><A HREF="#" onClick="'+windowRef+'ColorPicker_pickColor(\''+colors[i]+'\','+windowRef+'window.popupWindowObjects['+cp.index+']);return false;" '+mo+' STYLE="text-decoration:none;">&nbsp;&nbsp;&nbsp;</A></FONT></TD>';
		if ( ((i+1)>=total) || (((i+1) % width) == 0)) { 
			cp_contents += "</TR>";
			}
		}
	// If the browser supports dynamically changing TD cells, add the fancy stuff
	if (document.getElementById) {
		var width1 = Math.floor(width/2);
		var width2 = width = width1;
		cp_contents += "<TR><TD COLSPAN='"+width1+"' BGCOLOR='#ffffff' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+width2+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
		}
	cp_contents += "</TABLE>";
	if (windowMode) {
		cp_contents += "</CENTER></BODY></HTML>";
		}
	// end populate code

	// Write the contents to the popup object
	cp.populate(cp_contents+"\n");
	// Move the table down a bit so you can see it
	cp.offsetY = 25;
	cp.autoHide();
	return cp;
	}