ColorPicker = {
  color       : "#ffffff",
  cols        : 36,
  cellWidth   : 12,
  cellHeight  : 12,
  target1     : null,
  target2		  : null,
  
  show : function (evt, target1, target2) {
    evt == null ? evt = window.event : evt;
       
    this.target1 = target1;
    this.target2 = target2;
    
		var cp = document.getElementById("ColorPicker");
		if (cp == null) { cp = ColorPicker.createPalette(); }
		
		this.setColor(this.target1.value);
		
		var mx = evt.pageX ? evt.pageX : evt.x;
		var my = evt.pageY ? evt.pageY : evt.y;
		
		var xoff = (mx + parseInt(document.getElementById("ColorPickerContainer").style.width))  - (document.body.clientWidth-10);
		var yoff = (my + parseInt(document.getElementById("ColorPickerContainer").style.height)) - (document.body.clientHeight-10);

		var model = (document.compatMode != "CSS1Compat" || evt.pageX);
 		var con   = model ? document.body : document.documentElement;
		cp.style.left = (xoff < 0 ? mx : mx - xoff) + (con.scrollLeft) + "px";
		cp.style.top  = (yoff < 0 ? my : my - yoff) + (con.scrollTop)  + "px";
		
		document.getElementById("paletteSelectionValue").value = this.color;
		cp.style.display = "block";
  },
  
  createPalette : function () {
		cp = document.createElement("div");
		cp.id = cp.className = "ColorPicker";
		
		var h = (Math.floor(217 / this.cols) * (this.cellHeight-1) + 40);
		var w = (this.cols*(this.cellWidth-1)+10);
		if (window.attachEvent) {
		var t = "<iframe src='/euecommon/img/1und1_logo.gif' class='ColorPicker' style='border:none;height:"+h+
			"px;width:"+w+"px' frameborder='0'></iframe><div id='ColorPickerContainer' class='ColorPicker' style='height:"+h+
			"px;width:"+w+"px'></div>";
		} else {
			var t = "<div id='ColorPickerContainer' class='ColorPicker' style='height:"+h+"px;width:"+w+"px'></div>";
		}
		
		for (r = cnt = c = 0; r < 256; r += 51) {
			for (g = 0; g < 256; g += 51) {
				for (b=0; b < 256; b += 51) {
					c = "#"+toHex(r)+toHex(g)+toHex(b);
					var top = Math.floor(cnt / this.cols) * (this.cellHeight-1) + 5;
					var left = (cnt % this.cols) * (this.cellWidth-1) + 5;
					t += "<div class='field' style='width:"+this.cellWidth+
						"px;line-height:0;height:"+this.cellHeight+"px;background-color:"+c+
						";position:absolute;top:"+top+"px;left:"+left+"px' onclick='ColorPicker.selectColor(\""+c+
						"\")'>&nbsp;</div>\n";
					cnt++;
				}
			}
		}
		
		var tp = (Math.floor(cnt / this.cols) * this.cellHeight+6);
		t += "<div id='ColorPickerSelection' style='position:absolute;top:"+tp+
			"px;left:5px;width:85px;height:20px;background-color:"+this.color+"'></div>"+
			"<input type='text' id='paletteSelectionValue' size='8' onkeyup='ColorPicker.setColor(this.value)' style='position:absolute;top:"+tp+
			"px;left:100px'/>"+
			"<input type='button' class='button' value='ok' style='width:50px;height:20px;font-size:12px;position:absolute;top:"+tp+
			"px;left:"+(this.cols*(this.cellWidth-1)-50)+"px' onclick='ColorPicker.close()'/>";
		
		cp.innerHTML = t;
		document.body.appendChild(cp);
		
		return cp;
		
		function toHex (i) {
			var hex = "0123456789abcdef";
			return hex.charAt(parseInt(i/16)) + hex.charAt(i%16);
		}
	},

	selectColor : function (color) {
	  with (document.getElementById("ColorPickerSelection")) {
		  document.getElementById("paletteSelectionValue").value = color;
		  ColorPicker.setColor(color);
	  }
	},
	
	setColor : function (color) {
	  if (color.match(/^\#[a-fA-F0-9]{6}/)) {	  	
	    document.getElementById("ColorPickerSelection").style.backgroundColor = color;
	    this.color = color;
	  }
	},
		
	close : function () {
	  this.write();
	  document.getElementById("ColorPicker").style.display = "none";
	},
	
	write : function () {
    this.target1.value = this.color;
    this.target2.style.backgroundColor = this.color;  
	}
}