<div id="colorPicker"></div>
<br style="clear:both"/>
<p id="colorInfo">
  R: <span class="r"></span><br />
  G: <span class="g"></span><br />
  B: <span class="b"></span><br />
  HEX: <span class="hex"></span>
<p>

*{
  margin:0;
  padding:0;
}
body{
  background-color: #333;
}
div#hPanel, div#sbPanel {
  	border:2px solid #fff;
  	overflow:hidden;
  position:relative;
  float:left;
	  margin:6px;
 border-radius:4px;
}
div#hPanel div#hColorBar {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-2px;
	width:4px;
	background-color:#fff;
}
div#hPanel div#hCenter {
	position:absolute;
	top:50%;
	left:50%;
	border:3px solid #fff;
	background-color:#b3b3b3;
  border-radius:50%;
}
div#hPanel ul {
	position:relative;
  list-style:none;
}
div#hPanel ul li {
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	font-size:0;
}
div#sbPanel {
  background-image: -webkit-linear-gradient(bottom, #000, rgba(0,0,0,0)), -webkit-linear-gradient(left, #fff, rgba(255,255,255,0));
  background-image: -moz-linear-gradient(bottom, #000, rgba(0,0,0,0)), -moz-linear-gradient(left, #fff, rgba(255,255,255,0));
  background-image: -o-linear-gradient(bottom, #000, rgba(0,0,0,0)), -o-linear-gradient(left, #fff, rgba(255,255,255,0));
  background-image: -ms-linear-gradient(bottom, #000, rgba(0,0,0,0)), -ms-linear-gradient(left, #fff, rgba(255,255,255,0));
  background-image: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0));
}
div#sbPanelRing {
	position:absolute;
	margin-left:-6px;
	margin-top:-6px;
	background-color:#c0c0c0;
	width:12px;
	height:12px;
  border-radius:50%;
}
div#sbPanelRing p{
  background-color:#fff;
	  width:6px;
	  height:6px;
  margin: 3px;
  border-radius:50%;
}

div#sbPanelCover, div#hPanelCover {
	position:absolute;
	top:0;
	left:0;
	background-color:#000;
	opacity:0;
							cursor : crosshair;
}

p#colorInfo{
  margin:6px;
  line-height:24px;
}

window.addEvent('domready', function() {( function(globe) {
			var prefixes = ["Webkit", "ms", "Moz", "O"];
var el = new Element('div'), prefix = '';
				Array.each(prefixes, function(item) {
     if(el.getStyle(item + 'Transform') !== undefined){
       prefix = item;
     };
				});

			var setRotate = function(node, deg) {
    prefix ? node.setStyle(prefix + "Transform", "rotate(" + deg + "deg)") : node.setStyle("transform", "rotate(" + deg + "deg)"); 
			};
			var ColorPicker = globe.ColorPicker = new Class({
				initialize : function(container, size, smoothness) {
					var hPanel = new Element("div", {
						id : "hPanel",
						styles : {
							width : size,
							height : size
						}
					});
					var hColorPanel = new Element("ul", {
						styles : {
							width : size,
							height : size
						}
					});
					this.size = size;
					var colorSldH = this.size * 3 / 2, s = smoothness || 6;
					var bw = Math.ceil(Math.sin(s * Math.PI / 360) * colorSldH) + 4;
					for (var i = 0; i < 360 / s; i++) {
						var h = i * s, c = new Color([h, 100, 100], "hsb");
						var li = new Element('li');
						li.setStyles({
							borderTopWidth : colorSldH,
							borderTopColor : c,
							borderTopStyle : "solid",
							borderLeft : bw + "px solid transparent",
							borderRight : bw + "px solid transparent",
							borderBottom : 0,
							marginLeft : -bw,
							marginTop : -colorSldH
						});

  prefix ? 							li.setStyle(prefix + "TransformOrigin", "center bottom") : li.setStyle("transformOrigin", "center bottom"); 

						setRotate(li, h);
						li.inject(hColorPanel);
					}
					var hColorBar = this.hColorBar = new Element("div", {
						id : "hColorBar",
						styles : {
							height : size * 3 / 2,
							marginTop : -size * 3 / 2
						}
					});
    prefix ? 						hColorBar.setStyle(prefix + "TransformOrigin", "center bottom") : hColorBar.setStyle("transformOrigin", "center bottom");

					var hCenter = new Element("div", {
						id : "hCenter",
						styles : {
							width : size / 5,
							marginLeft : -size / 10 - 3,
							height : size / 5,
							marginTop : -size / 10 - 3
						}
					});

					var hPanelCover = this.hPanelCover = new Element("div", {
						id : "hPanelCover",
						styles : {
							width : size,
							height : size
						}
					});

					hColorPanel.inject(hPanel);
					hColorBar.inject(hPanel);
					hCenter.inject(hPanel);
					hPanelCover.inject(hPanel);
					var sbPanel = this.sbPanel = new Element("div", {
						id : "sbPanel",
						styles : {
							width : size,
							height : size
						}
					});

					var sbPanelRing = this.sbPanelRing = new Element("div", {
						id : "sbPanelRing",
						html : "<p></p>"
					});

					var sbPanelCover = this.sbPanelCover = new Element("div", {
						id : "sbPanelCover",
						styles : {
							width : size,
							height : size
						}
					});

					sbPanelRing.inject(sbPanel);
					sbPanelCover.inject(sbPanel);

					if (typeOf(container) == "string") {
						hPanel.inject($(container));
						sbPanel.inject($(container));
					} else {
						throw new Error("Container not found.");
					}

					var isHMove, isSBMove, self = this;
					hPanelCover.addEvent("mousedown", function(event) {
						isHMove = true;
						var x = event.client.x, y = event.client.y;
						self.setH(x, y);
					});
					sbPanelCover.addEvent("mousedown", function(event) {
						isSBMove = true;
						var x = event.client.x, y = event.client.y;
						self.setSB(x, y);
					});
					document.addEvents({
						"mousemove" : function(event) {
							var x = event.client.x, y = event.client.y;
							isHMove && self.setH(x, y);
							isSBMove && self.setSB(x, y);
						},
						"mouseup" : function() {
							isHMove = false;
							isSBMove = false;
						}
					});
				},
				setH : function(x, y) {
					var dim = this.hPanelCover.getCoordinates();
					var dx = x - dim.left - dim.width / 2, dy = y - dim.top - dim.height / 2;

					var rad = (180 + Math.atan2(-dy, -dx) * 180 / Math.PI + 360) % 360;

					this.hsb[0] = Math.round(rad + 90);

					setRotate(this.hColorBar, this.hsb[0]);
					this.sbPanel.setStyle("backgroundColor", new Color([this.hsb[0], 100, 100], "hsb"));
					this.colorChange && this.colorChange(this.hsb);
				},
				setSB : function(x, y) {
					var dim = this.sbPanelCover.getCoordinates();
					var dx = Math.min(Math.max(x - dim.left, 0), dim.width), dy = Math.min(Math.max(y - dim.top, 0), dim.height);
					this.sbPanelRing.setStyles({
						left : dx,
						top : dy
					});
					this.hsb[1] = Math.round(dx / this.size * 100);
					this.hsb[2] = Math.round((1 - dy / this.size) * 100);
					this.colorChange && this.colorChange(this.hsb);
				},
				updateColor : function(value) {
					var myColor = new Color(value);
					this.hsb = myColor.hsb;
					var self = this;

					setRotate(this.hColorBar, this.hsb[0]);
					this.sbPanel.setStyle("backgroundColor", new Color([self.hsb[0], 100, 100], "hsb"));
					var l = Math.round(this.hsb[1] / 100 * this.size), t = Math.round((1 - this.hsb[2] / 100) * this.size);
					this.sbPanelRing.setStyles({
						left : l,
						top : t
					});
					this.colorChange && this.colorChange(this.hsb);
				}
			});
		}(window));

	//Usage: new ColorPicker(container, size, smoothness)
	var colorPicker = new ColorPicker("colorPicker", 200, 3);
	colorPicker.colorChange = function(color) {
		var c = new Color(color, 'hsb');
		$('colorInfo').setStyle('color', c);
		$$('#colorInfo span.hex').set('text', c.rgbToHex());
		$$('#colorInfo span.r').set('text', c[0]);
		$$('#colorInfo span.g').set('text', c[1]);
		$$('#colorInfo span.b').set('text', c[2]);
	};
	colorPicker.updateColor("#3ea");
});