New: Add a color picker when list of colors is fixed

htdocs/includes/jquery/plugins/colorpicker/jquery.colorpicker.css

+.colorpicker-picker-span{
+    display: block;
+    width: 20px;
+    height: 20px;
+    float: left;
+    border: 1px solid #000;
+    margin-right: 2px;
+    margin-bottom: 4px;
+    cursor: pointer;
+}
+
+.colorpicker-picker-info{
+    padding: 0 0 2px;
+    color: #000;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.colorpicker-picker-span:hover {
+    border: 1px solid #000;
+}
+
+.colorpicker-picker-span.active {
+    border: 1px solid #000;
+}
+
+.colorpicker-picker {
+    background-color: #EEEEEE;
+    padding: 5px;
+    display: none;
+    position: absolute;
+    top: 0;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    border: 1px solid #CCCCCC;
+    box-shadow: 2px 2px 5px #111;
+    -moz-box-shadow: 2px 2px 5px #111;
+    -webkit-box-shadow: 2px 2px 5px #111;
+}
+
+.colorpicker-trigger {
+    display: block;
+    width: 15px;
+    height: 15px;
+    border: 1px solid #000;
+    cursor: pointer;
+    background-color: #ffffff;
+}
+
+
+.colorpicker-wrap {
+    font-family: 'Trebuchet MS', Verdana, Arial, Geneva, sans-serif
+}
+
+.colorpicker-label {
+    float: left;
+    margin-right: 2px;
+}
\ No newline at end of file

htdocs/includes/jquery/plugins/colorpicker/jquery.colorpicker.js

+/*
+ * INFORMATION
+ * ---------------------------
+ * Owner:     jquery.webspirited.com
+ * Developer: Matthew Hailwood
+ * ---------------------------
+ *
+ * CHANGELOG:
+ * ---------------------------
+ * 1.1
+ * Fixed bug 01
+ * Fixed bug 02
+ *
+ * ---------------------------
+ * Bug Fix Credits:
+ * --
+ * FIXED BY LDR
+ * --
+ * * Number: 01
+ * * Bug:  Initial color should be option "selected" from select
+ * * Name: Nico <unknown>
+ * --
+ * * Number: 02
+ * * Bug: Selects Change event should be called on color pick
+ * * Name: Bob Farrell <unknown>
+ */
+(function($) {
+    $.fn.extend({
+        colorpicker: function(options) {
+
+            //Settings list and the default values
+            var defaults = {
+                label: '',
+                size: 20,
+                count: 6,
+                hide: true
+            };
+
+            var options = $.extend(defaults, options);
+            var obj;
+            var colors = {};
+
+            var wrap = $('<div class="colorpicker-wrap"></div>');
+            var label = $('<div class="colorpicker-label"></div>');
+            var trigger = $('<div class="colorpicker-trigger"></div>');
+            var picker = $('<div style="width: ' + (options.size + 4) * options.count + 'px" class="colorpicker-picker"></div>');
+            var info = $('<div class="colorpicker-picker-info"></div>');
+            var clear = $('<div style="clear:both;"></div>');
+
+            var clickcount=0;
+            
+            return this.each(function() {
+                obj = this;
+
+                //build an array of colors
+                $(obj).children('option').each(function(i, elm) {
+                    colors[i] = {};
+                    colors[i].color = $(elm).text();
+                    colors[i].value = $(elm).val();
+                });
+                create_wrap();
+                if (options.label != '')
+                    create_label();
+                create_trigger();
+                create_picker();
+                wrap.append(label);
+                wrap.append(trigger);
+                wrap.append(picker);
+                wrap.append(clear);
+                $(obj).after(wrap);
+                if (options.hide)
+                    $(obj).css({
+                        position: 'absolute',
+                        left: -10000
+                    });
+            });
+
+
+            function create_wrap() {
+            	wrap.click(function() {
+            		clickcount++;
+            		if (clickcount % 2 == 0) { picker.fadeOut('fast'); }
+            	});
+                wrap.mouseleave(function() {
+                    /* picker.fadeOut('fast'); */
+                });
+            }
+
+            function create_label() {
+                label.text(options.label);
+                label.click(function() {
+                    trigger.click()
+                });
+            }
+
+            function create_trigger() {
+                trigger.click(function() {
+                    var offset = $(this).position();
+                    var top = offset.top;
+                    var left = offset.left + $(this).width() + 5;
+                	if ((left + (options.size + 4) * options.count) > $(window).width()) 
+                	{
+                		left = offset.left - (options.size + 4) * options.count - 15;
+                	}
+                    $(picker).css({
+                        'top': top,
+                        'left': left
+                    }).fadeIn('fast');
+                });
+            }
+
+            function create_picker() {
+                picker.append(info);
+                for (var i in colors) {
+                    picker.append('<span class="colorpicker-picker-span ' + (colors[i].color == $(obj).children(":selected").text() ? ' active' : '') + '" rel="' + colors[i].color + '" style="background-color: #' + colors[i].color + '; width: ' + options.size + 'px; height: ' + options.size + 'px;"></span>');
+                }
+                trigger.css('background-color', '#'+$(obj).children(":selected").text());
+                info.text($(obj).children(":selected").text());
+                picker.children(".colorpicker-picker-span").hover(function() {
+                    info.text($(this).attr('rel')!=''?$(this).attr('rel'):'-');
+                }, function() {
+                    info.text(picker.children('.colorpicker-picker-span.active').attr('rel'));
+                });
+                picker.delegate(".colorpicker-picker-span", "click", function() {
+                    info.text($(this).attr('rel')!=''?$(this).attr('rel'):'-');
+                    $(obj).val($(this).attr('rel'));
+                    $(obj).change();
+                    picker.children('.colorpicker-picker-span.active').removeClass('active');
+                    $(this).addClass('active');
+                    trigger.css('background-color', $(this).css('background-color'));
+                    picker.fadeOut('fast');
+                });
+                $(obj).after(picker);
+            }
+        }
+    });
+})(jQuery);
\ No newline at end of file