Added ColorPicker

css/colorpicker.css

@@ -0,0 +1,162 @@
+.colorpicker {
+	width: 356px;
+	height: 176px;
+	overflow: hidden;
+	position: absolute;
+	background: url(../img/colorpicker/colorpicker_background.png);
+	font-family: Arial, Helvetica, sans-serif;
+	display: none;
+	z-index: 100;
+}
+.colorpicker_color {
+	width: 150px;
+	height: 150px;
+	left: 14px;
+	top: 13px;
+	position: absolute;
+	background: #f00;
+	overflow: hidden;
+	cursor: crosshair;
+}
+.colorpicker_color div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 150px;
+	height: 150px;
+	background: url(../img/colorpicker/colorpicker_overlay.png);
+}
+.colorpicker_color div div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 11px;
+	height: 11px;
+	overflow: hidden;
+	background: url(../img/colorpicker/colorpicker_select.gif);
+	margin: -5px 0 0 -5px;
+}
+.colorpicker_hue {
+	position: absolute;
+	top: 13px;
+	left: 171px;
+	width: 35px;
+	height: 150px;
+	cursor: n-resize;
+}
+.colorpicker_hue div {
+	position: absolute;
+	width: 35px;
+	height: 9px;
+	overflow: hidden;
+	background: url(../img/colorpicker/colorpicker_indic.gif) left top;
+	margin: -4px 0 0 0;
+	left: 0px;
+}
+.colorpicker_new_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 213px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker_current_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 283px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker input {
+	background-color: transparent;
+	border: 1px solid transparent;
+	position: absolute;
+	font-size: 10px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #898989;
+	top: 4px;
+	right: 11px;
+	text-align: right;
+	margin: 0;
+	padding: 0;
+	height: 11px;
+}
+.colorpicker_hex {
+	position: absolute;
+	width: 72px;
+	height: 22px;
+	background: url(../img/colorpicker/colorpicker_hex.png) top;
+	left: 212px;
+	top: 142px;
+}
+.colorpicker_hex input {
+	right: 6px;
+}
+.colorpicker_field {
+	height: 22px;
+	width: 62px;
+	background-position: top;
+	position: absolute;
+}
+.colorpicker_field span {
+	position: absolute;
+	width: 12px;
+	height: 22px;
+	overflow: hidden;
+	top: 0;
+	right: 0;
+	cursor: n-resize;
+}
+.colorpicker_rgb_r {
+	background-image: url(../img/colorpicker/colorpicker_rgb_r.png);
+	top: 52px;
+	left: 212px;
+}
+.colorpicker_rgb_g {
+	background-image: url(../img/colorpicker/colorpicker_rgb_g.png);
+	top: 82px;
+	left: 212px;
+}
+.colorpicker_rgb_b {
+	background-image: url(../img/colorpicker/colorpicker_rgb_b.png);
+	top: 112px;
+	left: 212px;
+}
+.colorpicker_hsb_h {
+	background-image: url(../img/colorpicker/colorpicker_hsb_h.png);
+	top: 52px;
+	left: 282px;
+}
+.colorpicker_hsb_s {
+	background-image: url(../img/colorpicker/colorpicker_hsb_s.png);
+	top: 82px;
+	left: 282px;
+}
+.colorpicker_hsb_b {
+	background-image: url(../img/colorpicker/colorpicker_hsb_b.png);
+	top: 112px;
+	left: 282px;
+}
+.colorpicker_submit {
+	position: absolute;
+	width: 22px;
+	height: 22px;
+	background: url(../img/colorpicker/colorpicker_submit.png) top;
+	left: 322px;
+	top: 142px;
+	overflow: hidden;
+}
+.colorpicker_focus {
+	background-position: center;
+}
+.colorpicker_hex.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_submit.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_slider {
+	background-position: bottom;
+}

index.html

@@ -5,7 +5,7 @@
   <title>CSS3 Please! The Cross-Browser CSS3 Rule Generator</title>
 
   <link rel="stylesheet" href="http://peterned.home.xs4all.nl/matrices/matrices.css">
-
+  <link rel="stylesheet" href="css/colorpicker.css">
   <link rel="stylesheet" href="css/stylesheet.css" media="screen">
 
 <script>if (((navigator.plugins && typeof navigator.plugins['Shockwave Flash'] == 'object') || (window.ActiveXObject && (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')))) && location.protocol != 'file:') document.documentElement.className = 'flash';</script>
@@ -340,6 +340,7 @@ <h1>
 /*
     __Changelog__
 
+    2012.02.09: Added colorpicker for hex values. (thx <a href="https://github.com/uxder">uxder</a>)
     2012.01.21: Added transform scale and 3d transforms.(thx <a href="https://github.com/uxder">uxder</a>)
     2012.01.19: Linear Gradient Syntax <a href="https://github.com/paulirish/css3please/issues/78">Updated</a>. (thx <a href="http://cssdeck.com">cssdeck</a> and <a href="https://github.com/uxder">uxder</a>!)
     2012.01.14: Added <code>tab-size</code>. (Blame <a href="http://mathiasbynens.be/">Mathias</a> if anything breaks!)

javascript/javascript.js

@@ -295,7 +295,7 @@ window.generator = {
 		return values;
 	},
 	grabAndSet : function(elem){
-
+		
         var item = -1;
         allValues = generator.collectAllValues( $(elem).closest('.declaration-block')[0] || $(elem).closest('.rule')[0] ),
         group = elem.parentNode.getAttribute('g'),
@@ -556,13 +556,45 @@ $(document).ready(function () {
 	    $('#box_gradient,#box_rgba').find('a.off').click();
 	}
 
-
+	//create colorpicker
+	colorPicker.load("b[i='s2Hex']", 'hex');
 });
 
 $(window).load(function(){
 	setTimeout(copypasta,1000);
 })
 
+window.colorPicker = {
+	_currentTarget: "",
+	_colors: {},
+	load: function(selector, colorType) {
+		var cp = this;
+		$(selector).ColorPicker({
+			onBeforeShow: function () {
+				var span = $(this),
+					text = span.text();
+					
+				cp._currentTarget = span; //workaround to colorpicker plugin not preseving current element?
+				span.ColorPickerSetColor(text); //set the colorpicker value
+			},
+			onChange: function (hsb, hex, rgb) {
+				cp._colors = {
+					hsl: hsb,
+					hex: hex,
+					rgb: rgb
+				};
+			},
+			onHide: function(){
+				//update the colors
+				var input = cp._currentTarget.find('input');
+				input.val("#" + cp._colors[colorType]);
+				generator.grabAndSet(input[0]); 
+			}
+		});
+	}
+}
+
+
 window.css = {
 	'text-shadow': '2px 2px 2px #000;',
 	'filter': 'Shadow(Color=#666666, Direction=135, Strength=5);'