diff --git a/www/extras/colorpicker/color.js b/www/extras/colorpicker/color.js
new file mode 100644
index 000000000..43f9b29e9
--- /dev/null
+++ b/www/extras/colorpicker/color.js
@@ -0,0 +1,102 @@
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+YAHOO.util.Color = function() {
+
+    var hexchars = "0123456789ABCDEF";
+
+    var real2int = function(n) {
+        return Math.min(255, Math.round(n*256));
+    };
+
+    return {
+
+        /**
+         * HSV to RGB. h[0,360], s[0,1], v[0,1]
+         */
+        hsv2rgb: function(h,s,v) { 
+            var r,g,b,i,f,p,q,t;
+            i = Math.floor((h/60)%6);
+            f = (h/60)-i;
+            p = v*(1-s);
+            q = v*(1-f*s);
+            t = v*(1-(1-f)*s);
+            switch(i) {
+                case 0: r=v; g=t; b=p; break;
+                case 1: r=q; g=v; b=p; break;
+                case 2: r=p; g=v; b=t; break;
+                case 3: r=p; g=q; b=v; break;
+                case 4: r=t; g=p; b=v; break;
+                case 5: r=v; g=p; b=q; break;
+            }
+            //alert([h,s,v] + "-" + [r,g,b]);
+
+            return [real2int(r), real2int(g), real2int(b)];
+        },
+
+        rgb2hsv: function(r,g,b) {
+            var min,max,delta,h,s,v;
+            min = Math.min(Math.min(r,g),b);
+            max = Math.max(Math.max(r,g),b);
+            delta = max-min;
+
+            switch (max) {
+                case min: h=0; break;
+                case r:   h=(g-b)/delta; 
+                          if (g<b) {
+                              h+=360;
+                          }
+                          break;
+                case g:   h=((b-r)/delta)+120; break;
+                case b:   h=((r-g)/delta)+240; break;
+            }
+            
+            s = (max==0) ? 0 : 1-(min/max);
+
+            return {"h": h, "s": s, "v": max};
+
+        },
+
+        rgb2hex: function (r,g,b) {
+            return this.int2hex(r) + this.int2hex(g) + this.int2hex(b);
+        },
+     
+        /**
+         * Converts an int [0,255] to hex [00,FF]
+         */
+        int2hex: function(n) {
+            n = n || 0;
+            n = parseInt(n, 10);
+            if (isNaN(n)) n = 0;
+            n = Math.round(Math.min(Math.max(0, n), 255));
+
+            return hexchars.charAt((n - n % 16) / 16) + hexchars.charAt(n % 16);
+        },
+
+        hex2dec: function(hexchar) {
+            return hexchars.indexOf(hexchar.toUpperCase());
+        },
+
+        hex2rgb: function(s) { 
+            var rgb = [];
+            rgb[0] = (this.hex2dec(s.substr(0, 1)) * 16) + this.hex2dec(s.substr(1, 1));
+            rgb[1] = (this.hex2dec(s.substr(2, 1)) * 16) + this.hex2dec(s.substr(3, 1));
+            rgb[2] = (this.hex2dec(s.substr(4, 1)) * 16) + this.hex2dec(s.substr(5, 1));
+            // gLogger.debug("hex2rgb: " + str + ", " + rgb.toString());
+            return rgb;
+        },
+
+        hex2hsv: function (s) {
+            var rgb = this.hex2rgb(s);
+            return this.rgb2hsv(rgb[0], rgb[1], rgb[2]);
+        },
+
+        isValidRGB: function(a) { 
+            if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false;
+            if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false;
+            if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false;
+
+            return true;
+        }
+    }
+}();
+
diff --git a/www/extras/colorpicker/colorpicker.css b/www/extras/colorpicker/colorpicker.css
new file mode 100644
index 000000000..0b7654a82
--- /dev/null
+++ b/www/extras/colorpicker/colorpicker.css
@@ -0,0 +1,16 @@
+.colorPickerFormSwatch {
+    width: 18px;
+    height: 18px;
+    border: 1px solid black;
+    float: left;
+}
+    #ddPicker { position: absolute; background-color: #eeeeee; top: 200px; left: 20px; width: 380px; height: 260px; z-index: 1000; }
+    #ddPicker input { font-size: .85em }
+    #pickerHandle { background-color: #bbbbbb; height: 10px; cursor: move; }
+    #hueThumb { cursor:default; width:18px; height:18px; z-index: 9; position:absolute; }
+    #hueBg {-moz-outline: none; outline:0px none; position:absolute; left:216px; height:198px; width:18px; background:url(/extras/colorpicker/hue.png) no-repeat; top:18px; }
+    #pickerDiv {-moz-outline: none; outline:0px none; position:absolute; left:10px; height:187px; width:188px; background-color:#FF0000; top:20px; }
+    #pickerbg { position:absolute; z-index: 1; top:0px; left:0px; } 
+    #selector { cursor:default; width:11px; height:11px; z-index: 9; position:absolute; top:0px; left:0px; }
+    #valdiv { text-align:right; position:absolute; top: 86px; left:246px; } 
+    #swatch { position:absolute; left:260px; top:30px; height:60px; width:60px; border:2px solid #aaaaaa; }
diff --git a/www/extras/colorpicker/colorpicker.js b/www/extras/colorpicker/colorpicker.js
new file mode 100644
index 000000000..1113d44c5
--- /dev/null
+++ b/www/extras/colorpicker/colorpicker.js
@@ -0,0 +1,133 @@
+WebguiColorPicker = function() {
+    var Slider=YAHOO.widget.Slider;
+    var Color=YAHOO.util.Color;
+    var Dom=YAHOO.util.Dom;
+
+    var pickerSize=180;
+    
+    var hue,picker,panel;
+
+    // hue, int[0,359]
+    var getH = function() {
+        var h = (pickerSize - hue.getValue()) / pickerSize;
+        h = Math.round(h*360);
+        return (h == 360) ? 0 : h;
+    }
+
+    // saturation, int[0,1], left to right
+    var getS = function() {
+        return picker.getXValue() / pickerSize;
+    }
+
+    // value, int[0,1], top to bottom
+    var getV = function() {
+        return (pickerSize - picker.getYValue()) / pickerSize;
+    }
+
+    // correctly handle PNG transparency in Win IE 5.5 or higher.
+    var correctPNG = function() {
+        if (YAHOO.util.Event.isIE) {
+            for(var i=0; i<document.images.length; i++) {
+                var img = document.images[i]
+                var imgName = img.src.toUpperCase()
+                if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
+                    var imgID = (img.id) ? "id='" + img.id + "' " : ""
+                    var imgClass = (img.className) ? "class='" + img.className + "' " : ""
+                    var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
+                    var imgStyle = "display:inline-block;" + img.style.cssText 
+                    if (img.align == "left") imgStyle = "float:left;" + imgStyle
+                    if (img.align == "right") imgStyle = "float:right;" + imgStyle
+                    if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle       
+                    var strNewHTML = "<span " + imgID + imgClass + imgTitle
+                        + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+                        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+                        + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
+                    img.outerHTML = strNewHTML
+                    i = i-1
+                }
+            }
+        }
+    }
+
+    var swatchUpdate = function() {
+        var h=getH(), s=getS(), v=getV();
+
+        Dom.get("hval").value = h;
+        Dom.get("sval").value = Math.round(s*100);
+        Dom.get("vval").value = Math.round(v*100);
+
+        var rgb = Color.hsv2rgb(h, s, v);
+
+        var styleDef = "rgb(" + rgb.join(",") + ")";
+        Dom.setStyle("swatch", "background-color", styleDef);
+
+        Dom.get("rval").value = rgb[0];
+        Dom.get("gval").value = rgb[1];
+        Dom.get("bval").value = rgb[2];
+
+        Dom.get("hexval").value = Color.rgb2hex(rgb[0], rgb[1], rgb[2]);
+    };
+
+    var hueUpdate = function(newOffset) {
+        var rgb = Color.hsv2rgb(getH(), 1, 1);
+        var styleDef = "rgb(" + rgb.join(",") + ")";
+        Dom.setStyle("pickerDiv", "background-color", styleDef);
+
+        swatchUpdate();
+    };
+
+    pickerUpdate = function(newOffset) {
+        swatchUpdate();
+    };
+    var currentColorField = "";
+
+    return {
+        init: function () {
+            var thepicker = document.createElement('div');
+            thepicker.id = "ddPicker";
+            thepicker.style.display = "none";
+            document.body.appendChild(thepicker);
+        },
+
+        display: function (field) {
+            currentColorField = Dom.get(field); 
+            var extras = getWebguiProperty("extrasURL");
+            thepicker = Dom.get("ddPicker");
+            thepicker.style.top = YAHOO.util.Dom.getY(currentColorField) + "px";
+            thepicker.style.left = YAHOO.util.Dom.getX(currentColorField) + "px";
+            thepicker.style.display = "block";
+            thepicker.innerHTML = ' <div id="pickerHandle">&nbsp;</div> <div id="pickerDiv" tabindex="-1" hidefocus="true"> <img id="pickerbg" src="' + extras + 'colorpicker/pickerbg.png" alt="" /> <div id="selector"><img src="' + extras + 'colorpicker/select.gif" /></div> </div> <div id="hueBg" tabindex="-1" hidefocus="true"> <div id="hueThumb"><img src="' + extras + 'colorpicker/hline.png" /></div> </div> <div id="valdiv"> <form name="rgbform"> <br /> R <input autocomplete="off" name="rval" id="rval" type="text" value="0" size="3" maxlength="3" /> H <input autocomplete="off" name="hval" id="hval" type="text" value="0" size="3" maxlength="3" /> <br />G <input autocomplete="off" name="gval" id="gval" type="text" value="0" size="3" maxlength="3" /> S <input autocomplete="off" name="gsal" id="sval" type="text" value="0" size="3" maxlength="3" /> <br /> B <input autocomplete="off" name="bval" id="bval" type="text" value="0" size="3" maxlength="3" /> V <input autocomplete="off" name="vval" id="vval" type="text" value="0" size="3" maxlength="3" /> <br /> <br /> # <input autocomplete="off" name="hexval" id="hexval" type="text" value="0" size="6" maxlength="6" /> <br /> <input type="button" value="Set" onclick="WebguiColorPicker.setColor()" /> </form> </div> <div id="swatch">&nbsp;</div> ';
+            correctPNG();
+            hue = Slider.getVertSlider("hueBg", "hueThumb", 0, pickerSize);
+            hue.subscribe("change", hueUpdate);
+
+            picker = Slider.getSliderRegion("pickerDiv", "selector", 0, pickerSize, 0, pickerSize);
+            picker.subscribe("change", pickerUpdate);
+            hueUpdate(0);
+            panel = new YAHOO.util.DD("ddPicker");
+            panel.setHandleElId("pickerHandle");
+
+            // set field color
+            var color = currentColorField.value; 
+            color = color.substring(1,7);
+            var hsv = Color.hex2hsv(color);
+            hue.setValue(pickerSize -  Math.round((hsv["h"] * pickerSize)/360));
+            picker.setRegionValue(hsv["s"] * pickerSize, pickerSize - Math.round(hsv["v"]*128/pickerSize) +1);
+            Dom.get("hexval").value = color; 
+        },
+
+        setColor: function () {
+            var color = "#"+document.getElementById("hexval").value;
+            currentColorField.value = color;
+            currentColorField.onchange();
+            thepicker = Dom.get("ddPicker");
+            thepicker.innerHTML = "";
+            thepicker.style.display = "none";
+        }
+    }
+}();
+
+YAHOO.util.Event.on(window, "load", WebguiColorPicker.init);
+
+
+
diff --git a/www/extras/colorpicker/example.html b/www/extras/colorpicker/example.html
new file mode 100644
index 000000000..3b15e3235
--- /dev/null
+++ b/www/extras/colorpicker/example.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Slider Widget</title>
+<script type="text/javascript">
+function getWebguiProperty (propName) {
+var props = new Array();
+props["extrasURL"] = "/extras/";
+props["pageURL"] = "/home";
+return props[propName];
+}
+</script>
+<script type="text/javascript" src="/extras/yui/build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="/extras/yui/build/event/event-min.js" ></script>
+<script type="text/javascript" src="/extras/yui/build/dom/dom-min.js" ></script>
+<script type="text/javascript" src="/extras/yui/build/dragdrop/dragdrop-min.js" ></script>
+<script type="text/javascript" src="/extras/yui/build/animation/animation-min.js" ></script>
+<link type="text/css" rel="stylesheet" href="/extras/colorpicker/colorpicker.css" />
+<script type="text/javascript" src="/extras/colorpicker/color.js" ></script>
+<script type="text/javascript" src="/extras/colorpicker/key.js" ></script>
+<script type="text/javascript" src="/extras/yui/build/slider/slider-min.js" ></script>
+<script type="text/javascript" src="/extras/colorpicker/colorpicker.js"></script>
+</head>
+<body> 
+<form>
+    <a href="#" id="color_formId_swatch" style="width: 20px; height: 20px; background-color: #008000; border: 1px solid black; float: left;" onclick="WebguiColorPicker.display('color_formId');"></a>
+   <input onchange="document.getElementById('color_formId_swatch').style.backgroundColor=this.value;" 
+   maxlength="7" name="color" type="text" size="8" value="#008000" id="color_formId" />
+</form>
+
+</body>
+</html>
diff --git a/www/extras/colorpicker/hline.png b/www/extras/colorpicker/hline.png
new file mode 100644
index 000000000..e9b1649c8
Binary files /dev/null and b/www/extras/colorpicker/hline.png differ
diff --git a/www/extras/colorpicker/hue.png b/www/extras/colorpicker/hue.png
new file mode 100644
index 000000000..9a2d9c995
Binary files /dev/null and b/www/extras/colorpicker/hue.png differ
diff --git a/www/extras/colorpicker/key.js b/www/extras/colorpicker/key.js
new file mode 100644
index 000000000..f2abf53f1
--- /dev/null
+++ b/www/extras/colorpicker/key.js
@@ -0,0 +1,34 @@
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+YAHOO.util.Key = new function() {
+	// this.logger	= new ygLogger("ygEventUtil");
+	// DOM key constants 
+	this.DOM_VK_UNDEFINED               = 0x0;
+	this.DOM_VK_RIGHT_ALT               = 0x12;
+	this.DOM_VK_LEFT_ALT                = 0x12;
+	this.DOM_VK_LEFT_CONTROL            = 0x11;
+	this.DOM_VK_RIGHT_CONTROL           = 0x11;
+	this.DOM_VK_LEFT_SHIFT              = 0x10;
+	this.DOM_VK_RIGHT_SHIFT             = 0x10;
+	this.DOM_VK_META                    = 0x9D;
+	this.DOM_VK_BACK_SPACE              = 0x08;
+	this.DOM_VK_CAPS_LOCK               = 0x14;
+	this.DOM_VK_DELETE                  = 0x7F;
+	this.DOM_VK_END                     = 0x23;
+	this.DOM_VK_ENTER                   = 0x0D;
+	this.DOM_VK_ESCAPE                  = 0x1B;
+	this.DOM_VK_HOME                    = 0x24;
+	this.DOM_VK_NUM_LOCK                = 0x90;
+	this.DOM_VK_PAUSE                   = 0x13;
+	this.DOM_VK_PRINTSCREEN             = 0x9A;
+	this.DOM_VK_SCROLL_LOCK             = 0x91;
+	this.DOM_VK_SPACE                   = 0x20;
+	this.DOM_VK_TAB                     = 0x09;
+	this.DOM_VK_LEFT                    = 0x25;
+	this.DOM_VK_RIGHT                   = 0x27;
+	this.DOM_VK_UP                      = 0x26;
+	this.DOM_VK_DOWN                    = 0x28;
+	this.DOM_VK_PAGE_DOWN               = 0x22;
+	this.DOM_VK_PAGE_UP                 = 0x21;
+};
+
diff --git a/www/extras/colorpicker/pickerbg.png b/www/extras/colorpicker/pickerbg.png
new file mode 100644
index 000000000..505af9d9c
Binary files /dev/null and b/www/extras/colorpicker/pickerbg.png differ
diff --git a/www/extras/colorpicker/select.gif b/www/extras/colorpicker/select.gif
new file mode 100644
index 000000000..599f7f13a
Binary files /dev/null and b/www/extras/colorpicker/select.gif differ