/*
 *
 * Color Pickeer
 *
 * version 0.2
 * last revision 2006 11 26
 *  
 * Copyright (C) 2006 by Davide 'Folletto' Casali.
 *    mail: <folletto AT gmail DOT com>
 *    web: http://digitalhymn.com
 *
 * Thanks to Flooble for the basic concept.
 * 
 * Compatible with Firefox 1/2, Safari 2, Opera 9, Internet Explorer (5.0)/5.5/6/7.
 * Minor square sizing bug on IE5.0 (should be adjustable via CSS).
 * Untested on other browsers.
 *
 */

/*
 * USAGE:
 *
 * Add this code:
 *
 *   ColorPickeer.pickFor('id');
 *
 * on the page in order to write the Color Pickeer Square to the page. The passed
 * id field is the target of the color value (#000000-#ffffff).
 *
 * Usually, it's used as:
 * 
 *   <script type="text/javascript">ColorPickeer.pickFor('color');</script>
 *
 * Nothing else is required.
 *
 * To build your trigger for the color picker, use:
 *
 *   ColorPickeer.show('id');
 *
 * If you need more tweaking, read the class below.
 *
 */

/**************************************************************************** COLOR PICKEER
 ******************************************************************************************/
var ColorPickeer = {
	
	transparent: 'transparent',
	target: null,
	box: null,
	
	/******************************************************************************************
	 * Pickr color square targeting id element.
	 * Id will be the target of the choosen color.
	 *
	 * @param		id
	 */
	pickFor: function(id) {
		var obj = document.getElementById(id);
		style = 'font-size: 14px; padding: 1px 8px; border: 1px solid #cccccc; text-decoration: none; background-color: ' + obj.value + ';';
		//style = 'background-color: ' + obj.value + '; border: 1px solid #000000; font-size: 10px; text-decoration: none;';
		//style = '';
		var picker = '<a href="javascript:ColorPickeer.show(\'' + id + '\');" id="' + id + '_square" class="colorpicker" style="' + style + '">&nbsp;</a>';
		document.write(picker);
	},
	
	/******************************************************************************************
	 * Pick now
	 *
	 * @param		id
	 */
	show: function(id) {
		if (!this.box) this.attachBox();
		
		if (this.box) {
			if (this.target != id) {
				// *** Called from another Color Square
				this.target = id;
				this.toggle(true, id);
			} else {
				// *** Called from the same Color Square
				if (this.box.style.display == 'block') {
					this.target = null;
					this.toggle(false);
				} else {
					this.target = id;
					this.toggle(true, id);
				}
			}
		}
	},
	
	/******************************************************************************************
	 * Toggle open and close status for the color picker, and when opening set the position.
	 *
	 * @param		id
	 */
	toggle: function(status, id) {
		if (status && id) {
			var position = this.getPosition(id + "_square");
			this.box.style.top = position.top + position.height + "px";
			this.box.style.left = position.left + "px";
			this.box.style.display = 'block';
		} else {
			this.box.style.display = 'none';
		}
	},
	
	/******************************************************************************************
	 * Pick
	 *
	 * @param		id
	 */
	pick: function(color) {
		if (this.target && (target = document.getElementById(this.target))) {
			var obj = document.getElementById(this.target);
			obj.value = color;
			
			var square = document.getElementById(this.target + "_square");
			square.style.backgroundColor = color;
			
			this.toggle(false);
		}
	},
	
	/******************************************************************************************
	 * Picker box DOM attacher.
	 * Binds the colorpicker box to the DOM.
	 *
	 */
	attachBox: function() {
		if (!this.box && document.createElement) {
			this.box = document.createElement('div');
			this.box.id = 'colorpickerbox10';
			this.box.style.position = 'absolute';
			this.box.style.display = 'none';
			this.box.style.border = '1px solid #cccccc';
			this.box.style.background = '#ffffff';
			
			this.box.innerHTML = this.makeBox();
			
			document.body.appendChild(this.box);
		}
	},
	
	/******************************************************************************************
	 * Build color picker box content.
	 *
	 * @param		id modifier (null to default)
	 * @param		palette width (null to default)
	 * @param		palette height (null to default)
	 */
	makeBox: function(id, width, height) {
		id = id || "colorpickerbox_inner";
		width = width || 9;
		height = height || 7;
		
		var out = '';
		
		// ****** Make Color Palette
		var colors = this.getColors(width, height);
		
		for (i = 0; i < colors.length; i++) {
			if (i % width == 0) out += '<tr>';
			out += '<td bgcolor="' + colors[i] + '" onclick="ColorPickeer.pick(\'' + colors[i] + '\')" style="width: 12px; height: 12px; cursor: pointer;"></td>';
			if (i % width == width - 1) out += '</tr>';
		}
		if (i % width != 0) out += '</tr>';
		
		out = '<table border="0" cellspacing="0" cellpadding="0">' + out + '</table>';
		
		// ****** Wrap
		out = '<div class="' + id + '">' + out + '</div>';
		return out;
	},
	
	/******************************************************************************************
	 * Get the colors array.
	 * "If we have a fixed palette, why should I calculate it every time?"
	 * 
	 * @param		palette width [UNUSED YET]
	 * @param		palette height [UNUSED YET]
	 */
	getColors: function(width, height) {
		width = width || 9;
		height = height || 7;
		
		var out = []
		
		if (this.palette) {
			out = this.palette;
		} else {
			out = [
				'#000000', '#333333', '#666666', '#888888', '#999999', '#aaaaaa', '#cccccc', '#eeeeee', '#ffffff',
				'#000033', '#000066', '#000099', '#0000cc', '#0000ff', '#3333ff', '#6666ff', '#9999ff', '#ccccff',
				'#003300', '#006600', '#009900', '#00cc00', '#00ff00', '#33ff33', '#66ff66', '#99ff99', '#ccffcc',
				'#330000', '#660000', '#990000', '#cc0000', '#ff0000', '#ff3333', '#ff6666', '#ff9999', '#ffcccc',
				'#333300', '#666600', '#999900', '#cccc00', '#ffff00', '#ffff33', '#ffff66', '#ffff99', '#ffffcc',
				'#003333', '#006666', '#009999', '#00cccc', '#00ffff', '#33ffff', '#66ffff', '#99ffff', '#ccffff', 
				'#330033', '#660066', '#990099', '#cc00cc', '#ff00ff', '#ff33ff', '#ff66ff', '#ff99ff', '#ffccff'
			];
		}
		
		return out; //colorArray;
	},
	
	/******************************************************************************************
	 * Get the position of a specified DOM object (or id).
	 * It returns also the width and the height.
	 * Returns an associative array (hash) with the following properties:
	 * top, left, width, height.
	 * 
	 * @param		object node or object id
	 * @author	quirksmode.org and adapted by Davide 'Folletto' Casali
	 */
	getPosition: function(obj) {
		if (typeof(obj) == "string") obj = document.getElementById(obj);
		
		var out = {left: -1, top: -1, width: -1, height: -1}
		
		// ****** Width and Height
		out.width = obj.offsetWidth;
		out.height = obj.offsetHeight;
		
		// ****** Left and Top
		if (obj.offsetParent) {
			out.left = obj.offsetLeft;
			out.top = obj.offsetTop;
			while (obj = obj.offsetParent) {
				out.left += obj.offsetLeft;
				out.top += obj.offsetTop;
			}
		}
		
		return out;
	}
}

/******************************************************************************************
 * Workaround for incompatible browsers... but I don't know if it works.
 */
if (!document.getElementById) {
	document.getElementById = function(id) {
		return document.all[id];
	}
}