// ===================================================================
// 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.
// ===================================================================

/*****
	Modified to fit my application by Ei
	Especially, for prototype.js
*****/

var ColorPicker = {
	created: false,
	parameters: {
		x: 0,
		y: 0,
		width: 327,
		height: 327,
		offsetX: 0,
		offsetY: 0,
		overflowX: false,		// Whether or not allow the DIV goes over client area (X direction)
		overflowY: false,		// Whether or not allow the DIV goes below client area (Y direction)
		cellWidth: 18,
		onSelect: function (){}
	},

	create: function (DivContainer, parameters){
		this.divname = DivContainer;
		this.color = "#FFFFFF";
	    //this.parameters = Object.extend(this.parameters, parameters);
	    this.parameters = $H(this.parameters).merge(parameters).toObject();

		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","#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");
		var total = colors.length;

		var width = this.parameters.cellWidth;

		var cp_contents = "";

		cp_contents += '<table width="327px" style="background-color: #EEFFCC;"><tr><td align="right">';
		cp_contents += '<a href="javascript:void(0)" onclick="$(\'' + this.divname + '\').hide();"><img src="skins/icons/icon_close_popup.gif"></a>';
		cp_contents += "</td></tr></table>";

		cp_contents += "<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0>";
		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="ColorPicker.highlightColor(\''+colors[i]+'\')"';
			}else{
				mo = "";
			}
			//cp_contents += '<TD BGCOLOR="'+colors[i]+'"><FONT SIZE="-3"><A HREF="#" onClick="ColorPicker_pickColor(\''+colors[i]+'\',window.popupWindowObjects['+cp.index+']);return false;" '+mo+' STYLE="text-decoration:none;">&nbsp;&nbsp;&nbsp;</A></FONT></TD>';
			cp_contents += '<TD class="color_picker_cell" BGCOLOR="'+colors[i]+'" width="' + width + '" onClick="ColorPicker.pickColor(\''+colors[i]+'\');" ' + mo + '>&nbsp;&nbsp;</TD>';
			if( ((i+1)>=total) ||(((i+1) % width) == 0)){
				cp_contents += "</TR>";
			}
		}
		if(document.getElementById){
			var width1 = Math.floor(width/2);
			var width2 = width = width1;
			cp_contents += "<TR><TD COLSPAN='"+width1+"' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+width2+"' ALIGN='CENTER' BGCOLOR='#ffffff' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
		}
		cp_contents += "</TABLE>";
		this.contents = cp_contents+"\n";
		this.creted = true;
	},

	show: function(currentColor) {
		// The DIV position should be set by setPosition() before calling show()
		var element = $(this.divname);

		element.setStyle(
			{
				left: (this.parameters.x + this.parameters.offsetX) + "px",
				top: (this.parameters.y + this.parameters.offsetY) + "px",
				width: this.parameters.width + "px",
				height: "auto",
				display: "block"
			}
		);

		element.update(this.contents);
		this.setCurrentColor(currentColor);
		element.show();

		// Get actual size
		// Since getDimensions for DIV doen't return actual (expanded) size,
		// get them from two TABLE elements within the DIV
		var dimensions = $A(element.getElementsByTagName('TABLE')).invoke('getDimensions');
		var divHeight = 0;
		var divWidth = 0;
		for (var i = 0; i < dimensions.length; i++) {
			divHeight += dimensions[i].height;
			divWidth = Math.max(divWidth, dimensions[i].width);
		}
		this.parameters = $H(this.parameters).merge({width: divWidth, height: divHeight}).toObject();

		if (!this.parameters.overflowY) {
			if (parseInt(element.getStyle('top')) + divHeight > GetWindowSize('height')) {
				element.setStyle({top: (GetWindowSize('height') - divHeight) + "px"});
			}
		}
	},

	setCurrentColor: function(color) {
		$("colorPickerSelectedColor").setStyle(
			{
				backgroundColor: color
			}
		);
		d = $("colorPickerSelectedColorValue").update(color);
	},

	pickColor: function (color){
		this.color = color;

		// Added by Ei
		//change_class_color();
		this.parameters.onSelect(color);
	},

	highlightColor: function (color){
		$("colorPickerSelectedColor").setStyle({backgroundColor: color});
		$("colorPickerSelectedColorValue").update(color);
	},

	setPosition: function (posX, posY) {
		this.parameters = $H(this.parameters).merge({x: posX, y: posY}).toObject();
	}
}