// BASED ON:
//---------------------------------------------------------
// Color Picker Script from Flooble.com
// For more information, visit
// http://www.flooble.com/scripts/colorpicker.php
// Copyright 2003 Animus Pactum Consulting inc.
//---------------------------------------------------------

function ColorPicker(varname, id, color) {
	this.picker = null;
// METHODS
     this.pickColor = function () {
     	if (!this.picker) { this.setDiv(); }
		if (this.picker.style.display == 'block') {
			this.picker.style.display = 'none';
			this.hideShowCovered();
			return;
		}
		pos = this.getAbsolutePos(this.field);
		//alert(this.field.id + ' :: '+ pos.x+','+pos.y);
     	this.picker.style.top = (pos.y + this.field.offsetHeight)+'px';
     	this.picker.style.left = pos.x+'px';
		this.picker.style.display = 'block';
		this.hideShowCovered();
	}

	 this.getObj = function ( id ) {
		if (this.ie) { return document.all[id]; }
		else {	return document.getElementById(id);	}
	 }

	this.getAbsolutePos = function (el) {
		var fuse = 100;
		var r = { x: 0, y: 0 };
		do {
			r.y += el.offsetTop;
			r.x += el.offsetLeft;
			el = el.offsetParent;
			if (--fuse <= 0) break;
		}
		while (el);
		if (fuse <= 0) {
			alert('Fuse blew');
		}
		return r;
	}

	this.addColor = function (r, g, b) {
		this.addColorValue(this.colorLevels[r], this.colorLevels[g], this.colorLevels[b]);
	}

	this.addColorValue = function(r, g, b) {
		this.colorArray[this.colorArray.length] = '#' + r + r + g + g + b + b;
	}

	this.setColor = function ( color ) {
		this.field.value = color;
		if (color == '') {
			this.swatch.style.background = this.nocolor;
			this.swatch.style.color =  this.nocolor;
			color =  this.nocolor;
		} else {
			this.swatch.style.background = color;
			this.swatch.style.color = color;
		}
		this.picker.style.display = 'none';
		//eval(this.field.title);
	}

	this.setDiv = function () {
		if (!document.createElement) { return; }
		var elemDiv = document.createElement('div');
		if (typeof(elemDiv.innerHTML) != 'string') { return; }
		this.genColors();
		elemDiv.id = this.pickername;
		elemDiv.style.position = 'absolute';
		elemDiv.style.display = 'none';
		elemDiv.style.border = '#000000 1px solid';
		elemDiv.style.background = '#FFFFFF';
		elemDiv.onclick = function() {this.style.display = 'none';}
		elemDiv.innerHTML = '<span style="font-family:Verdana; font-size:11px;">Pick a color: '
			+ '(<a href="javascript:'+this.varname+'.setColor(\'\');">No color</a>)<br>'
			+ this.getColorTable() + '</span>'
			//+ '<center><a href="http://www.flooble.com/scripts/colorpicker.php"'
			//+ ' target="_blank">color picker by <b>flooble</b></a></center></span>'
		;

		document.body.appendChild(elemDiv);
		this.picker = this.getObj(this.pickername);
		//xshow(this.picker);
	}

	this.genColors = function () {
		this.addColorValue('0','0','0');
		this.addColorValue('3','3','3');
		this.addColorValue('6','6','6');
		this.addColorValue('8','8','8');
		this.addColorValue('9','9','9');
		this.addColorValue('A','A','A');
		this.addColorValue('C','C','C');
		this.addColorValue('E','E','E');
		this.addColorValue('F','F','F');

		var n = this.colorLevels.length
		for (a = 1; a < n; a++) this.addColor(0,0,a);
		for (a = 1; a < n-1; a++) this.addColor(a,a,5);

		for (a = 1; a < n; a++) this.addColor(0,a,0);
		for (a = 1; a < n-1; a++) this.addColor(a,5,a);

		for (a = 1; a < n; a++) this.addColor(a,0,0);
		for (a = 1; a < n-1; a++) this.addColor(5,a,a);


		for (a = 1; a < n; a++) this.addColor(a,a,0);
		for (a = 1; a < n-1; a++) this.addColor(5,5,a);

		for (a = 1; a < n; a++) this.addColor(0,a,a);
		for (a = 1; a < n-1; a++) this.addColor(a,5,5);

		for (a = 1; a < this.n; a++) this.addColor(a,0,a);
		for (a = 1; a < this.n-1; a++) this.addColor(5,a,5);
	}

	this.getColorTable = function () {
		var colors = this.colorArray;
		var tableCode = '';
		tableCode += '<table border="0" cellspacing="1" cellpadding="1">';
		for (i=0, n=colors.length; i < n; i++) {
		  if (i % this.perline == 0) { tableCode += '<tr>'; }
		  tableCode += '<td bgcolor="#000000"><a style="outline: 1px solid #000000; color: '
			  + colors[i] + '; background: ' + colors[i] + ';font-size: 10px;" title="'
			  + colors[i] + '" href="javascript:'+this.varname+'.setColor(\'' + colors[i] + '\');">&nbsp;&nbsp;&nbsp;</a></td>';
		  if (i % this.perline == this.perline - 1) { tableCode += '</tr>'; }
		}
		if (i % this.perline != 0) { tableCode += '</tr>'; }
		tableCode += '</table>';
		return tableCode;
	}

	this.relateColor = function (color) {
		if (color == '') {
			this.swatch.style.background = this.nocolor;
			this.swatch.style.color = this.nocolor;
			color = this.nocolor;
		} else {
			this.swatch.style.background = color;
			this.swatch.style.color = color;
		}
		//alert(eval(this.field.title));
	}

	this.hideShowCovered = function () {
		if (!this.ie) {
			return;
		}
		var tags = new Array("applet", "iframe", "select");
		var el = this.picker;

		var p = this.getAbsolutePos(el);
		var EX1 = p.x;
		var EX2 = el.offsetWidth + EX1;
		var EY1 = p.y;
		var EY2 = el.offsetHeight + EY1;
		//alert(EX1+','+EX2+','+EY1+','+EY2);

		for (var k = tags.length; k > 0; ) {
			var ar = document.getElementsByTagName(tags[--k]);
			var cc = null;

			for (var i = ar.length; i > 0;) {
				cc = ar[--i];

				p = this.getAbsolutePos(cc);//alert(p.x+','+p.y);
				var CX1 = p.x;
				var CX2 = cc.offsetWidth + CX1;
				var CY1 = p.y;
				var CY2 = cc.offsetHeight + CY1;
				//alert(cc.name+ '::'+CX1+','+CX2+','+CY1+','+CY2);

				if (this.picker.style.display == 'none' || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
					cc.style.visibility = "visible";
				} else {
					cc.style.visibility = "hidden";
				}
			}
		}
	}

// properties
	this.ie = document.all; // true if ie
	this.perline = 9;
	this.curId = id;
	this.varname = varname;

	this.swatch = this.getObj(id);
	this.field = this.getObj(id + 'field');
	this.pickername = id + 'colorpicker';

	this.colorLevels = Array('0', '3', '6', '9', 'C', 'F');
	this.colorArray = Array();
	this.nocolor = this.ie ? '' : 'none';

	this.relateColor(color);
}