- Replaced color picker form control with a more robust version.

docs/changelog/7.x.x.txt

@@ -4,6 +4,7 @@
    WebGUI::Operation::FormHelpers::www_formHelper and 
    WebGUI::Operation::Workflow::www_activityHelper for details.
  - Added pagination to purchase history in commerce.
+ - Replaced color picker form control with a more robust version.
  - Added keyword tagging api.
  - Added keyword tagging to Wiki.
  - Upgraded TinyMCE to 2.1.1.1.

lib/WebGUI/Form/Color.pm

@@ -89,8 +89,25 @@ Renders a color picker control.
 
 sub toHtml {
 	my $self = shift;
-	$self->session->style->setScript($self->session->url->extras('colorPicker.js'),{ type=>'text/javascript' });
-        return '<script type="text/javascript">initColorPicker("'.$self->get("name").'","'.($self->get("value")).'");</script>';
+    my $url = $self->session->url;
+    my $style = $self->session->style;
+	$style->setScript($url->extras('/yui/build/yahoo/yahoo-min.js'),{ type=>'text/javascript' });
+	$style->setScript($url->extras('/yui/build/event/event-min.js'),{ type=>'text/javascript' });
+	$style->setScript($url->extras('/yui/build/dom/dom-min.js'),{ type=>'text/javascript' });
+	$style->setScript($url->extras('/yui/build/dragdrop/dragdrop-min.js'),{ type=>'text/javascript' });
+	$style->setScript($url->extras('/yui/build/animation/animation-min.js'),{ type=>'text/javascript' });
+	$style->setLink($url->extras('/colorpicker/colorpicker.css'),{ type=>'text/css', rel=>"stylesheet" });
+	$style->setScript($url->extras('/colorpicker/color.js'),{ type=>'text/javascript' });
+	$style->setScript($url->extras('/colorpicker/key.js'),{ type=>'text/javascript' });
+	$style->setScript($url->extras('/yui/build/slider/slider-min.js'),{ type=>'text/javascript' });
+	$style->setScript($url->extras('/colorpicker/colorpicker.js'),{ type=>'text/javascript' });
+    my $id = $self->get("id");
+    my $value = $self->get("value");
+    return q| <a href="javascript:webguiColorPicker.display('|. $id. q|');" id="|. $id.q|_swatch"
+    style="width: 20px; height: 20px; background-color: |.$value.q|; border: 1px solid black; float: left;"></a>
+   <input onchange="document.getElementById('|.$id.q|_swatch').style.backgroundColor=this.value;" 
+   maxlength="7" name="|.$self->get("name").q|" type="text" size="8" value="|.$value.q|" id="|.$id.q|" />|;
+
 }
 
 1;

lib/WebGUI/Form/Textarea.pm

@@ -121,9 +121,9 @@ sub toHtml {
 		$style->setScript($url->extras("yui/build/event/event-min.js"), {type=>"text/javascript"});
 		$style->setScript($url->extras("yui/build/dom/dom-min.js"), {type=>"text/javascript"});
 		$style->setScript($url->extras("yui/build/dragdrop/dragdrop-min.js"), {type=>"text/javascript"});
-		$style->setLink($url->extras("yui-ext/resources/css/ext-all.css"), {type=>"text/css", rel=>"stylesheet"});
-		$style->setScript($url->extras("yui-ext/adapter/yui/ext-yui-adapter.js"), {type=>"text/javascript"});
-		$style->setScript($url->extras("yui-ext/ext-all.js"), {type=>"text/javascript"});
+		$style->setLink($url->extras("extjs/resources/css/ext-all.css"), {type=>"text/css", rel=>"stylesheet"});
+		$style->setScript($url->extras("extjs/adapter/yui/ext-yui-adapter.js"), {type=>"text/javascript"});
+		$style->setScript($url->extras("extjs/ext-all.js"), {type=>"text/javascript"});
 		$out .= qq|
 		<script type="text/javascript">
 			YAHOO.util.Event.addListener(window, 'load', function () {

www/extras/accordion/accordion.html

@@ -8,8 +8,8 @@
 	<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/animation/animation-min.js"></script>
-	<script type="text/javascript" src="/extras/yui-webgui/accordion.js"></script>
-	<link type="text/css" rel="stylesheet" href="/extras/yui-webgui/resources/css/accordion.css" />
+	<script type="text/javascript" src="/extras/accordion/accordion.js"></script>
+	<link type="text/css" rel="stylesheet" href="/extras/accordion/accordion.css" />
 	
 	<script type="text/javascript">
 		YAHOO.util.Event.addListener(window, 'load', function () {var myAccordion = new Accordion("myAccordion");} );

www/extras/colorPicker.js

@@ -1,216 +0,0 @@
-/**
-* MiniColorPicker v0.3
-* 	By: me [at] daantje [dot] nl
-*
-* 	Last updated: Thu Sep 16 12:59:10 CEST 2004
-*
-*	Documentation:
-*		A realy small Photoshop like color picker in DHTML.
-*		It should be compatible with MSIE and Mozilla based
-*		browsers.
-*
-*	License:
-*		GPL
-*
-*	Support:
-*		Not realy.
-*/
-
-
-//Config ammount of colors
-var bit = 16; //increase to make picker bigger (and slower)
-
-
-//define globals, don't change!
-bit = Math.round(255 / bit);
-var ConvArray = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F');
-var picked = new Array();
-var pickedColorRGB = new Array();
-var toolbarShow = new Array();
-var donePickerInits = 0;
-var clickedPicker;
-var tmr = null;
-
-
-//this function is written by Guido Socher, guido at linuxfocus dot org
-function dec2hex(value){
-    var retval = '';
-    var intnum;
-    var tmpnum;
-    var i = 0;
-
-    intnum = parseInt(value,10);
-    if (isNaN(intnum)){
-        retval = 'NaN';
-    }else{
-        while (intnum > 0.9){
-            i++;
-            tmpnum = intnum;
-            // cancatinate return string with new digit:
-            retval = ConvArray[tmpnum % 16] + retval;  
-            intnum = Math.floor(tmpnum / 16);
-            if (i > 100){
-                // break infinite loops
-                retval = 'NaN';
-                break;
-            }
-        }
-    }
-	if(retval.length == 1)
-		retval = '0' + retval;
-	else if(retval.length == 0)
-		retval = '00';
-    return retval;
-}
-
-
-function HEXcolor2RGB(value){
-	value = value.replace('#','');
-	pickedColorRGB[0] = value.substr(0,2);
-	pickedColorRGB[1] = value.substr(2,2);
-	pickedColorRGB[2] = value.substr(4,2);
-	for(i=0;i<3;i++){
-		pickedColorRGB[i] = parseInt(pickedColorRGB[i],16);
-	}
-	return pickedColorRGB;
-}
-
-
-function buildColorPicker(){
-	htmlStr = "<table border=0 cellpadding=0 cellspacing=0 width="+Math.round((255/bit) * 10)+" height="+Math.round((255/bit) * 10)+"><tr>";
-	//palet
-	for(x=0;x<=255;x=x+bit){
-		for(y=0;y<=255;y=y+bit){
-			htmlStr+= "<td id='"+x+","+y+"' onclick=\"pickColor(picked[clickedPicker],"+x+","+y+")\" unselectable=on width=10 height=10></td>";
-		}
-		htmlStr+= "</tr><tr>";
-	}
-	//grays
-	for(x=0;x<=255;x=x+bit){
-		c = dec2hex(x)+dec2hex(x)+dec2hex(x);
-		htmlStr+= "<td bgcolor=\"#"+c+"\" onclick=\"pickColor("+x+","+x+","+x+")\" unselectable=on width=10 height=10></td>";
-	} 
-	htmlStr+= "</tr></table>";
-	
-	return htmlStr;
-}
-
-
-function changePallet(R){
-	for(G=0;G<=255;G=G+bit){
-		for(B=0;B<=255;B=B+bit){
-			document.getElementById(G+','+B).style.backgroundColor = '#'+dec2hex(R)+dec2hex(G)+dec2hex(B);
-		}	
-	}
-	picked[clickedPicker] = R;
-}
-
-
-function changePickerHue(){
-	g = 0;
-	b = 255;
-	gS = 0;
-	bS = 1;
-	htmlStr = "<table border=0 cellpadding=0 cellspacing=0 width=10 height="+((255/bit) * 10)+">";
-	for(r=0;r<=255;r=r+bit){
-		c = dec2hex(r)+dec2hex(g)+dec2hex(b);
-		htmlStr+= "<tr><td bgcolor=\"#"+c+"\" onclick=\"changePallet("+r+")\" width=10 height=10></td></tr>";
-		
-		if(g == 255) gS = 1;
-		else if(g == 0) gS = 0;
-		
-		if(b == 255) bS = 1;
-		else if(b == 0) bS = 0;
-		
-		if(gS == 0)
-			g = g + 1;
-		else
-			g = g - 1;
-		
-		if(bS == 0)
-			b = b + 16;
-		else
-			b = b - 16;
-	} 
-	htmlStr+= "<tr><td bgcolor=\"#ffffff\" onclick=\"changePallet(255)\" width=10 height=10></td></tr>";
-	htmlStr+= "</table>";
-	
-	return htmlStr;
-}
-
-
-function pickColor(r,g,b){
-	c = '#'+dec2hex(r)+dec2hex(g)+dec2hex(b);
-	document.getElementById(clickedPicker).style.backgroundColor = c;
-	document.getElementById(clickedPicker+'Value').value = c;
-	changePallet(r);
-}
-
-
-function setPickedColorFromForm(obj){
-	c = HEXcolor2RGB(obj.value);
-	changePallet(c[0]);
-	document.getElementById(obj.id.replace('Value','')).style.backgroundColor = obj.value;
-}
-
-
-function placeColorPickerToolbar(obj){
-	lastClickedPicker = clickedPicker;
-	clickedPicker = obj.id;
-	if(tmr)
-		clearTimeout(tmr);
-	if(toolbarShow[obj.id] == 0){
-		toolbarShow[obj.id] = 1;
-		
-		t = obj.offsetTop + parseInt(obj.style.height)-5;
-		l = obj.offsetLeft+30;
-		while(obj.offsetParent){
-			t+= obj.offsetParent.offsetTop;
-			l+= obj.offsetParent.offsetLeft;
-			obj = obj.offsetParent;
-		}
-		document.getElementById('colorPickerTools').style.top = t+'px';
-		document.getElementById('colorPickerTools').style.left = l+'px';
-		document.getElementById('colorPickerTools').style.visibility = 'visible';
-		if(picked[clickedPicker] == null){
-			changePallet(255);
-		}else{
-			//changePallet(picked[clickedPicker]);
-			setPickedColorFromForm(document.getElementById(clickedPicker+'Value'));
-		}
-	}else if(toolbarShow[obj.id] == 1){
-		document.getElementById('colorPickerTools').style.visibility = 'hidden';
-		toolbarShow[obj.id] = 0;
-	}
-}
-	
-
-function killColorPicker(sw){
-	if(sw == 1 && clickedPicker){
-		tmr = setTimeout('placeColorPickerToolbar(document.getElementById(clickedPicker));',300);
-	}else if(tmr){
-		clearTimeout(tmr);
-	}
-}
-
-
-function initColorPicker(fieldName,fieldValue){
-	pickerScreen = buildColorPicker();
-	hueScreen = changePickerHue();
-	if(!fieldValue)
-		fieldValue = "";
-
-	if(donePickerInits == 0){
-		document.write("<div id=colorPickerTools onmouseout=\"killColorPicker(1)\" onmouseover=\"killColorPicker(0)\" style=\"z-Index:10000;visibility:hidden;cursor:crosshair;position:absolute;border:1px solid #000000;background-color:#ffffff\"></div>");
-		document.getElementById('colorPickerTools').innerHTML = '<table border=0 cellpadding=0 cellspacing=0><tr><td valign=top>'+pickerScreen+'</td><td valign=top style="border-left:1px solid #000000;">'+hueScreen+'</td></tr><tr><td colspan=2><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=50% style="background-color:#ffffff;" onclick="pickColor(255,255,255);" height=5></td><td width=50% style="background-color:#000000;" onclick="pickColor(0,0,0);" height=5></td></tr></table></td></tr></table>';
-	}
-	s = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
-	s+= "<td>&nbsp;<input type=\"text\" name=\""+fieldName+"\" id=pickedColor"+donePickerInits+"Value value=\""+fieldValue+"\" size=7 style=\"font-size:10px;\" onchange=\"setPickedColorFromForm(this)\"></td>";
-	s+= "<td><div onmouseout=\"killColorPicker(1)\" onmouseover=\"killColorPicker(0)\" onclick=\"placeColorPickerToolbar(this)\" style=\"width:15px;height:15px;border: 1px solid #000000;cursor:pointer;background-color:"+fieldValue+";\" id=pickedColor"+donePickerInits+"></div></td>";
-	s+= "</table>";
-	document.write(s);
-
-	toolbarShow["pickedColor"+donePickerInits] = 0;
-	donePickerInits++;
-}
-

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;
+        }
+    }
+}();
+

www/extras/colorpicker/colorpicker.css

@@ -0,0 +1,10 @@
+    #ddPicker { position: absolute; background-color: #eeeeee; top: 200px; left: 20px; width: 360px; height: 240px; 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; }

www/extras/colorpicker/colorpicker.js

@@ -0,0 +1,135 @@
+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;
+    }
+
+    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 ddPicker = document.createElement('div');
+            ddPicker.id = "ddPicker";
+            ddPicker.style.display = "none";
+            document.body.appendChild(ddPicker);
+        },
+
+        setColor: function () {
+            var color = "#"+document.getElementById("hexval").value;
+            currentColorField.value = color;
+            Dom.get(currentColorField.id + "_swatch").style.backgroundColor = color;
+            ddPicker = Dom.get("ddPicker");
+            ddPicker.innerHTML = "";
+            ddPicker.style.display = "none";
+        
+        },
+
+        display: function (field) {
+            currentColorField = document.getElementById(field); 
+            var extras = getWebguiProperty("extrasURL");
+            ddPicker = Dom.get("ddPicker");
+            ddPicker.style.top = YAHOO.util.Dom.getY(currentColorField) + "px";
+            ddPicker.style.left = YAHOO.util.Dom.getX(currentColorField) + "px";
+            ddPicker.style.display = "block";
+            ddPicker.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> ';
+            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"]*100/pickerSize) );
+            picker.setRegionValue(hsv["s"] * pickerSize, pickerSize - Math.round(hsv["v"]*128/pickerSize) +1);
+            Dom.get("hexval").value = color;
+        },
+    }
+}();
+
+YAHOO.util.Event.on(window, "load", webguiColorPicker.init);
+
+function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
+   {
+   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
+         }
+      }
+   }
+
+if (navigator.appName == 'Microsoft Internet Explorer') {
+    YAHOO.util.Event.addListener(window, "load", correctPNG);
+}

www/extras/colorpicker/example.html

@@ -0,0 +1,36 @@
+<!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="javascript:webguiColorPicker.display('color_formId');" id="color_formId_swatch"
+    style="width: 20px; height: 20px; background-color: #008000; border: 1px solid black; float: left;"></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>

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;
+};
+