update colorpicker.js

3 files changed, 626 insertions, 112 deletions

diff --git a/framework/Web/Javascripts/js/compressed/colorpicker.js b/framework/Web/Javascripts/js/compressed/colorpicker.js
index 27d78ac5..8429b5e6 100644
--- a/framework/Web/Javascripts/js/compressed/colorpicker.js
+++ b/framework/Web/Javascripts/js/compressed/colorpicker.js
@@ -1,4 +1,30 @@
 
+if(typeof(Rico)=="undefined")Rico={};Rico.Color=Class.create();Rico.Color.prototype={initialize:function(red,green,blue){this.rgb={r:red,g:green,b:blue};},setRed:function(r){this.rgb.r=r;},setGreen:function(g){this.rgb.g=g;},setBlue:function(b){this.rgb.b=b;},setHue:function(h){var hsb=this.asHSB();hsb.h=h;this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b);},setSaturation:function(s){var hsb=this.asHSB();hsb.s=s;this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b);},setBrightness:function(b){var hsb=this.asHSB();hsb.b=b;this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,hsb.b);},darken:function(percent){var hsb=this.asHSB();this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,Math.max(hsb.b-percent,0));},brighten:function(percent){var hsb=this.asHSB();this.rgb=Rico.Color.HSBtoRGB(hsb.h,hsb.s,Math.min(hsb.b+percent,1));},blend:function(other){this.rgb.r=Math.floor((this.rgb.r+other.rgb.r)/2);this.rgb.g=Math.floor((this.rgb.g+other.rgb.g)/2);this.rgb.b=Math.floor((this.rgb.b+other.rgb.b)/2);},isBright:function(){var hsb=this.asHSB();return this.asHSB().b>0.5;},isDark:function(){return!this.isBright();},asRGB:function(){return"rgb("+this.rgb.r+","+this.rgb.g+","+this.rgb.b+")";},asHex:function(){return"#"+this.rgb.r.toColorPart()+this.rgb.g.toColorPart()+this.rgb.b.toColorPart();},asHSB:function(){return Rico.Color.RGBtoHSB(this.rgb.r,this.rgb.g,this.rgb.b);},toString:function(){return this.asHex();}};Rico.Color.createFromHex=function(hexCode){if(hexCode.indexOf('#')==0)
+hexCode=hexCode.substring(1);var red="ff",green="ff",blue="ff";if(hexCode.length>4)
+{red=hexCode.substring(0,2);green=hexCode.substring(2,4);blue=hexCode.substring(4,6);}
+else if(hexCode.length>0&hexCode.length<4)
+{var r=hexCode.substring(0,1);var g=hexCode.substring(1,2);var b=hexCode.substring(2);red=r+r;green=g+g;blue=b+b;}
+return new Rico.Color(parseInt(red,16),parseInt(green,16),parseInt(blue,16));}
+Rico.Color.createColorFromBackground=function(elem){var actualColor=Element.getStyle($(elem),"background-color");if(actualColor=="transparent"&&elem.parent)
+return Rico.Color.createColorFromBackground(elem.parent);if(actualColor==null)
+return new Rico.Color(255,255,255);if(actualColor.indexOf("rgb(")==0){var colors=actualColor.substring(4,actualColor.length-1);var colorArray=colors.split(",");return new Rico.Color(parseInt(colorArray[0]),parseInt(colorArray[1]),parseInt(colorArray[2]));}
+else if(actualColor.indexOf("#")==0){return Rico.Color.createFromHex(actualColor);}
+else
+return new Rico.Color(255,255,255);}
+Rico.Color.HSBtoRGB=function(hue,saturation,brightness){var red=0;var green=0;var blue=0;if(saturation==0){red=parseInt(brightness*255.0+0.5);green=red;blue=red;}
+else{var h=(hue-Math.floor(hue))*6.0;var f=h-Math.floor(h);var p=brightness*(1.0-saturation);var q=brightness*(1.0-saturation*f);var t=brightness*(1.0-(saturation*(1.0-f)));switch(parseInt(h)){case 0:red=(brightness*255.0+0.5);green=(t*255.0+0.5);blue=(p*255.0+0.5);break;case 1:red=(q*255.0+0.5);green=(brightness*255.0+0.5);blue=(p*255.0+0.5);break;case 2:red=(p*255.0+0.5);green=(brightness*255.0+0.5);blue=(t*255.0+0.5);break;case 3:red=(p*255.0+0.5);green=(q*255.0+0.5);blue=(brightness*255.0+0.5);break;case 4:red=(t*255.0+0.5);green=(p*255.0+0.5);blue=(brightness*255.0+0.5);break;case 5:red=(brightness*255.0+0.5);green=(p*255.0+0.5);blue=(q*255.0+0.5);break;}}
+return{r:parseInt(red),g:parseInt(green),b:parseInt(blue)};}
+Rico.Color.RGBtoHSB=function(r,g,b){var hue;var saturaton;var brightness;var cmax=(r>g)?r:g;if(b>cmax)
+cmax=b;var cmin=(r<g)?r:g;if(b<cmin)
+cmin=b;brightness=cmax/255.0;if(cmax!=0)
+saturation=(cmax-cmin)/cmax;else
+saturation=0;if(saturation==0)
+hue=0;else{var redc=(cmax-r)/(cmax-cmin);var greenc=(cmax-g)/(cmax-cmin);var bluec=(cmax-b)/(cmax-cmin);if(r==cmax)
+hue=bluec-greenc;else if(g==cmax)
+hue=2.0+redc-bluec;else
+hue=4.0+greenc-redc;hue=hue/6.0;if(hue<0)
+hue=hue+1.0;}
+return{h:hue,s:saturation,b:brightness};}
 Prado.WebUI.TColorPicker=Class.create();Object.extend(Prado.WebUI.TColorPicker,{palettes:{Small:[["fff","fcc","fc9","ff9","ffc","9f9","9ff","cff","ccf","fcf"],["ccc","f66","f96","ff6","ff3","6f9","3ff","6ff","99f","f9f"],["c0c0c0","f00","f90","fc6","ff0","3f3","6cc","3cf","66c","c6c"],["999","c00","f60","fc3","fc0","3c0","0cc","36f","63f","c3c"],["666","900","c60","c93","990","090","399","33f","60c","939"],["333","600","930","963","660","060","366","009","339","636"],["000","300","630","633","330","030","033","006","309","303"]],Tiny:[["ffffff","00ff00","008000","0000ff"],["c0c0c0","ffff00","ff00ff","000080"],["808080","ff0000","800080","000000"]]},UIImages:{'button.gif':'button.gif','background.png':'background.png'}});Object.extend(Prado.WebUI.TColorPicker.prototype,{initialize:function(options)
 {var basics={Palette:'Small',ClassName:'TColorPicker',Mode:'Basic',OKButtonText:'OK',CancelButtonText:'Cancel',ShowColorPicker:true}
 this.element=null;this.showing=false;options=Object.extend(basics,options);this.options=options;this.input=$(options['ID']);this.button=$(options['ID']+'_button');this._buttonOnClick=this.buttonOnClick.bind(this);if(options['ShowColorPicker'])
diff --git a/framework/Web/Javascripts/js/debug/colorpicker.js b/framework/Web/Javascripts/js/debug/colorpicker.js
index a48e6dc5..1dbfaff8 100644
--- a/framework/Web/Javascripts/js/debug/colorpicker.js
+++ b/framework/Web/Javascripts/js/debug/colorpicker.js
@@ -1,8 +1,252 @@
+//-------------------- ricoColor.js

+if(typeof(Rico) == "undefined") Rico = {};

+

+Rico.Color = Class.create();

+

+Rico.Color.prototype = {

+

+   initialize: function(red, green, blue) {

+      this.rgb = { r: red, g : green, b : blue };

+   },

+

+   setRed: function(r) {

+      this.rgb.r = r;

+   },

+

+   setGreen: function(g) {

+      this.rgb.g = g;

+   },

+

+   setBlue: function(b) {

+      this.rgb.b = b;

+   },

+

+   setHue: function(h) {

+

+      // get an HSB model, and set the new hue...

+      var hsb = this.asHSB();

+      hsb.h = h;

+

+      // convert back to RGB...

+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);

+   },

+

+   setSaturation: function(s) {

+      // get an HSB model, and set the new hue...

+      var hsb = this.asHSB();

+      hsb.s = s;

+

+      // convert back to RGB and set values...

+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);

+   },

+

+   setBrightness: function(b) {

+      // get an HSB model, and set the new hue...

+      var hsb = this.asHSB();

+      hsb.b = b;

+

+      // convert back to RGB and set values...

+      this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b );

+   },

+

+   darken: function(percent) {

+      var hsb  = this.asHSB();

+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0));

+   },

+

+   brighten: function(percent) {

+      var hsb  = this.asHSB();

+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1));

+   },

+

+   blend: function(other) {

+      this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2);

+      this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2);

+      this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2);

+   },

+

+   isBright: function() {

+      var hsb = this.asHSB();

+      return this.asHSB().b > 0.5;

+   },

+

+   isDark: function() {

+      return ! this.isBright();

+   },

+

+   asRGB: function() {

+      return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")";

+   },

+

+   asHex: function() {

+      return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart();

+   },

+

+   asHSB: function() {

+      return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b);

+   },

+

+   toString: function() {

+      return this.asHex();

+   }

+

+};

+

+Rico.Color.createFromHex = function(hexCode) {

+

+   if ( hexCode.indexOf('#') == 0 )

+      hexCode = hexCode.substring(1);

+

+   var red = "ff", green = "ff", blue="ff";

+   if(hexCode.length > 4)

+	{

+	   red   = hexCode.substring(0,2);

+	   green = hexCode.substring(2,4);

+	   blue  = hexCode.substring(4,6);

+	}

+	else if(hexCode.length > 0 & hexCode.length < 4)

+	{

+	  var r = hexCode.substring(0,1);

+	  var g = hexCode.substring(1,2);

+	  var b = hexCode.substring(2);

+	  red = r+r;

+	  green = g+g;

+	  blue = b+b;

+	}

+   return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) );

+}

+

+/**

+ * Factory method for creating a color from the background of

+ * an HTML element.

+ */

+Rico.Color.createColorFromBackground = function(elem) {

+

+   var actualColor = Element.getStyle($(elem), "background-color");

+  if ( actualColor == "transparent" && elem.parent )

+      return Rico.Color.createColorFromBackground(elem.parent);

+

+   if ( actualColor == null )

+      return new Rico.Color(255,255,255);

+

+   if ( actualColor.indexOf("rgb(") == 0 ) {

+      var colors = actualColor.substring(4, actualColor.length - 1 );

+      var colorArray = colors.split(",");

+      return new Rico.Color( parseInt( colorArray[0] ),

+                            parseInt( colorArray[1] ),

+                            parseInt( colorArray[2] )  );

+

+   }

+   else if ( actualColor.indexOf("#") == 0 ) {

+	  return Rico.Color.createFromHex(actualColor);

+   }

+   else

+      return new Rico.Color(255,255,255);

+}

+

+Rico.Color.HSBtoRGB = function(hue, saturation, brightness) {

+

+   var red   = 0;

+	var green = 0;

+	var blue  = 0;

+

+   if (saturation == 0) {

+      red = parseInt(brightness * 255.0 + 0.5);

+	   green = red;

+	   blue = red;

+	}

+	else {

+      var h = (hue - Math.floor(hue)) * 6.0;

+      var f = h - Math.floor(h);

+      var p = brightness * (1.0 - saturation);

+      var q = brightness * (1.0 - saturation * f);

+      var t = brightness * (1.0 - (saturation * (1.0 - f)));

+

+      switch (parseInt(h)) {

+         case 0:

+            red   = (brightness * 255.0 + 0.5);

+            green = (t * 255.0 + 0.5);

+            blue  = (p * 255.0 + 0.5);

+            break;

+         case 1:

+            red   = (q * 255.0 + 0.5);

+            green = (brightness * 255.0 + 0.5);

+            blue  = (p * 255.0 + 0.5);

+            break;

+         case 2:

+            red   = (p * 255.0 + 0.5);

+            green = (brightness * 255.0 + 0.5);

+            blue  = (t * 255.0 + 0.5);

+            break;

+         case 3:

+            red   = (p * 255.0 + 0.5);

+            green = (q * 255.0 + 0.5);

+            blue  = (brightness * 255.0 + 0.5);

+            break;

+         case 4:

+            red   = (t * 255.0 + 0.5);

+            green = (p * 255.0 + 0.5);

+            blue  = (brightness * 255.0 + 0.5);

+            break;

+          case 5:

+            red   = (brightness * 255.0 + 0.5);

+            green = (p * 255.0 + 0.5);

+            blue  = (q * 255.0 + 0.5);

+            break;

+	    }

+	}

+

+   return { r : parseInt(red), g : parseInt(green) , b : parseInt(blue) };

+}

+

+Rico.Color.RGBtoHSB = function(r, g, b) {

+

+   var hue;

+   var saturaton;

+   var brightness;

+

+   var cmax = (r > g) ? r : g;

+   if (b > cmax)

+      cmax = b;

+

+   var cmin = (r < g) ? r : g;

+   if (b < cmin)

+      cmin = b;

+

+   brightness = cmax / 255.0;

+   if (cmax != 0)

+      saturation = (cmax - cmin)/cmax;

+   else

+      saturation = 0;

+

+   if (saturation == 0)

+      hue = 0;

+   else {

+      var redc   = (cmax - r)/(cmax - cmin);

+    	var greenc = (cmax - g)/(cmax - cmin);

+    	var bluec  = (cmax - b)/(cmax - cmin);

+

+    	if (r == cmax)

+    	   hue = bluec - greenc;

+    	else if (g == cmax)

+    	   hue = 2.0 + redc - bluec;

+      else

+    	   hue = 4.0 + greenc - redc;

+

+    	hue = hue / 6.0;

+    	if (hue < 0)

+    	   hue = hue + 1.0;

+   }

+

+   return { h : hue, s : saturation, b : brightness };

+}

+

+

 Prado.WebUI.TColorPicker = Class.create();

 

 Object.extend(Prado.WebUI.TColorPicker,

 {

-	palettes: 

+	palettes:

 	{

 		Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"],

 				["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"],

@@ -17,7 +261,7 @@ Object.extend(Prado.WebUI.TColorPicker,
 				["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]]

 	},

 

-	UIImages : 

+	UIImages :

 	{

 		'button.gif' : 'button.gif',

 //		'target_black.gif' : 'target_black.gif',

@@ -28,11 +272,11 @@ Object.extend(Prado.WebUI.TColorPicker,
 	}

 });

 

-Object.extend(Prado.WebUI.TColorPicker.prototype, 

+Object.extend(Prado.WebUI.TColorPicker.prototype,

 {

 	initialize : function(options)

 	{

-		var basics = 

+		var basics =

 		{

 			Palette : 'Small',

 			ClassName : 'TColorPicker',

@@ -41,7 +285,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			CancelButtonText : 'Cancel',

 			ShowColorPicker : true

 		}

-		

+

 		this.element = null;

 		this.showing = false;

 

@@ -57,10 +301,10 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 

 	updatePicker : function(e)

 	{

-		var color = Rico.Color.createFromHex(this.input.value);	

+		var color = Rico.Color.createFromHex(this.input.value);

 		this.button.style.backgroundColor = color.toString();

 	},

-	

+

 	buttonOnClick : function(event)

 	{

 		var mode = this.options['Mode'];

@@ -84,7 +328,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 				this.initializeFullPicker();

 		}

 		this.show(mode);

-	},		

+	},

 

 	show : function(type)

 	{

@@ -96,14 +340,14 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			this.element.style.top = (pos[1]-1) + "px";

 			this.element.style.left = pos[0] + "px";

 			this.element.style.display = "block";

-			

+

 			this.ieHack(type);

 

 			//observe for clicks on the document body

 			this._documentClickEvent = this.hideOnClick.bindEvent(this, type);

 			this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type);

 			Event.observe(document.body, "click", this._documentClickEvent);

-			Event.observe(document,"keydown", this._documentKeyDownEvent); 

+			Event.observe(document,"keydown", this._documentKeyDownEvent);

 			this.showing = true;

 

 			if(type == "Full")

@@ -115,7 +359,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			}

 		}

 	},

-	

+

 	hide : function(event)

 	{

 		if(this.showing)

@@ -126,11 +370,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			this.element.style.display = "none";

 			this.showing = false;

 			Event.stopObserving(document.body, "click", this._documentClickEvent);

-			Event.stopObserving(document,"keydown", this._documentKeyDownEvent); 

-			

+			Event.stopObserving(document,"keydown", this._documentKeyDownEvent);

+

 			if(this._observingMouseMove)

-			{			

-				Event.stopObserving(document.body, "mousemove", this._onMouseMove);	

+			{

+				Event.stopObserving(document.body, "mousemove", this._onMouseMove);

 				this._observingMouseMove = false;

 			}

 		}

@@ -152,16 +396,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			within = within || el == this.button;

 			within = within || el == this.input;

 			if(within) break;

-			el = el.parentNode;			

+			el = el.parentNode;

 		}

 		while(el);

 		if(!within) this.hide(ev);

 	},

 

-	ieHack : function() 

+	ieHack : function()

 	{

 		// IE hack

-		if(this.iePopUp) 

+		if(this.iePopUp)

 		{

 			this.iePopUp.style.display = "block";

 			this.iePopUp.style.top = (this.element.offsetTop) + "px";

@@ -204,7 +448,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 

 	cellOnClick : function(e)

 	{

-		var el = Event.element(e); 

+		var el = Event.element(e);

 		if(el.tagName.toLowerCase() != "img")

 			return;

 		var color = Rico.Color.createColorFromBackground(el);

@@ -220,15 +464,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 	},

 

 	getFullPickerContainer : function(pickerID)

-	{			

+	{

 		//create the 3 buttons

-		this.buttons = 

+		this.buttons =

 		{

 			//Less   : INPUT({value:'Less Colors', className:'button', type:'button'}),

 			OK	   : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}),

 			Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'})

 		};

-		

+

 		//create the 6 inputs

 		var inputs = {};

 		['H','S','V','R','G','B'].each(function(type)

@@ -239,13 +483,13 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		//create the HEX input

 		inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'});

 		this.inputs = inputs;

-		

+

 		var images = Prado.WebUI.TColorPicker.UIImages;

 

 		this.inputs['currentColor'] = SPAN({className:'currentColor'});

 		this.inputs['oldColor'] = SPAN({className:'oldColor'});

 

-		var inputsTable = 

+		var inputsTable =

 			TABLE({className:'inputs'}, TBODY(null,

 				TR(null,

 					TD({className:'currentcolor',colSpan:2},

@@ -258,30 +502,30 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 				TR(null,

 					TD(null,'S:'),

 					TD(null,this.inputs['S'], '%')),

-				

-				TR(null, 

+

+				TR(null,

 					TD(null,'V:'),

 					TD(null,this.inputs['V'], '%')),

-				

-				TR(null, 

+

+				TR(null,

 					TD({className:'gap'},'R:'),

 					TD({className:'gap'},this.inputs['R'])),

-				

-				TR(null, 

+

+				TR(null,

 					TD(null,'G:'),

 					TD(null, this.inputs['G'])),

 

-				TR(null, 

+				TR(null,

 					TD(null,'B:'),

 					TD(null, this.inputs['B'])),

 

-				TR(null, 

+				TR(null,

 					TD({className:'gap'},'#'),

 					TD({className:'gap'},this.inputs['HEX']))

 			));

 

-		var UIimages = 

-		{		

+		var UIimages =

+		{

 			selector : SPAN({className:'selector'}),

 			background : SPAN({className:'colorpanel'}),

 			slider : SPAN({className:'slider'}),

@@ -294,23 +538,23 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";

 			UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"})

 		}

-		

+

 		this.inputs = Object.extend(this.inputs, UIimages);

 

-		var pickerTable = 

+		var pickerTable =

 			TABLE(null,TBODY(null,

 				TR({className:'selection'},

 					TD({className:'colors'},UIimages['selector'],UIimages['background']),

 					TD({className:'hue'},UIimages['slider'],UIimages['hue']),

 					TD({className:'inputs'}, inputsTable)

 				),

-				TR({className:'options'}, 

-					TD({colSpan:3}, 

-						this.buttons['OK'], 

+				TR({className:'options'},

+					TD({colSpan:3},

+						this.buttons['OK'],

 						this.buttons['Cancel'])

 				)

 			));

-		

+

 		return DIV({className:this.options['ClassName']+" FullColorPicker",

 						id:pickerID+"_picker"},pickerTable);

 	},

@@ -321,16 +565,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		this.inputs.oldColor.style.backgroundColor = color.asHex();

 		this.setColor(color,true);

 

-		var i = 0; 

+		var i = 0;

 		for(var type in this.inputs)

 		{

-			Event.observe(this.inputs[type], "change", 

+			Event.observe(this.inputs[type], "change",

 				this.onInputChanged.bindEvent(this,type));

 			i++;

 

 			if(i > 6) break;

 		}

-	

+

 		this.isMouseDownOnColor = false;

 		this.isMouseDownOnHue = false;

 

@@ -343,9 +587,9 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown);

 		Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown);

 		Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown);

-		

+

 		Event.observe(document.body, "mouseup", this._onMouseUp);

-		

+

 		this.observeMouseMovement();

 

 		Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode']));

@@ -358,7 +602,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		{

 			Event.observe(document.body, "mousemove", this._onMouseMove);

 			this._observingMouseMove = true;

-		}		

+		}

 	},

 

 	onColorMouseDown : function(ev)

@@ -389,15 +633,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		if(this.isMouseDownOnHue)

 			this.changeH(ev);

 		Event.stop(ev);

-	},	

+	},

 

 	changeSV : function(ev)

 	{

 		var px = Event.pointerX(ev);

 		var py = Event.pointerY(ev);

 		var pos = Position.cumulativeOffset(this.inputs.background);

-		

-		var x = this.truncate(px - pos[0],0,255); 

+

+		var x = this.truncate(px - pos[0],0,255);

 		var y = this.truncate(py - pos[1],0,255);

 

 

@@ -406,7 +650,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 

 		var current_s = parseInt(this.inputs.S.value);

 		var current_b = parseInt(this.inputs.V.value);

-		

+

 		if(current_s == parseInt(s*100) && current_b == parseInt(b*100)) return;

 

 		var h = this.truncate(this.inputs.H.value,0,360)/360;

@@ -417,7 +661,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 

 		this.inputs.selector.style.left = x+"px";

 		this.inputs.selector.style.top = y+"px";

-		

+

 		this.inputs.currentColor.style.backgroundColor = color.asHex();

 

 		return this.setColor(color);

@@ -428,7 +672,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		var py = Event.pointerY(ev);

 		var pos = Position.cumulativeOffset(this.inputs.background);

 		var y = this.truncate(py - pos[1],0,255);

-		

+

 		var h = (255-y)/255;

 		var current_h = this.truncate(this.inputs.H.value,0,360);

 		current_h = current_h == 0 ? 360 : current_h;

@@ -499,12 +743,12 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		this.inputs.G.value = color.rgb.g;

 		this.inputs.B.value = color.rgb.b;

 		this.inputs.HEX.value = color.asHex().substring(1).toUpperCase();

-		

+

 		var images = Prado.WebUI.TColorPicker.UIImages;

 

 		var changeCss = color.isBright() ? 'removeClassName' : 'addClassName';

 		Element[changeCss](this.inputs.selector, 'target_white');

-		

+

 		if(update)

 			this.updateSelectors(color);

 	},

@@ -513,11 +757,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 	{

 		var hsb = color.asHSB();

 		var pos = [hsb.s*255, hsb.b*255, hsb.h*255];

-		

+

 		this.inputs.selector.style.left = this.truncate(pos[0],0,255)+"px";

 		this.inputs.selector.style.top = this.truncate(255-pos[1],0,255)+"px";

 		this.inputs.slider.style.top = this.truncate(255-pos[2],0,255)+"px";

-		

+

 		var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b);

 		hue.setSaturation(1); hue.setBrightness(1);

 		this.inputs.background.style.backgroundColor = hue.asHex();

diff --git a/framework/Web/Javascripts/prado/colorpicker/colorpicker.js b/framework/Web/Javascripts/prado/colorpicker/colorpicker.js
index acf5531c..423338e0 100644
--- a/framework/Web/Javascripts/prado/colorpicker/colorpicker.js
+++ b/framework/Web/Javascripts/prado/colorpicker/colorpicker.js
@@ -1,8 +1,252 @@
+//-------------------- ricoColor.js

+if(typeof(Rico) == "undefined") Rico = {};

+

+Rico.Color = Class.create();

+

+Rico.Color.prototype = {

+

+   initialize: function(red, green, blue) {

+      this.rgb = { r: red, g : green, b : blue };

+   },

+

+   setRed: function(r) {

+      this.rgb.r = r;

+   },

+

+   setGreen: function(g) {

+      this.rgb.g = g;

+   },

+

+   setBlue: function(b) {

+      this.rgb.b = b;

+   },

+

+   setHue: function(h) {

+

+      // get an HSB model, and set the new hue...

+      var hsb = this.asHSB();

+      hsb.h = h;

+

+      // convert back to RGB...

+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);

+   },

+

+   setSaturation: function(s) {

+      // get an HSB model, and set the new hue...

+      var hsb = this.asHSB();

+      hsb.s = s;

+

+      // convert back to RGB and set values...

+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);

+   },

+

+   setBrightness: function(b) {

+      // get an HSB model, and set the new hue...

+      var hsb = this.asHSB();

+      hsb.b = b;

+

+      // convert back to RGB and set values...

+      this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b );

+   },

+

+   darken: function(percent) {

+      var hsb  = this.asHSB();

+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0));

+   },

+

+   brighten: function(percent) {

+      var hsb  = this.asHSB();

+      this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1));

+   },

+

+   blend: function(other) {

+      this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2);

+      this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2);

+      this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2);

+   },

+

+   isBright: function() {

+      var hsb = this.asHSB();

+      return this.asHSB().b > 0.5;

+   },

+

+   isDark: function() {

+      return ! this.isBright();

+   },

+

+   asRGB: function() {

+      return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")";

+   },

+

+   asHex: function() {

+      return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart();

+   },

+

+   asHSB: function() {

+      return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b);

+   },

+

+   toString: function() {

+      return this.asHex();

+   }

+

+};

+

+Rico.Color.createFromHex = function(hexCode) {

+

+   if ( hexCode.indexOf('#') == 0 )

+      hexCode = hexCode.substring(1);

+

+   var red = "ff", green = "ff", blue="ff";

+   if(hexCode.length > 4)

+	{

+	   red   = hexCode.substring(0,2);

+	   green = hexCode.substring(2,4);

+	   blue  = hexCode.substring(4,6);

+	}

+	else if(hexCode.length > 0 & hexCode.length < 4)

+	{

+	  var r = hexCode.substring(0,1);

+	  var g = hexCode.substring(1,2);

+	  var b = hexCode.substring(2);

+	  red = r+r;

+	  green = g+g;

+	  blue = b+b;

+	}

+   return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) );

+}

+

+/**

+ * Factory method for creating a color from the background of

+ * an HTML element.

+ */

+Rico.Color.createColorFromBackground = function(elem) {

+

+   var actualColor = Element.getStyle($(elem), "background-color");

+  if ( actualColor == "transparent" && elem.parent )

+      return Rico.Color.createColorFromBackground(elem.parent);

+

+   if ( actualColor == null )

+      return new Rico.Color(255,255,255);

+

+   if ( actualColor.indexOf("rgb(") == 0 ) {

+      var colors = actualColor.substring(4, actualColor.length - 1 );

+      var colorArray = colors.split(",");

+      return new Rico.Color( parseInt( colorArray[0] ),

+                            parseInt( colorArray[1] ),

+                            parseInt( colorArray[2] )  );

+

+   }

+   else if ( actualColor.indexOf("#") == 0 ) {

+	  return Rico.Color.createFromHex(actualColor);

+   }

+   else

+      return new Rico.Color(255,255,255);

+}

+

+Rico.Color.HSBtoRGB = function(hue, saturation, brightness) {

+

+   var red   = 0;

+	var green = 0;

+	var blue  = 0;

+

+   if (saturation == 0) {

+      red = parseInt(brightness * 255.0 + 0.5);

+	   green = red;

+	   blue = red;

+	}

+	else {

+      var h = (hue - Math.floor(hue)) * 6.0;

+      var f = h - Math.floor(h);

+      var p = brightness * (1.0 - saturation);

+      var q = brightness * (1.0 - saturation * f);

+      var t = brightness * (1.0 - (saturation * (1.0 - f)));

+

+      switch (parseInt(h)) {

+         case 0:

+            red   = (brightness * 255.0 + 0.5);

+            green = (t * 255.0 + 0.5);

+            blue  = (p * 255.0 + 0.5);

+            break;

+         case 1:

+            red   = (q * 255.0 + 0.5);

+            green = (brightness * 255.0 + 0.5);

+            blue  = (p * 255.0 + 0.5);

+            break;

+         case 2:

+            red   = (p * 255.0 + 0.5);

+            green = (brightness * 255.0 + 0.5);

+            blue  = (t * 255.0 + 0.5);

+            break;

+         case 3:

+            red   = (p * 255.0 + 0.5);

+            green = (q * 255.0 + 0.5);

+            blue  = (brightness * 255.0 + 0.5);

+            break;

+         case 4:

+            red   = (t * 255.0 + 0.5);

+            green = (p * 255.0 + 0.5);

+            blue  = (brightness * 255.0 + 0.5);

+            break;

+          case 5:

+            red   = (brightness * 255.0 + 0.5);

+            green = (p * 255.0 + 0.5);

+            blue  = (q * 255.0 + 0.5);

+            break;

+	    }

+	}

+

+   return { r : parseInt(red), g : parseInt(green) , b : parseInt(blue) };

+}

+

+Rico.Color.RGBtoHSB = function(r, g, b) {

+

+   var hue;

+   var saturaton;

+   var brightness;

+

+   var cmax = (r > g) ? r : g;

+   if (b > cmax)

+      cmax = b;

+

+   var cmin = (r < g) ? r : g;

+   if (b < cmin)

+      cmin = b;

+

+   brightness = cmax / 255.0;

+   if (cmax != 0)

+      saturation = (cmax - cmin)/cmax;

+   else

+      saturation = 0;

+

+   if (saturation == 0)

+      hue = 0;

+   else {

+      var redc   = (cmax - r)/(cmax - cmin);

+    	var greenc = (cmax - g)/(cmax - cmin);

+    	var bluec  = (cmax - b)/(cmax - cmin);

+

+    	if (r == cmax)

+    	   hue = bluec - greenc;

+    	else if (g == cmax)

+    	   hue = 2.0 + redc - bluec;

+      else

+    	   hue = 4.0 + greenc - redc;

+

+    	hue = hue / 6.0;

+    	if (hue < 0)

+    	   hue = hue + 1.0;

+   }

+

+   return { h : hue, s : saturation, b : brightness };

+}

+

+

 Prado.WebUI.TColorPicker = Class.create();

 

 Object.extend(Prado.WebUI.TColorPicker,

 {

-	palettes: 

+	palettes:

 	{

 		Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"],

 				["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"],

@@ -17,7 +261,7 @@ Object.extend(Prado.WebUI.TColorPicker,
 				["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]]

 	},

 

-	UIImages : 

+	UIImages :

 	{

 		'button.gif' : 'button.gif',

 //		'target_black.gif' : 'target_black.gif',

@@ -28,11 +272,11 @@ Object.extend(Prado.WebUI.TColorPicker,
 	}

 });

 

-Object.extend(Prado.WebUI.TColorPicker.prototype, 

+Object.extend(Prado.WebUI.TColorPicker.prototype,

 {

 	initialize : function(options)

 	{

-		var basics = 

+		var basics =

 		{

 			Palette : 'Small',

 			ClassName : 'TColorPicker',

@@ -41,7 +285,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			CancelButtonText : 'Cancel',

 			ShowColorPicker : true

 		}

-		

+

 		this.element = null;

 		this.showing = false;

 

@@ -57,10 +301,10 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 

 	updatePicker : function(e)

 	{

-		var color = Rico.Color.createFromHex(this.input.value);	

+		var color = Rico.Color.createFromHex(this.input.value);

 		this.button.style.backgroundColor = color.toString();

 	},

-	

+

 	buttonOnClick : function(event)

 	{

 		var mode = this.options['Mode'];

@@ -84,7 +328,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 				this.initializeFullPicker();

 		}

 		this.show(mode);

-	},		

+	},

 

 	show : function(type)

 	{

@@ -96,14 +340,14 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			this.element.style.top = (pos[1]-1) + "px";

 			this.element.style.left = pos[0] + "px";

 			this.element.style.display = "block";

-			

+

 			this.ieHack(type);

 

 			//observe for clicks on the document body

 			this._documentClickEvent = this.hideOnClick.bindEvent(this, type);

 			this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type);

 			Event.observe(document.body, "click", this._documentClickEvent);

-			Event.observe(document,"keydown", this._documentKeyDownEvent); 

+			Event.observe(document,"keydown", this._documentKeyDownEvent);

 			this.showing = true;

 

 			if(type == "Full")

@@ -115,7 +359,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			}

 		}

 	},

-	

+

 	hide : function(event)

 	{

 		if(this.showing)

@@ -126,11 +370,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			this.element.style.display = "none";

 			this.showing = false;

 			Event.stopObserving(document.body, "click", this._documentClickEvent);

-			Event.stopObserving(document,"keydown", this._documentKeyDownEvent); 

-			

+			Event.stopObserving(document,"keydown", this._documentKeyDownEvent);

+

 			if(this._observingMouseMove)

-			{			

-				Event.stopObserving(document.body, "mousemove", this._onMouseMove);	

+			{

+				Event.stopObserving(document.body, "mousemove", this._onMouseMove);

 				this._observingMouseMove = false;

 			}

 		}

@@ -152,16 +396,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			within = within || el == this.button;

 			within = within || el == this.input;

 			if(within) break;

-			el = el.parentNode;			

+			el = el.parentNode;

 		}

 		while(el);

 		if(!within) this.hide(ev);

 	},

 

-	ieHack : function() 

+	ieHack : function()

 	{

 		// IE hack

-		if(this.iePopUp) 

+		if(this.iePopUp)

 		{

 			this.iePopUp.style.display = "block";

 			this.iePopUp.style.top = (this.element.offsetTop) + "px";

@@ -204,7 +448,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 

 	cellOnClick : function(e)

 	{

-		var el = Event.element(e); 

+		var el = Event.element(e);

 		if(el.tagName.toLowerCase() != "img")

 			return;

 		var color = Rico.Color.createColorFromBackground(el);

@@ -220,15 +464,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 	},

 

 	getFullPickerContainer : function(pickerID)

-	{			

+	{

 		//create the 3 buttons

-		this.buttons = 

+		this.buttons =

 		{

 			//Less   : INPUT({value:'Less Colors', className:'button', type:'button'}),

 			OK	   : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}),

 			Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'})

 		};

-		

+

 		//create the 6 inputs

 		var inputs = {};

 		['H','S','V','R','G','B'].each(function(type)

@@ -239,13 +483,13 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		//create the HEX input

 		inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'});

 		this.inputs = inputs;

-		

+

 		var images = Prado.WebUI.TColorPicker.UIImages;

 

 		this.inputs['currentColor'] = SPAN({className:'currentColor'});

 		this.inputs['oldColor'] = SPAN({className:'oldColor'});

 

-		var inputsTable = 

+		var inputsTable =

 			TABLE({className:'inputs'}, TBODY(null,

 				TR(null,

 					TD({className:'currentcolor',colSpan:2},

@@ -258,30 +502,30 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 				TR(null,

 					TD(null,'S:'),

 					TD(null,this.inputs['S'], '%')),

-				

-				TR(null, 

+

+				TR(null,

 					TD(null,'V:'),

 					TD(null,this.inputs['V'], '%')),

-				

-				TR(null, 

+

+				TR(null,

 					TD({className:'gap'},'R:'),

 					TD({className:'gap'},this.inputs['R'])),

-				

-				TR(null, 

+

+				TR(null,

 					TD(null,'G:'),

 					TD(null, this.inputs['G'])),

 

-				TR(null, 

+				TR(null,

 					TD(null,'B:'),

 					TD(null, this.inputs['B'])),

 

-				TR(null, 

+				TR(null,

 					TD({className:'gap'},'#'),

 					TD({className:'gap'},this.inputs['HEX']))

 			));

 

-		var UIimages = 

-		{		

+		var UIimages =

+		{

 			selector : SPAN({className:'selector'}),

 			background : SPAN({className:'colorpanel'}),

 			slider : SPAN({className:'slider'}),

@@ -294,23 +538,23 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";

 			UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"})

 		}

-		

+

 		this.inputs = Object.extend(this.inputs, UIimages);

 

-		var pickerTable = 

+		var pickerTable =

 			TABLE(null,TBODY(null,

 				TR({className:'selection'},

 					TD({className:'colors'},UIimages['selector'],UIimages['background']),

 					TD({className:'hue'},UIimages['slider'],UIimages['hue']),

 					TD({className:'inputs'}, inputsTable)

 				),

-				TR({className:'options'}, 

-					TD({colSpan:3}, 

-						this.buttons['OK'], 

+				TR({className:'options'},

+					TD({colSpan:3},

+						this.buttons['OK'],

 						this.buttons['Cancel'])

 				)

 			));

-		

+

 		return DIV({className:this.options['ClassName']+" FullColorPicker",

 						id:pickerID+"_picker"},pickerTable);

 	},

@@ -321,16 +565,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		this.inputs.oldColor.style.backgroundColor = color.asHex();

 		this.setColor(color,true);

 

-		var i = 0; 

+		var i = 0;

 		for(var type in this.inputs)

 		{

-			Event.observe(this.inputs[type], "change", 

+			Event.observe(this.inputs[type], "change",

 				this.onInputChanged.bindEvent(this,type));

 			i++;

 

 			if(i > 6) break;

 		}

-	

+

 		this.isMouseDownOnColor = false;

 		this.isMouseDownOnHue = false;

 

@@ -343,9 +587,9 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown);

 		Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown);

 		Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown);

-		

+

 		Event.observe(document.body, "mouseup", this._onMouseUp);

-		

+

 		this.observeMouseMovement();

 

 		Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode']));

@@ -358,7 +602,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		{

 			Event.observe(document.body, "mousemove", this._onMouseMove);

 			this._observingMouseMove = true;

-		}		

+		}

 	},

 

 	onColorMouseDown : function(ev)

@@ -389,15 +633,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		if(this.isMouseDownOnHue)

 			this.changeH(ev);

 		Event.stop(ev);

-	},	

+	},

 

 	changeSV : function(ev)

 	{

 		var px = Event.pointerX(ev);

 		var py = Event.pointerY(ev);

 		var pos = Position.cumulativeOffset(this.inputs.background);

-		

-		var x = this.truncate(px - pos[0],0,255); 

+

+		var x = this.truncate(px - pos[0],0,255);

 		var y = this.truncate(py - pos[1],0,255);

 

 

@@ -406,7 +650,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 

 		var current_s = parseInt(this.inputs.S.value);

 		var current_b = parseInt(this.inputs.V.value);

-		

+

 		if(current_s == parseInt(s*100) && current_b == parseInt(b*100)) return;

 

 		var h = this.truncate(this.inputs.H.value,0,360)/360;

@@ -417,7 +661,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 

 		this.inputs.selector.style.left = x+"px";

 		this.inputs.selector.style.top = y+"px";

-		

+

 		this.inputs.currentColor.style.backgroundColor = color.asHex();

 

 		return this.setColor(color);

@@ -428,7 +672,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		var py = Event.pointerY(ev);

 		var pos = Position.cumulativeOffset(this.inputs.background);

 		var y = this.truncate(py - pos[1],0,255);

-		

+

 		var h = (255-y)/255;

 		var current_h = this.truncate(this.inputs.H.value,0,360);

 		current_h = current_h == 0 ? 360 : current_h;

@@ -499,12 +743,12 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		this.inputs.G.value = color.rgb.g;

 		this.inputs.B.value = color.rgb.b;

 		this.inputs.HEX.value = color.asHex().substring(1).toUpperCase();

-		

+

 		var images = Prado.WebUI.TColorPicker.UIImages;

 

 		var changeCss = color.isBright() ? 'removeClassName' : 'addClassName';

 		Element[changeCss](this.inputs.selector, 'target_white');

-		

+

 		if(update)

 			this.updateSelectors(color);

 	},

@@ -513,11 +757,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 	{

 		var hsb = color.asHSB();

 		var pos = [hsb.s*255, hsb.b*255, hsb.h*255];

-		

+

 		this.inputs.selector.style.left = this.truncate(pos[0],0,255)+"px";

 		this.inputs.selector.style.top = this.truncate(255-pos[1],0,255)+"px";

 		this.inputs.slider.style.top = this.truncate(255-pos[2],0,255)+"px";

-		

+

 		var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b);

 		hue.setSaturation(1); hue.setBrightness(1);

 		this.inputs.background.style.backgroundColor = hue.asHex();