Adding the javascript colorpicker plugin to application

The helpers 'colorpicker_field' and 'colorpicker_field_tag' were created to facilitate the usability of the colorpicker (ActionItem1520)

Adding the javascript colorpicker plugin to application
The helpers 'colorpicker_field' and 'colorpicker_field_tag' were created to facilitate the usability of the colorpicker (ActionItem1520)
Leandro Santos · Joenio Costa
1 parent fcd6492a
Showing 10 changed files with 643 additions and 1 deletions Show diff stats
app/helpers/application_helper.rb
app/views/layouts/_javascript.rhtml
public/images/colorpicker/apply.png
public/images/colorpicker/gradiente.png
public/images/colorpicker/indic.gif
public/images/colorpicker/overlay.png
public/images/colorpicker/select.gif
public/javascripts/colorpicker-noosfero.js
public/javascripts/colorpicker.js
public/stylesheets/colorpicker.css
@@ -917,6 +917,7 @@ module ApplicationHelper
       'application',
       'thickbox',
       'lightbox',
+      'colorpicker',
       pngfix_stylesheet_path,
     ]
   end
@@ -948,5 +949,12 @@ module ApplicationHelper
     content
   end
+  def colorpicker_field(object_name, method, options = {})
+    text_field(object_name, method, options.merge(:class => 'colorpicker_field'))
+  end
+
+  def colorpicker_field_tag(name, value = nil, options = {})
+    text_field_tag(name, value, options.merge(:class => 'colorpicker_field'))
+  end
 end
-<%= javascript_include_tag :defaults, 'jquery-latest.js', 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', :cache => 'cache-general' %>
+<%= javascript_include_tag :defaults, 'jquery-latest.js', 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', 'colorpicker', 'colorpicker-noosfero', :cache => 'cache-general' %>
@@ -0,0 +1,19 @@
+(function($) {
+
+  $('.colorpicker_field').live('click focus', function() {
+    $(this).ColorPicker({
+      livePreview: true,
+      onSubmit: function(hsb, hex, rgb, el) {
+        $(el).val(hex);
+        $(el).ColorPickerHide();
+      },
+      onBeforeShow: function () {
+        $(this).ColorPickerSetColor(this.value);
+      }
+    })
+    .bind('keyup', function(){
+      $(this).ColorPickerSetColor(this.value);
+    });
+  });
+
+})(jQuery);
@@ -0,0 +1,484 @@
+/**
+ *
+ * Color picker
+ * Author: Stefan Petre www.eyecon.ro
+ * 
+ * Dual licensed under the MIT and GPL licenses
+ * 
+ */
+(function ($) {
+	var ColorPicker = function () {
+		var
+			ids = {},
+			inAction,
+			charMin = 65,
+			visible,
+			tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
+			defaults = {
+				eventName: 'click',
+				onShow: function () {},
+				onBeforeShow: function(){},
+				onHide: function () {},
+				onChange: function () {},
+				onSubmit: function () {},
+				color: 'ff0000',
+				livePreview: true,
+				flat: false
+			},
+			fillRGBFields = function  (hsb, cal) {
+				var rgb = HSBToRGB(hsb);
+				$(cal).data('colorpicker').fields
+					.eq(1).val(rgb.r).end()
+					.eq(2).val(rgb.g).end()
+					.eq(3).val(rgb.b).end();
+			},
+			fillHSBFields = function  (hsb, cal) {
+				$(cal).data('colorpicker').fields
+					.eq(4).val(hsb.h).end()
+					.eq(5).val(hsb.s).end()
+					.eq(6).val(hsb.b).end();
+			},
+			fillHexFields = function (hsb, cal) {
+				$(cal).data('colorpicker').fields
+					.eq(0).val(HSBToHex(hsb)).end();
+			},
+			setSelector = function (hsb, cal) {
+				$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
+				$(cal).data('colorpicker').selectorIndic.css({
+					left: parseInt(150 * hsb.s/100, 10),
+					top: parseInt(150 * (100-hsb.b)/100, 10)
+				});
+			},
+			setHue = function (hsb, cal) {
+				$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
+			},
+			setCurrentColor = function (hsb, cal) {
+				$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
+			},
+			setNewColor = function (hsb, cal) {
+				$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
+			},
+			keyDown = function (ev) {
+				var pressedKey = ev.charCode || ev.keyCode || -1;
+				if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
+					return false;
+				}
+				var cal = $(this).parent().parent();
+				if (cal.data('colorpicker').livePreview === true) {
+					change.apply(this);
+				}
+			},
+			change = function (ev) {
+				var cal = $(this).parent().parent(), col;
+				if (this.parentNode.className.indexOf('_hex') > 0) {
+					cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
+				} else if (this.parentNode.className.indexOf('_hsb') > 0) {
+					cal.data('colorpicker').color = col = fixHSB({
+						h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
+						s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
+						b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
+					});
+				} else {
+					cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
+						r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
+						g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
+						b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
+					}));
+				}
+				if (ev) {
+					fillRGBFields(col, cal.get(0));
+					fillHexFields(col, cal.get(0));
+					fillHSBFields(col, cal.get(0));
+				}
+				setSelector(col, cal.get(0));
+				setHue(col, cal.get(0));
+				setNewColor(col, cal.get(0));
+				cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
+			},
+			blur = function (ev) {
+				var cal = $(this).parent().parent();
+				cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
+			},
+			focus = function () {
+				charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
+				$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
+				$(this).parent().addClass('colorpicker_focus');
+			},
+			downIncrement = function (ev) {
+				var field = $(this).parent().find('input').focus();
+				var current = {
+					el: $(this).parent().addClass('colorpicker_slider'),
+					max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
+					y: ev.pageY,
+					field: field,
+					val: parseInt(field.val(), 10),
+					preview: $(this).parent().parent().data('colorpicker').livePreview					
+				};
+				$(document).bind('mouseup', current, upIncrement);
+				$(document).bind('mousemove', current, moveIncrement);
+			},
+			moveIncrement = function (ev) {
+				ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
+				if (ev.data.preview) {
+					change.apply(ev.data.field.get(0), [true]);
+				}
+				return false;
+			},
+			upIncrement = function (ev) {
+				change.apply(ev.data.field.get(0), [true]);
+				ev.data.el.removeClass('colorpicker_slider').find('input').focus();
+				$(document).unbind('mouseup', upIncrement);
+				$(document).unbind('mousemove', moveIncrement);
+				return false;
+			},
+			downHue = function (ev) {
+				var current = {
+					cal: $(this).parent(),
+					y: $(this).offset().top
+				};
+				current.preview = current.cal.data('colorpicker').livePreview;
+				$(document).bind('mouseup', current, upHue);
+				$(document).bind('mousemove', current, moveHue);
+			},
+			moveHue = function (ev) {
+				change.apply(
+					ev.data.cal.data('colorpicker')
+						.fields
+						.eq(4)
+						.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
+						.get(0),
+					[ev.data.preview]
+				);
+				return false;
+			},
+			upHue = function (ev) {
+				fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
+				fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
+				$(document).unbind('mouseup', upHue);
+				$(document).unbind('mousemove', moveHue);
+				return false;
+			},
+			downSelector = function (ev) {
+				var current = {
+					cal: $(this).parent(),
+					pos: $(this).offset()
+				};
+				current.preview = current.cal.data('colorpicker').livePreview;
+				$(document).bind('mouseup', current, upSelector);
+				$(document).bind('mousemove', current, moveSelector);
+			},
+			moveSelector = function (ev) {
+				change.apply(
+					ev.data.cal.data('colorpicker')
+						.fields
+						.eq(6)
+						.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
+						.end()
+						.eq(5)
+						.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
+						.get(0),
+					[ev.data.preview]
+				);
+				return false;
+			},
+			upSelector = function (ev) {
+				fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
+				fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
+				$(document).unbind('mouseup', upSelector);
+				$(document).unbind('mousemove', moveSelector);
+				return false;
+			},
+			enterSubmit = function (ev) {
+				$(this).addClass('colorpicker_focus');
+			},
+			leaveSubmit = function (ev) {
+				$(this).removeClass('colorpicker_focus');
+			},
+			clickSubmit = function (ev) {
+				var cal = $(this).parent();
+				var col = cal.data('colorpicker').color;
+				cal.data('colorpicker').origColor = col;
+				setCurrentColor(col, cal.get(0));
+				cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
+			},
+			show = function (ev) {
+				var cal = $('#' + $(this).data('colorpickerId'));
+				cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
+				var pos = $(this).offset();
+				var viewPort = getViewport();
+				var top = pos.top + this.offsetHeight;
+				var left = pos.left;
+				if (top + 176 > viewPort.t + viewPort.h) {
+					top -= this.offsetHeight + 176;
+				}
+				if (left + 356 > viewPort.l + viewPort.w) {
+					left -= 356;
+				}
+				cal.css({left: left + 'px', top: top + 'px'});
+				if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
+					cal.show();
+				}
+				$(document).bind('mousedown', {cal: cal}, hide);
+				return false;
+			},
+			hide = function (ev) {
+				if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
+					if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
+						ev.data.cal.hide();
+					}
+					$(document).unbind('mousedown', hide);
+				}
+			},
+			isChildOf = function(parentEl, el, container) {
+				if (parentEl == el) {
+					return true;
+				}
+				if (parentEl.contains) {
+					return parentEl.contains(el);
+				}
+				if ( parentEl.compareDocumentPosition ) {
+					return !!(parentEl.compareDocumentPosition(el) & 16);
+				}
+				var prEl = el.parentNode;
+				while(prEl && prEl != container) {
+					if (prEl == parentEl)
+						return true;
+					prEl = prEl.parentNode;
+				}
+				return false;
+			},
+			getViewport = function () {
+				var m = document.compatMode == 'CSS1Compat';
+				return {
+					l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
+					t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
+					w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
+					h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
+				};
+			},
+			fixHSB = function (hsb) {
+				return {
+					h: Math.min(360, Math.max(0, hsb.h)),
+					s: Math.min(100, Math.max(0, hsb.s)),
+					b: Math.min(100, Math.max(0, hsb.b))
+				};
+			}, 
+			fixRGB = function (rgb) {
+				return {
+					r: Math.min(255, Math.max(0, rgb.r)),
+					g: Math.min(255, Math.max(0, rgb.g)),
+					b: Math.min(255, Math.max(0, rgb.b))
+				};
+			},
+			fixHex = function (hex) {
+				var len = 6 - hex.length;
+				if (len > 0) {
+					var o = [];
+					for (var i=0; i<len; i++) {
+						o.push('0');
+					}
+					o.push(hex);
+					hex = o.join('');
+				}
+				return hex;
+			}, 
+			HexToRGB = function (hex) {
+				var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
+				return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
+			},
+			HexToHSB = function (hex) {
+				return RGBToHSB(HexToRGB(hex));
+			},
+			RGBToHSB = function (rgb) {
+				var hsb = {
+					h: 0,
+					s: 0,
+					b: 0
+				};
+				var min = Math.min(rgb.r, rgb.g, rgb.b);
+				var max = Math.max(rgb.r, rgb.g, rgb.b);
+				var delta = max - min;
+				hsb.b = max;
+				if (max != 0) {
+					
+				}
+				hsb.s = max != 0 ? 255 * delta / max : 0;
+				if (hsb.s != 0) {
+					if (rgb.r == max) {
+						hsb.h = (rgb.g - rgb.b) / delta;
+					} else if (rgb.g == max) {
+						hsb.h = 2 + (rgb.b - rgb.r) / delta;
+					} else {
+						hsb.h = 4 + (rgb.r - rgb.g) / delta;
+					}
+				} else {
+					hsb.h = -1;
+				}
+				hsb.h *= 60;
+				if (hsb.h < 0) {
+					hsb.h += 360;
+				}
+				hsb.s *= 100/255;
+				hsb.b *= 100/255;
+				return hsb;
+			},
+			HSBToRGB = function (hsb) {
+				var rgb = {};
+				var h = Math.round(hsb.h);
+				var s = Math.round(hsb.s*255/100);
+				var v = Math.round(hsb.b*255/100);
+				if(s == 0) {
+					rgb.r = rgb.g = rgb.b = v;
+				} else {
+					var t1 = v;
+					var t2 = (255-s)*v/255;
+					var t3 = (t1-t2)*(h%60)/60;
+					if(h==360) h = 0;
+					if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
+					else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
+					else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
+					else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
+					else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
+					else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
+					else {rgb.r=0; rgb.g=0;	rgb.b=0}
+				}
+				return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+			},
+			RGBToHex = function (rgb) {
+				var hex = [
+					rgb.r.toString(16),
+					rgb.g.toString(16),
+					rgb.b.toString(16)
+				];
+				$.each(hex, function (nr, val) {
+					if (val.length == 1) {
+						hex[nr] = '0' + val;
+					}
+				});
+				return hex.join('');
+			},
+			HSBToHex = function (hsb) {
+				return RGBToHex(HSBToRGB(hsb));
+			},
+			restoreOriginal = function () {
+				var cal = $(this).parent();
+				var col = cal.data('colorpicker').origColor;
+				cal.data('colorpicker').color = col;
+				fillRGBFields(col, cal.get(0));
+				fillHexFields(col, cal.get(0));
+				fillHSBFields(col, cal.get(0));
+				setSelector(col, cal.get(0));
+				setHue(col, cal.get(0));
+				setNewColor(col, cal.get(0));
+			};
+		return {
+			init: function (opt) {
+				opt = $.extend({}, defaults, opt||{});
+				if (typeof opt.color == 'string') {
+					opt.color = HexToHSB(opt.color);
+				} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
+					opt.color = RGBToHSB(opt.color);
+				} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
+					opt.color = fixHSB(opt.color);
+				} else {
+					return this;
+				}
+				return this.each(function () {
+					if (!$(this).data('colorpickerId')) {
+						var options = $.extend({}, opt);
+						options.origColor = opt.color;
+						var id = 'collorpicker_' + parseInt(Math.random() * 1000);
+						$(this).data('colorpickerId', id);
+						var cal = $(tpl).attr('id', id);
+						if (options.flat) {
+							cal.appendTo(this).show();
+						} else {
+							cal.appendTo(document.body);
+						}
+						options.fields = cal
+											.find('input')
+												.bind('keyup', keyDown)
+												.bind('change', change)
+												.bind('blur', blur)
+												.bind('focus', focus);
+						cal
+							.find('span').bind('mousedown', downIncrement).end()
+							.find('>div.colorpicker_current_color').bind('click', restoreOriginal);
+						options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
+						options.selectorIndic = options.selector.find('div div');
+						options.el = this;
+						options.hue = cal.find('div.colorpicker_hue div');
+						cal.find('div.colorpicker_hue').bind('mousedown', downHue);
+						options.newColor = cal.find('div.colorpicker_new_color');
+						options.currentColor = cal.find('div.colorpicker_current_color');
+						cal.data('colorpicker', options);
+						cal.find('div.colorpicker_submit')
+							.bind('mouseenter', enterSubmit)
+							.bind('mouseleave', leaveSubmit)
+							.bind('click', clickSubmit);
+						fillRGBFields(options.color, cal.get(0));
+						fillHSBFields(options.color, cal.get(0));
+						fillHexFields(options.color, cal.get(0));
+						setHue(options.color, cal.get(0));
+						setSelector(options.color, cal.get(0));
+						setCurrentColor(options.color, cal.get(0));
+						setNewColor(options.color, cal.get(0));
+						if (options.flat) {
+							cal.css({
+								position: 'relative',
+								display: 'block'
+							});
+						} else {
+							$(this).bind(options.eventName, show);
+						}
+					}
+				});
+			},
+			showPicker: function() {
+				return this.each( function () {
+					if ($(this).data('colorpickerId')) {
+						show.apply(this);
+					}
+				});
+			},
+			hidePicker: function() {
+				return this.each( function () {
+					if ($(this).data('colorpickerId')) {
+						$('#' + $(this).data('colorpickerId')).hide();
+					}
+				});
+			},
+			setColor: function(col) {
+				if (typeof col == 'string') {
+					col = HexToHSB(col);
+				} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
+					col = RGBToHSB(col);
+				} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
+					col = fixHSB(col);
+				} else {
+					return this;
+				}
+				return this.each(function(){
+					if ($(this).data('colorpickerId')) {
+						var cal = $('#' + $(this).data('colorpickerId'));
+						cal.data('colorpicker').color = col;
+						cal.data('colorpicker').origColor = col;
+						fillRGBFields(col, cal.get(0));
+						fillHSBFields(col, cal.get(0));
+						fillHexFields(col, cal.get(0));
+						setHue(col, cal.get(0));
+						setSelector(col, cal.get(0));
+						setCurrentColor(col, cal.get(0));
+						setNewColor(col, cal.get(0));
+					}
+				});
+			}
+		};
+	}();
+	$.fn.extend({
+		ColorPicker: ColorPicker.init,
+		ColorPickerHide: ColorPicker.hidePicker,
+		ColorPickerShow: ColorPicker.showPicker,
+		ColorPickerSetColor: ColorPicker.setColor
+	});
+})(jQuery)
@@ -0,0 +1,131 @@
+.colorpicker {
+	width: 262px;
+	height: 176px;
+        z-index: 600;
+	overflow: hidden;
+	position: absolute;
+	background: #f4f4f4 url(../images/colorpicker/gradiente.png) 179px 12px no-repeat;
+	border: 1px solid #555;
+	font-family: Arial, Helvetica, sans-serif;
+	display: none;
+}
+.colorpicker_color {
+	width: 150px;
+	height: 150px;
+	left: 14px;
+	top: 13px;
+	position: absolute;
+	background: #f00;
+	overflow: hidden;
+	cursor: crosshair;
+        border: 1px solid #555;
+}
+.colorpicker_color div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 150px;
+	height: 150px;
+	background: url(../images/colorpicker/overlay.png);
+}
+.colorpicker_color div div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 11px;
+	height: 11px;
+	overflow: hidden;
+	background: url(../images/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(../images/colorpicker/indic.gif) left top;
+	margin: -4px 0 0 0;
+	left: 0px;
+}
+.colorpicker_current_color {
+	position: absolute;
+	width: 32px;
+	height: 32px;
+	left: 213px;
+	top: 13px;
+	background: #f00;
+        border: 1px solid #555;
+        -moz-border-radius: 6px;
+        border-radius: 6px;
+}
+.colorpicker_new_color {
+	position: absolute;
+	width: 32px;
+	height: 32px;
+	left: 213px;
+	top: 53px;
+	background: #f00;
+        border: 1px solid #555;
+        -moz-border-radius: 6px;
+        border-radius: 6px;
+}
+.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_field {
+	height: 22px;
+	width: 62px;
+	background-position: top;
+}
+.colorpicker_field span {
+	position: absolute;
+	width: 12px;
+	height: 22px;
+	overflow: hidden;
+	top: 0;
+	right: 0;
+	cursor: n-resize;
+}
+.colorpicker_rgb_r, .colorpicker_rgb_g, .colorpicker_rgb_b, .colorpicker_hsb_h, .colorpicker_hsb_s, .colorpicker_hsb_b, .colorpicker_hex {
+  display: none;
+}
+.colorpicker_submit {
+	position: absolute;
+	width: 32px;
+	height: 32px;
+	background: url(../images/colorpicker/apply.png) top;
+	right: 15px;
+	bottom: 10px;
+	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;
+}
@@ -0,0 +1,19 @@		@@ -0,0 +1,19 @@
	1	+(function($) {
	2	+
	3	+ $('.colorpicker_field').live('click focus', function() {
	4	+ $(this).ColorPicker({
	5	+ livePreview: true,
	6	+ onSubmit: function(hsb, hex, rgb, el) {
	7	+ $(el).val(hex);
	8	+ $(el).ColorPickerHide();
	9	+ },
	10	+ onBeforeShow: function () {
	11	+ $(this).ColorPickerSetColor(this.value);
	12	+ }
	13	+ })
	14	+ .bind('keyup', function(){
	15	+ $(this).ColorPickerSetColor(this.value);
	16	+ });
	17	+ });
	18	+
	19	+})(jQuery);
@@ -0,0 +1,484 @@		@@ -0,0 +1,484 @@
	1	+/**
	2	+ *
	3	+ * Color picker
	4	+ * Author: Stefan Petre www.eyecon.ro
	5	+ *
	6	+ * Dual licensed under the MIT and GPL licenses
	7	+ *
	8	+ */
	9	+(function ($) {
	10	+ var ColorPicker = function () {
	11	+ var
	12	+ ids = {},
	13	+ inAction,
	14	+ charMin = 65,
	15	+ visible,
	16	+ tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
	17	+ defaults = {
	18	+ eventName: 'click',
	19	+ onShow: function () {},
	20	+ onBeforeShow: function(){},
	21	+ onHide: function () {},
	22	+ onChange: function () {},
	23	+ onSubmit: function () {},
	24	+ color: 'ff0000',
	25	+ livePreview: true,
	26	+ flat: false
	27	+ },
	28	+ fillRGBFields = function (hsb, cal) {
	29	+ var rgb = HSBToRGB(hsb);
	30	+ $(cal).data('colorpicker').fields
	31	+ .eq(1).val(rgb.r).end()
	32	+ .eq(2).val(rgb.g).end()
	33	+ .eq(3).val(rgb.b).end();
	34	+ },
	35	+ fillHSBFields = function (hsb, cal) {
	36	+ $(cal).data('colorpicker').fields
	37	+ .eq(4).val(hsb.h).end()
	38	+ .eq(5).val(hsb.s).end()
	39	+ .eq(6).val(hsb.b).end();
	40	+ },
	41	+ fillHexFields = function (hsb, cal) {
	42	+ $(cal).data('colorpicker').fields
	43	+ .eq(0).val(HSBToHex(hsb)).end();
	44	+ },
	45	+ setSelector = function (hsb, cal) {
	46	+ $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
	47	+ $(cal).data('colorpicker').selectorIndic.css({
	48	+ left: parseInt(150 * hsb.s/100, 10),
	49	+ top: parseInt(150 * (100-hsb.b)/100, 10)
	50	+ });
	51	+ },
	52	+ setHue = function (hsb, cal) {
	53	+ $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
	54	+ },
	55	+ setCurrentColor = function (hsb, cal) {
	56	+ $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
	57	+ },
	58	+ setNewColor = function (hsb, cal) {
	59	+ $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
	60	+ },
	61	+ keyDown = function (ev) {
	62	+ var pressedKey = ev.charCode \|\| ev.keyCode \|\| -1;
	63	+ if ((pressedKey > charMin && pressedKey <= 90) \|\| pressedKey == 32) {
	64	+ return false;
	65	+ }
	66	+ var cal = $(this).parent().parent();
	67	+ if (cal.data('colorpicker').livePreview === true) {
	68	+ change.apply(this);
	69	+ }
	70	+ },
	71	+ change = function (ev) {
	72	+ var cal = $(this).parent().parent(), col;
	73	+ if (this.parentNode.className.indexOf('_hex') > 0) {
	74	+ cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
	75	+ } else if (this.parentNode.className.indexOf('_hsb') > 0) {
	76	+ cal.data('colorpicker').color = col = fixHSB({
	77	+ h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
	78	+ s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
	79	+ b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
	80	+ });
	81	+ } else {
	82	+ cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
	83	+ r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
	84	+ g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
	85	+ b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
	86	+ }));
	87	+ }
	88	+ if (ev) {
	89	+ fillRGBFields(col, cal.get(0));
	90	+ fillHexFields(col, cal.get(0));
	91	+ fillHSBFields(col, cal.get(0));
	92	+ }
	93	+ setSelector(col, cal.get(0));
	94	+ setHue(col, cal.get(0));
	95	+ setNewColor(col, cal.get(0));
	96	+ cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
	97	+ },
	98	+ blur = function (ev) {
	99	+ var cal = $(this).parent().parent();
	100	+ cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
	101	+ },
	102	+ focus = function () {
	103	+ charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
	104	+ $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
	105	+ $(this).parent().addClass('colorpicker_focus');
	106	+ },
	107	+ downIncrement = function (ev) {
	108	+ var field = $(this).parent().find('input').focus();
	109	+ var current = {
	110	+ el: $(this).parent().addClass('colorpicker_slider'),
	111	+ max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
	112	+ y: ev.pageY,
	113	+ field: field,
	114	+ val: parseInt(field.val(), 10),
	115	+ preview: $(this).parent().parent().data('colorpicker').livePreview
	116	+ };
	117	+ $(document).bind('mouseup', current, upIncrement);
	118	+ $(document).bind('mousemove', current, moveIncrement);
	119	+ },
	120	+ moveIncrement = function (ev) {
	121	+ ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
	122	+ if (ev.data.preview) {
	123	+ change.apply(ev.data.field.get(0), [true]);
	124	+ }
	125	+ return false;
	126	+ },
	127	+ upIncrement = function (ev) {
	128	+ change.apply(ev.data.field.get(0), [true]);
	129	+ ev.data.el.removeClass('colorpicker_slider').find('input').focus();
	130	+ $(document).unbind('mouseup', upIncrement);
	131	+ $(document).unbind('mousemove', moveIncrement);
	132	+ return false;
	133	+ },
	134	+ downHue = function (ev) {
	135	+ var current = {
	136	+ cal: $(this).parent(),
	137	+ y: $(this).offset().top
	138	+ };
	139	+ current.preview = current.cal.data('colorpicker').livePreview;
	140	+ $(document).bind('mouseup', current, upHue);
	141	+ $(document).bind('mousemove', current, moveHue);
	142	+ },
	143	+ moveHue = function (ev) {
	144	+ change.apply(
	145	+ ev.data.cal.data('colorpicker')
	146	+ .fields
	147	+ .eq(4)
	148	+ .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
	149	+ .get(0),
	150	+ [ev.data.preview]
	151	+ );
	152	+ return false;
	153	+ },
	154	+ upHue = function (ev) {
	155	+ fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
	156	+ fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
	157	+ $(document).unbind('mouseup', upHue);
	158	+ $(document).unbind('mousemove', moveHue);
	159	+ return false;
	160	+ },
	161	+ downSelector = function (ev) {
	162	+ var current = {
	163	+ cal: $(this).parent(),
	164	+ pos: $(this).offset()
	165	+ };
	166	+ current.preview = current.cal.data('colorpicker').livePreview;
	167	+ $(document).bind('mouseup', current, upSelector);
	168	+ $(document).bind('mousemove', current, moveSelector);
	169	+ },
	170	+ moveSelector = function (ev) {
	171	+ change.apply(
	172	+ ev.data.cal.data('colorpicker')
	173	+ .fields
	174	+ .eq(6)
	175	+ .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
	176	+ .end()
	177	+ .eq(5)
	178	+ .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
	179	+ .get(0),
	180	+ [ev.data.preview]
	181	+ );
	182	+ return false;
	183	+ },
	184	+ upSelector = function (ev) {
	185	+ fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
	186	+ fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
	187	+ $(document).unbind('mouseup', upSelector);
	188	+ $(document).unbind('mousemove', moveSelector);
	189	+ return false;
	190	+ },
	191	+ enterSubmit = function (ev) {
	192	+ $(this).addClass('colorpicker_focus');
	193	+ },
	194	+ leaveSubmit = function (ev) {
	195	+ $(this).removeClass('colorpicker_focus');
	196	+ },
	197	+ clickSubmit = function (ev) {
	198	+ var cal = $(this).parent();
	199	+ var col = cal.data('colorpicker').color;
	200	+ cal.data('colorpicker').origColor = col;
	201	+ setCurrentColor(col, cal.get(0));
	202	+ cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
	203	+ },
	204	+ show = function (ev) {
	205	+ var cal = $('#' + $(this).data('colorpickerId'));
	206	+ cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
	207	+ var pos = $(this).offset();
	208	+ var viewPort = getViewport();
	209	+ var top = pos.top + this.offsetHeight;
	210	+ var left = pos.left;
	211	+ if (top + 176 > viewPort.t + viewPort.h) {
	212	+ top -= this.offsetHeight + 176;
	213	+ }
	214	+ if (left + 356 > viewPort.l + viewPort.w) {
	215	+ left -= 356;
	216	+ }
	217	+ cal.css({left: left + 'px', top: top + 'px'});
	218	+ if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
	219	+ cal.show();
	220	+ }
	221	+ $(document).bind('mousedown', {cal: cal}, hide);
	222	+ return false;
	223	+ },
	224	+ hide = function (ev) {
	225	+ if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
	226	+ if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
	227	+ ev.data.cal.hide();
	228	+ }
	229	+ $(document).unbind('mousedown', hide);
	230	+ }
	231	+ },
	232	+ isChildOf = function(parentEl, el, container) {
	233	+ if (parentEl == el) {
	234	+ return true;
	235	+ }
	236	+ if (parentEl.contains) {
	237	+ return parentEl.contains(el);
	238	+ }
	239	+ if ( parentEl.compareDocumentPosition ) {
	240	+ return !!(parentEl.compareDocumentPosition(el) & 16);
	241	+ }
	242	+ var prEl = el.parentNode;
	243	+ while(prEl && prEl != container) {
	244	+ if (prEl == parentEl)
	245	+ return true;
	246	+ prEl = prEl.parentNode;
	247	+ }
	248	+ return false;
	249	+ },
	250	+ getViewport = function () {
	251	+ var m = document.compatMode == 'CSS1Compat';
	252	+ return {
	253	+ l : window.pageXOffset \|\| (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
	254	+ t : window.pageYOffset \|\| (m ? document.documentElement.scrollTop : document.body.scrollTop),
	255	+ w : window.innerWidth \|\| (m ? document.documentElement.clientWidth : document.body.clientWidth),
	256	+ h : window.innerHeight \|\| (m ? document.documentElement.clientHeight : document.body.clientHeight)
	257	+ };
	258	+ },
	259	+ fixHSB = function (hsb) {
	260	+ return {
	261	+ h: Math.min(360, Math.max(0, hsb.h)),
	262	+ s: Math.min(100, Math.max(0, hsb.s)),
	263	+ b: Math.min(100, Math.max(0, hsb.b))
	264	+ };
	265	+ },
	266	+ fixRGB = function (rgb) {
	267	+ return {
	268	+ r: Math.min(255, Math.max(0, rgb.r)),
	269	+ g: Math.min(255, Math.max(0, rgb.g)),
	270	+ b: Math.min(255, Math.max(0, rgb.b))
	271	+ };
	272	+ },
	273	+ fixHex = function (hex) {
	274	+ var len = 6 - hex.length;
	275	+ if (len > 0) {
	276	+ var o = [];
	277	+ for (var i=0; i<len; i++) {
	278	+ o.push('0');
	279	+ }
	280	+ o.push(hex);
	281	+ hex = o.join('');
	282	+ }
	283	+ return hex;
	284	+ },
	285	+ HexToRGB = function (hex) {
	286	+ var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
	287	+ return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
	288	+ },
	289	+ HexToHSB = function (hex) {
	290	+ return RGBToHSB(HexToRGB(hex));
	291	+ },
	292	+ RGBToHSB = function (rgb) {
	293	+ var hsb = {
	294	+ h: 0,
	295	+ s: 0,
	296	+ b: 0
	297	+ };
	298	+ var min = Math.min(rgb.r, rgb.g, rgb.b);
	299	+ var max = Math.max(rgb.r, rgb.g, rgb.b);
	300	+ var delta = max - min;
	301	+ hsb.b = max;
	302	+ if (max != 0) {
	303	+
	304	+ }
	305	+ hsb.s = max != 0 ? 255 * delta / max : 0;
	306	+ if (hsb.s != 0) {
	307	+ if (rgb.r == max) {
	308	+ hsb.h = (rgb.g - rgb.b) / delta;
	309	+ } else if (rgb.g == max) {
	310	+ hsb.h = 2 + (rgb.b - rgb.r) / delta;
	311	+ } else {
	312	+ hsb.h = 4 + (rgb.r - rgb.g) / delta;
	313	+ }
	314	+ } else {
	315	+ hsb.h = -1;
	316	+ }
	317	+ hsb.h *= 60;
	318	+ if (hsb.h < 0) {
	319	+ hsb.h += 360;
	320	+ }
	321	+ hsb.s *= 100/255;
	322	+ hsb.b *= 100/255;
	323	+ return hsb;
	324	+ },
	325	+ HSBToRGB = function (hsb) {
	326	+ var rgb = {};
	327	+ var h = Math.round(hsb.h);
	328	+ var s = Math.round(hsb.s*255/100);
	329	+ var v = Math.round(hsb.b*255/100);
	330	+ if(s == 0) {
	331	+ rgb.r = rgb.g = rgb.b = v;
	332	+ } else {
	333	+ var t1 = v;
	334	+ var t2 = (255-s)*v/255;
	335	+ var t3 = (t1-t2)*(h%60)/60;
	336	+ if(h==360) h = 0;
	337	+ if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
	338	+ else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
	339	+ else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
	340	+ else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
	341	+ else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
	342	+ else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
	343	+ else {rgb.r=0; rgb.g=0; rgb.b=0}
	344	+ }
	345	+ return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
	346	+ },
	347	+ RGBToHex = function (rgb) {
	348	+ var hex = [
	349	+ rgb.r.toString(16),
	350	+ rgb.g.toString(16),
	351	+ rgb.b.toString(16)
	352	+ ];
	353	+ $.each(hex, function (nr, val) {
	354	+ if (val.length == 1) {
	355	+ hex[nr] = '0' + val;
	356	+ }
	357	+ });
	358	+ return hex.join('');
	359	+ },
	360	+ HSBToHex = function (hsb) {
	361	+ return RGBToHex(HSBToRGB(hsb));
	362	+ },
	363	+ restoreOriginal = function () {
	364	+ var cal = $(this).parent();
	365	+ var col = cal.data('colorpicker').origColor;
	366	+ cal.data('colorpicker').color = col;
	367	+ fillRGBFields(col, cal.get(0));
	368	+ fillHexFields(col, cal.get(0));
	369	+ fillHSBFields(col, cal.get(0));
	370	+ setSelector(col, cal.get(0));
	371	+ setHue(col, cal.get(0));
	372	+ setNewColor(col, cal.get(0));
	373	+ };
	374	+ return {
	375	+ init: function (opt) {
	376	+ opt = $.extend({}, defaults, opt\|\|{});
	377	+ if (typeof opt.color == 'string') {
	378	+ opt.color = HexToHSB(opt.color);
	379	+ } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
	380	+ opt.color = RGBToHSB(opt.color);
	381	+ } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
	382	+ opt.color = fixHSB(opt.color);
	383	+ } else {
	384	+ return this;
	385	+ }
	386	+ return this.each(function () {
	387	+ if (!$(this).data('colorpickerId')) {
	388	+ var options = $.extend({}, opt);
	389	+ options.origColor = opt.color;
	390	+ var id = 'collorpicker_' + parseInt(Math.random() * 1000);
	391	+ $(this).data('colorpickerId', id);
	392	+ var cal = $(tpl).attr('id', id);
	393	+ if (options.flat) {
	394	+ cal.appendTo(this).show();
	395	+ } else {
	396	+ cal.appendTo(document.body);
	397	+ }
	398	+ options.fields = cal
	399	+ .find('input')
	400	+ .bind('keyup', keyDown)
	401	+ .bind('change', change)
	402	+ .bind('blur', blur)
	403	+ .bind('focus', focus);
	404	+ cal
	405	+ .find('span').bind('mousedown', downIncrement).end()
	406	+ .find('>div.colorpicker_current_color').bind('click', restoreOriginal);
	407	+ options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
	408	+ options.selectorIndic = options.selector.find('div div');
	409	+ options.el = this;
	410	+ options.hue = cal.find('div.colorpicker_hue div');
	411	+ cal.find('div.colorpicker_hue').bind('mousedown', downHue);
	412	+ options.newColor = cal.find('div.colorpicker_new_color');
	413	+ options.currentColor = cal.find('div.colorpicker_current_color');
	414	+ cal.data('colorpicker', options);
	415	+ cal.find('div.colorpicker_submit')
	416	+ .bind('mouseenter', enterSubmit)
	417	+ .bind('mouseleave', leaveSubmit)
	418	+ .bind('click', clickSubmit);
	419	+ fillRGBFields(options.color, cal.get(0));
	420	+ fillHSBFields(options.color, cal.get(0));
	421	+ fillHexFields(options.color, cal.get(0));
	422	+ setHue(options.color, cal.get(0));
	423	+ setSelector(options.color, cal.get(0));
	424	+ setCurrentColor(options.color, cal.get(0));
	425	+ setNewColor(options.color, cal.get(0));
	426	+ if (options.flat) {
	427	+ cal.css({
	428	+ position: 'relative',
	429	+ display: 'block'
	430	+ });
	431	+ } else {
	432	+ $(this).bind(options.eventName, show);
	433	+ }
	434	+ }
	435	+ });
	436	+ },
	437	+ showPicker: function() {
	438	+ return this.each( function () {
	439	+ if ($(this).data('colorpickerId')) {
	440	+ show.apply(this);
	441	+ }
	442	+ });
	443	+ },
	444	+ hidePicker: function() {
	445	+ return this.each( function () {
	446	+ if ($(this).data('colorpickerId')) {
	447	+ $('#' + $(this).data('colorpickerId')).hide();
	448	+ }
	449	+ });
	450	+ },
	451	+ setColor: function(col) {
	452	+ if (typeof col == 'string') {
	453	+ col = HexToHSB(col);
	454	+ } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
	455	+ col = RGBToHSB(col);
	456	+ } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
	457	+ col = fixHSB(col);
	458	+ } else {
	459	+ return this;
	460	+ }
	461	+ return this.each(function(){
	462	+ if ($(this).data('colorpickerId')) {
	463	+ var cal = $('#' + $(this).data('colorpickerId'));
	464	+ cal.data('colorpicker').color = col;
	465	+ cal.data('colorpicker').origColor = col;
	466	+ fillRGBFields(col, cal.get(0));
	467	+ fillHSBFields(col, cal.get(0));
	468	+ fillHexFields(col, cal.get(0));
	469	+ setHue(col, cal.get(0));
	470	+ setSelector(col, cal.get(0));
	471	+ setCurrentColor(col, cal.get(0));
	472	+ setNewColor(col, cal.get(0));
	473	+ }
	474	+ });
	475	+ }
	476	+ };
	477	+ }();
	478	+ $.fn.extend({
	479	+ ColorPicker: ColorPicker.init,
	480	+ ColorPickerHide: ColorPicker.hidePicker,
	481	+ ColorPickerShow: ColorPicker.showPicker,
	482	+ ColorPickerSetColor: ColorPicker.setColor
	483	+ });
	484	+})(jQuery)
@@ -0,0 +1,131 @@		@@ -0,0 +1,131 @@
	1	+.colorpicker {
	2	+ width: 262px;
	3	+ height: 176px;
	4	+ z-index: 600;
	5	+ overflow: hidden;
	6	+ position: absolute;
	7	+ background: #f4f4f4 url(../images/colorpicker/gradiente.png) 179px 12px no-repeat;
	8	+ border: 1px solid #555;
	9	+ font-family: Arial, Helvetica, sans-serif;
	10	+ display: none;
	11	+}
	12	+.colorpicker_color {
	13	+ width: 150px;
	14	+ height: 150px;
	15	+ left: 14px;
	16	+ top: 13px;
	17	+ position: absolute;
	18	+ background: #f00;
	19	+ overflow: hidden;
	20	+ cursor: crosshair;
	21	+ border: 1px solid #555;
	22	+}
	23	+.colorpicker_color div {
	24	+ position: absolute;
	25	+ top: 0;
	26	+ left: 0;
	27	+ width: 150px;
	28	+ height: 150px;
	29	+ background: url(../images/colorpicker/overlay.png);
	30	+}
	31	+.colorpicker_color div div {
	32	+ position: absolute;
	33	+ top: 0;
	34	+ left: 0;
	35	+ width: 11px;
	36	+ height: 11px;
	37	+ overflow: hidden;
	38	+ background: url(../images/colorpicker/select.gif);
	39	+ margin: -5px 0 0 -5px;
	40	+}
	41	+.colorpicker_hue {
	42	+ position: absolute;
	43	+ top: 13px;
	44	+ left: 171px;
	45	+ width: 35px;
	46	+ height: 150px;
	47	+ cursor: n-resize;
	48	+}
	49	+.colorpicker_hue div {
	50	+ position: absolute;
	51	+ width: 35px;
	52	+ height: 9px;
	53	+ overflow: hidden;
	54	+ background: url(../images/colorpicker/indic.gif) left top;
	55	+ margin: -4px 0 0 0;
	56	+ left: 0px;
	57	+}
	58	+.colorpicker_current_color {
	59	+ position: absolute;
	60	+ width: 32px;
	61	+ height: 32px;
	62	+ left: 213px;
	63	+ top: 13px;
	64	+ background: #f00;
	65	+ border: 1px solid #555;
	66	+ -moz-border-radius: 6px;
	67	+ border-radius: 6px;
	68	+}
	69	+.colorpicker_new_color {
	70	+ position: absolute;
	71	+ width: 32px;
	72	+ height: 32px;
	73	+ left: 213px;
	74	+ top: 53px;
	75	+ background: #f00;
	76	+ border: 1px solid #555;
	77	+ -moz-border-radius: 6px;
	78	+ border-radius: 6px;
	79	+}
	80	+.colorpicker input {
	81	+ background-color: transparent;
	82	+ border: 1px solid transparent;
	83	+ position: absolute;
	84	+ font-size: 10px;
	85	+ font-family: Arial, Helvetica, sans-serif;
	86	+ color: #898989;
	87	+ top: 4px;
	88	+ right: 11px;
	89	+ text-align: right;
	90	+ margin: 0;
	91	+ padding: 0;
	92	+ height: 11px;
	93	+}
	94	+.colorpicker_field {
	95	+ height: 22px;
	96	+ width: 62px;
	97	+ background-position: top;
	98	+}
	99	+.colorpicker_field span {
	100	+ position: absolute;
	101	+ width: 12px;
	102	+ height: 22px;
	103	+ overflow: hidden;
	104	+ top: 0;
	105	+ right: 0;
	106	+ cursor: n-resize;
	107	+}
	108	+.colorpicker_rgb_r, .colorpicker_rgb_g, .colorpicker_rgb_b, .colorpicker_hsb_h, .colorpicker_hsb_s, .colorpicker_hsb_b, .colorpicker_hex {
	109	+ display: none;
	110	+}
	111	+.colorpicker_submit {
	112	+ position: absolute;
	113	+ width: 32px;
	114	+ height: 32px;
	115	+ background: url(../images/colorpicker/apply.png) top;
	116	+ right: 15px;
	117	+ bottom: 10px;
	118	+ overflow: hidden;
	119	+}
	120	+.colorpicker_focus {
	121	+ background-position: center;
	122	+}
	123	+.colorpicker_hex.colorpicker_focus {
	124	+ background-position: bottom;
	125	+}
	126	+.colorpicker_submit.colorpicker_focus {
	127	+ background-position: bottom;
	128	+}
	129	+.colorpicker_slider {
	130	+ background-position: bottom;
	131	+}