[Sommaire] [Imprimer]

   1  //-------------------- ricoColor.js
   2  if(typeof(Rico) == "undefined") Rico = {};
   3  
   4  Rico.Color = Class.create();
   5  
   6  Rico.Color.prototype = {
   7  
   8     initialize: function(red, green, blue) {
   9        this.rgb = { r: red, g : green, b : blue };
  10     },
  11  
  12     setRed: function(r) {
  13        this.rgb.r = r;
  14     },
  15  
  16     setGreen: function(g) {
  17        this.rgb.g = g;
  18     },
  19  
  20     setBlue: function(b) {
  21        this.rgb.b = b;
  22     },
  23  
  24     setHue: function(h) {
  25  
  26        // get an HSB model, and set the new hue...
  27        var hsb = this.asHSB();
  28        hsb.h = h;
  29  
  30        // convert back to RGB...
  31        this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
  32     },
  33  
  34     setSaturation: function(s) {
  35        // get an HSB model, and set the new hue...
  36        var hsb = this.asHSB();
  37        hsb.s = s;
  38  
  39        // convert back to RGB and set values...
  40        this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
  41     },
  42  
  43     setBrightness: function(b) {
  44        // get an HSB model, and set the new hue...
  45        var hsb = this.asHSB();
  46        hsb.b = b;
  47  
  48        // convert back to RGB and set values...
  49        this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b );
  50     },
  51  
  52     darken: function(percent) {
  53        var hsb  = this.asHSB();
  54        this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0));
  55     },
  56  
  57     brighten: function(percent) {
  58        var hsb  = this.asHSB();
  59        this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1));
  60     },
  61  
  62     blend: function(other) {
  63        this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2);
  64        this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2);
  65        this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2);
  66     },
  67  
  68     isBright: function() {
  69        var hsb = this.asHSB();
  70        return this.asHSB().b > 0.5;
  71     },
  72  
  73     isDark: function() {
  74        return ! this.isBright();
  75     },
  76  
  77     asRGB: function() {
  78        return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")";
  79     },
  80  
  81     asHex: function() {
  82        return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart();
  83     },
  84  
  85     asHSB: function() {
  86        return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b);
  87     },
  88  
  89     toString: function() {
  90        return this.asHex();
  91     }
  92  
  93  };
  94  
  95  Rico.Color.createFromHex = function(hexCode) {
  96  
  97     if ( hexCode.indexOf('#') == 0 )
  98        hexCode = hexCode.substring(1);
  99     
 100     var red = "ff", green = "ff", blue="ff";
 101     if(hexCode.length > 4)
 102      {
 103         red   = hexCode.substring(0,2);
 104         green = hexCode.substring(2,4);
 105         blue  = hexCode.substring(4,6);
 106      }
 107      else if(hexCode.length > 0 & hexCode.length < 4)
 108      {
 109        var r = hexCode.substring(0,1);
 110        var g = hexCode.substring(1,2);
 111        var b = hexCode.substring(2);
 112        red = r+r;
 113        green = g+g;
 114        blue = b+b;
 115      }
 116     return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) );
 117  }
 118  
 119  /**
 120   * Factory method for creating a color from the background of
 121   * an HTML element.
 122   */
 123  Rico.Color.createColorFromBackground = function(elem) {
 124  
 125     var actualColor = Element.getStyle($(elem), "background-color");
 126    if ( actualColor == "transparent" && elem.parent )
 127        return Rico.Color.createColorFromBackground(elem.parent);
 128  
 129     if ( actualColor == null )
 130        return new Rico.Color(255,255,255);
 131  
 132     if ( actualColor.indexOf("rgb(") == 0 ) {
 133        var colors = actualColor.substring(4, actualColor.length - 1 );
 134        var colorArray = colors.split(",");
 135        return new Rico.Color( parseInt( colorArray[0] ),
 136                              parseInt( colorArray[1] ),
 137                              parseInt( colorArray[2] )  );
 138  
 139     }
 140     else if ( actualColor.indexOf("#") == 0 ) {
 141        return Rico.Color.createFromHex(actualColor);
 142     }
 143     else
 144        return new Rico.Color(255,255,255);
 145  }
 146  
 147  Rico.Color.HSBtoRGB = function(hue, saturation, brightness) {
 148  
 149     var red   = 0;
 150      var green = 0;
 151      var blue  = 0;
 152  
 153     if (saturation == 0) {
 154        red = parseInt(brightness * 255.0 + 0.5);
 155         green = red;
 156         blue = red;
 157      }
 158      else {
 159        var h = (hue - Math.floor(hue)) * 6.0;
 160        var f = h - Math.floor(h);
 161        var p = brightness * (1.0 - saturation);
 162        var q = brightness * (1.0 - saturation * f);
 163        var t = brightness * (1.0 - (saturation * (1.0 - f)));
 164  
 165        switch (parseInt(h)) {
 166           case 0:
 167              red   = (brightness * 255.0 + 0.5);
 168              green = (t * 255.0 + 0.5);
 169              blue  = (p * 255.0 + 0.5);
 170              break;
 171           case 1:
 172              red   = (q * 255.0 + 0.5);
 173              green = (brightness * 255.0 + 0.5);
 174              blue  = (p * 255.0 + 0.5);
 175              break;
 176           case 2:
 177              red   = (p * 255.0 + 0.5);
 178              green = (brightness * 255.0 + 0.5);
 179              blue  = (t * 255.0 + 0.5);
 180              break;
 181           case 3:
 182              red   = (p * 255.0 + 0.5);
 183              green = (q * 255.0 + 0.5);
 184              blue  = (brightness * 255.0 + 0.5);
 185              break;
 186           case 4:
 187              red   = (t * 255.0 + 0.5);
 188              green = (p * 255.0 + 0.5);
 189              blue  = (brightness * 255.0 + 0.5);
 190              break;
 191            case 5:
 192              red   = (brightness * 255.0 + 0.5);
 193              green = (p * 255.0 + 0.5);
 194              blue  = (q * 255.0 + 0.5);
 195              break;
 196          }
 197      }
 198  
 199     return { r : parseInt(red), g : parseInt(green) , b : parseInt(blue) };
 200  }
 201  
 202  Rico.Color.RGBtoHSB = function(r, g, b) {
 203  
 204     var hue;
 205     var saturaton;
 206     var brightness;
 207  
 208     var cmax = (r > g) ? r : g;
 209     if (b > cmax)
 210        cmax = b;
 211  
 212     var cmin = (r < g) ? r : g;
 213     if (b < cmin)
 214        cmin = b;
 215  
 216     brightness = cmax / 255.0;
 217     if (cmax != 0)
 218        saturation = (cmax - cmin)/cmax;
 219     else
 220        saturation = 0;
 221  
 222     if (saturation == 0)
 223        hue = 0;
 224     else {
 225        var redc   = (cmax - r)/(cmax - cmin);
 226          var greenc = (cmax - g)/(cmax - cmin);
 227          var bluec  = (cmax - b)/(cmax - cmin);
 228  
 229          if (r == cmax)
 230             hue = bluec - greenc;
 231          else if (g == cmax)
 232             hue = 2.0 + redc - bluec;
 233        else
 234             hue = 4.0 + greenc - redc;
 235  
 236          hue = hue / 6.0;
 237          if (hue < 0)
 238             hue = hue + 1.0;
 239     }
 240  
 241     return { h : hue, s : saturation, b : brightness };
 242  }
 243  
 244  
 245  Prado.WebUI.TColorPicker = Class.create();
 246  
 247  Object.extend(Prado.WebUI.TColorPicker,
 248  {
 249      palettes: 
 250      {
 251          Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"],
 252                  ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"],
 253                  ["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"],
 254                  ["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"],
 255                  ["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"],
 256                  ["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"],
 257                  ["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]],
 258  
 259          Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/],
 260                  ["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/],
 261                  ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]]
 262      },
 263  
 264      UIImages : 
 265      {
 266          'button.gif' : 'button.gif',
 267  //        'target_black.gif' : 'target_black.gif',
 268  //        'target_white.gif' : 'target_white.gif',
 269          'background.png' : 'background.png'
 270  //        'slider.gif' : 'slider.gif',
 271  //        'hue.gif' : 'hue.gif'
 272      }
 273  });
 274  
 275  Object.extend(Prado.WebUI.TColorPicker.prototype, 
 276  {
 277      initialize : function(options)
 278      {
 279          var basics = 
 280          {
 281              Palette : 'Small',
 282              ClassName : 'TColorPicker',
 283              Mode : 'Basic',
 284              OKButtonText : 'OK',
 285              CancelButtonText : 'Cancel',
 286              ShowColorPicker : true
 287          }
 288          
 289          this.element = null;
 290          this.showing = false;
 291  
 292          options = Object.extend(basics, options);
 293          this.options = options;
 294          this.input = $(options['ID']);
 295          this.button = $(options['ID']+'_button');
 296          this._buttonOnClick = this.buttonOnClick.bind(this);
 297          if(options['ShowColorPicker'])
 298              Event.observe(this.button, "click", this._buttonOnClick);
 299          Event.observe(this.input, "change", this.updatePicker.bind(this));
 300      },
 301  
 302      updatePicker : function(e)
 303      {
 304          var color = Rico.Color.createFromHex(this.input.value);    
 305          this.button.style.backgroundColor = color.toString();
 306      },
 307      
 308      buttonOnClick : function(event)
 309      {
 310          var mode = this.options['Mode'];
 311          if(this.element == null)
 312          {
 313              var constructor = mode == "Basic" ? "getBasicPickerContainer": "getFullPickerContainer"
 314              this.element = this[constructor](this.options['ID'], this.options['Palette'])
 315              this.input.parentNode.appendChild(this.element);
 316              this.element.style.display = "none";
 317  
 318              if(Prado.Browser().ie)
 319              {
 320                  this.iePopUp = document.createElement('iframe');
 321                  this.iePopUp.src = Prado.WebUI.TColorPicker.UIImages['button.gif'];
 322                  this.iePopUp.style.position = "absolute"
 323                  this.iePopUp.scrolling="no"
 324                  this.iePopUp.frameBorder="0"
 325                  this.input.parentNode.appendChild(this.iePopUp);
 326              }
 327              if(mode == "Full")
 328                  this.initializeFullPicker();
 329          }
 330          this.show(mode);
 331      },        
 332  
 333      show : function(type)
 334      {
 335          if(!this.showing)
 336          {
 337              var pos = Position.positionedOffset(this.input);
 338              pos[1] += this.input.offsetHeight;
 339  
 340              this.element.style.top = (pos[1]-1) + "px";
 341              this.element.style.left = pos[0] + "px";
 342              this.element.style.display = "block";
 343              
 344              this.ieHack(type);
 345  
 346              //observe for clicks on the document body
 347              this._documentClickEvent = this.hideOnClick.bindEvent(this, type);
 348              this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type);
 349              Event.observe(document.body, "click", this._documentClickEvent);
 350              Event.observe(document,"keydown", this._documentKeyDownEvent); 
 351              this.showing = true;
 352  
 353              if(type == "Full")
 354              {
 355                  this.observeMouseMovement();
 356                  var color = Rico.Color.createFromHex(this.input.value);
 357                  this.inputs.oldColor.style.backgroundColor = color.asHex();
 358                  this.setColor(color,true);
 359              }
 360          }
 361      },
 362      
 363      hide : function(event)
 364      {
 365          if(this.showing)
 366          {
 367              if(this.iePopUp)
 368                  this.iePopUp.style.display = "none";
 369  
 370              this.element.style.display = "none";
 371              this.showing = false;
 372              Event.stopObserving(document.body, "click", this._documentClickEvent);
 373              Event.stopObserving(document,"keydown", this._documentKeyDownEvent); 
 374              
 375              if(this._observingMouseMove)
 376              {            
 377                  Event.stopObserving(document.body, "mousemove", this._onMouseMove);    
 378                  this._observingMouseMove = false;
 379              }
 380          }
 381      },
 382  
 383      keyPressed : function(event,type)
 384      {
 385          if(Event.keyCode(event) == Event.KEY_ESC)
 386              this.hide(event,type);
 387      },
 388  
 389      hideOnClick : function(ev)
 390      {
 391          if(!this.showing) return;
 392          var el = Event.element(ev);
 393          var within = false;
 394          do
 395          {    within = within || String(el.className).indexOf('FullColorPicker') > -1
 396              within = within || el == this.button;
 397              within = within || el == this.input;
 398              if(within) break;
 399              el = el.parentNode;            
 400          }
 401          while(el);
 402          if(!within) this.hide(ev);
 403      },
 404  
 405      ieHack : function() 
 406      {
 407          // IE hack
 408          if(this.iePopUp) 
 409          {
 410              this.iePopUp.style.display = "block";
 411              this.iePopUp.style.top = (this.element.offsetTop) + "px";
 412              this.iePopUp.style.left = (this.element.offsetLeft)+ "px";
 413              this.iePopUp.style.width = Math.abs(this.element.offsetWidth)+ "px";
 414              this.iePopUp.style.height = (this.element.offsetHeight + 1)+ "px";
 415          }
 416      },
 417  
 418      getBasicPickerContainer : function(pickerID, palette)
 419      {
 420          var table = TABLE({className:'basic_colors palette_'+palette},TBODY());
 421          var colors = Prado.WebUI.TColorPicker.palettes[palette];
 422          var pickerOnClick = this.cellOnClick.bind(this);
 423          colors.each(function(color)
 424          {
 425              var row = document.createElement("tr");
 426              color.each(function(c)
 427              {
 428                  var td = document.createElement("td");
 429                  var img = IMG({src:Prado.WebUI.TColorPicker.UIImages['button.gif'],width:16,height:16});
 430                  img.style.backgroundColor = "#"+c;
 431                  Event.observe(img,"click", pickerOnClick);
 432                  Event.observe(img,"mouseover", function(e)
 433                  {
 434                      Element.addClassName(Event.element(e), "pickerhover");
 435                  });
 436                  Event.observe(img,"mouseout", function(e)
 437                  {
 438                      Element.removeClassName(Event.element(e), "pickerhover");
 439                  });
 440                  td.appendChild(img);
 441                  row.appendChild(td);
 442              });
 443              table.childNodes[0].appendChild(row);
 444          });
 445          return DIV({className:this.options['ClassName']+" BasicColorPicker",
 446                      id:pickerID+"_picker"}, table);
 447      },
 448  
 449      cellOnClick : function(e)
 450      {
 451          var el = Event.element(e); 
 452          if(el.tagName.toLowerCase() != "img")
 453              return;
 454          var color = Rico.Color.createColorFromBackground(el);
 455          this.updateColor(color);
 456      },
 457  
 458      updateColor : function(color)
 459      {
 460          this.input.value = color.toString().toUpperCase();
 461          this.button.style.backgroundColor = color.toString();
 462          if(typeof(this.onChange) == "function")
 463              this.onChange(color);
 464      },
 465  
 466      getFullPickerContainer : function(pickerID)
 467      {            
 468          //create the 3 buttons
 469          this.buttons = 
 470          {
 471              //Less   : INPUT({value:'Less Colors', className:'button', type:'button'}),
 472              OK       : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}),
 473              Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'})
 474          };
 475          
 476          //create the 6 inputs
 477          var inputs = {};
 478          ['H','S','V','R','G','B'].each(function(type)
 479          {
 480              inputs[type] = INPUT({type:'text',size:'3',maxlength:'3'});
 481          });
 482  
 483          //create the HEX input
 484          inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'});
 485          this.inputs = inputs;
 486          
 487          var images = Prado.WebUI.TColorPicker.UIImages;
 488  
 489          this.inputs['currentColor'] = SPAN({className:'currentColor'});
 490          this.inputs['oldColor'] = SPAN({className:'oldColor'});
 491  
 492          var inputsTable = 
 493              TABLE({className:'inputs'}, TBODY(null,
 494                  TR(null,
 495                      TD({className:'currentcolor',colSpan:2},
 496                          this.inputs['currentColor'], this.inputs['oldColor'])),
 497  
 498                  TR(null,
 499                      TD(null,'H:'),
 500                      TD(null,this.inputs['H'], '??')),
 501  
 502                  TR(null,
 503                      TD(null,'S:'),
 504                      TD(null,this.inputs['S'], '%')),
 505                  
 506                  TR(null, 
 507                      TD(null,'V:'),
 508                      TD(null,this.inputs['V'], '%')),
 509                  
 510                  TR(null, 
 511                      TD({className:'gap'},'R:'),
 512                      TD({className:'gap'},this.inputs['R'])),
 513                  
 514                  TR(null, 
 515                      TD(null,'G:'),
 516                      TD(null, this.inputs['G'])),
 517  
 518                  TR(null, 
 519                      TD(null,'B:'),
 520                      TD(null, this.inputs['B'])),
 521  
 522                  TR(null, 
 523                      TD({className:'gap'},'#'),
 524                      TD({className:'gap'},this.inputs['HEX']))
 525              ));
 526  
 527          var UIimages = 
 528          {        
 529              selector : SPAN({className:'selector'}),
 530              background : SPAN({className:'colorpanel'}),
 531              slider : SPAN({className:'slider'}),
 532              hue : SPAN({className:'strip'})
 533          }
 534  
 535          //png alpha channels for IE
 536          if(Prado.Browser().ie)
 537          {
 538              var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";
 539              UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"})
 540          }
 541          
 542          this.inputs = Object.extend(this.inputs, UIimages);
 543  
 544          var pickerTable = 
 545              TABLE(null,TBODY(null,
 546                  TR({className:'selection'},
 547                      TD({className:'colors'},UIimages['selector'],UIimages['background']),
 548                      TD({className:'hue'},UIimages['slider'],UIimages['hue']),
 549                      TD({className:'inputs'}, inputsTable)
 550                  ),
 551                  TR({className:'options'}, 
 552                      TD({colSpan:3}, 
 553                          this.buttons['OK'], 
 554                          this.buttons['Cancel'])
 555                  )
 556              ));
 557          
 558          return DIV({className:this.options['ClassName']+" FullColorPicker",
 559                          id:pickerID+"_picker"},pickerTable);
 560      },
 561  
 562      initializeFullPicker : function()
 563      {
 564          var color = Rico.Color.createFromHex(this.input.value);
 565          this.inputs.oldColor.style.backgroundColor = color.asHex();
 566          this.setColor(color,true);
 567  
 568          var i = 0; 
 569          for(var type in this.inputs)
 570          {
 571              Event.observe(this.inputs[type], "change", 
 572                  this.onInputChanged.bindEvent(this,type));
 573              i++;
 574  
 575              if(i > 6) break;
 576          }
 577      
 578          this.isMouseDownOnColor = false;
 579          this.isMouseDownOnHue = false;
 580  
 581          this._onColorMouseDown = this.onColorMouseDown.bind(this);
 582          this._onHueMouseDown = this.onHueMouseDown.bind(this);
 583          this._onMouseUp = this.onMouseUp.bind(this);
 584          this._onMouseMove = this.onMouseMove.bind(this);
 585  
 586          Event.observe(this.inputs.background, "mousedown", this._onColorMouseDown);
 587          Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown);
 588          Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown);
 589          Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown);
 590          
 591          Event.observe(document.body, "mouseup", this._onMouseUp);
 592          
 593          this.observeMouseMovement();
 594  
 595          Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode']));
 596          Event.observe(this.buttons.OK, "click", this.onOKClicked.bind(this));
 597      },
 598  
 599      observeMouseMovement : function()
 600      {
 601          if(!this._observingMouseMove)
 602          {
 603              Event.observe(document.body, "mousemove", this._onMouseMove);
 604              this._observingMouseMove = true;
 605          }        
 606      },
 607  
 608      onColorMouseDown : function(ev)
 609      {
 610          this.isMouseDownOnColor = true;
 611          this.onMouseMove(ev);
 612          Event.stop(ev);
 613      },
 614  
 615      onHueMouseDown : function(ev)
 616      {
 617          this.isMouseDownOnHue = true;
 618          this.onMouseMove(ev);
 619          Event.stop(ev);
 620      },
 621  
 622      onMouseUp : function(ev)
 623      {
 624          this.isMouseDownOnColor = false;
 625          this.isMouseDownOnHue = false;
 626          Event.stop(ev);
 627      },
 628  
 629      onMouseMove : function(ev)
 630      {
 631          if(this.isMouseDownOnColor)
 632              this.changeSV(ev);
 633          if(this.isMouseDownOnHue)
 634              this.changeH(ev);
 635          Event.stop(ev);
 636      },    
 637  
 638      changeSV : function(ev)
 639      {
 640          var px = Event.pointerX(ev);
 641          var py = Event.pointerY(ev);
 642          var pos = Position.cumulativeOffset(this.inputs.background);
 643          
 644          var x = this.truncate(px - pos[0],0,255); 
 645          var y = this.truncate(py - pos[1],0,255);
 646  
 647  
 648          var s = x/255;
 649          var b = (255-y)/255;
 650  
 651          var current_s = parseInt(this.inputs.S.value);
 652          var current_b = parseInt(this.inputs.V.value);
 653          
 654          if(current_s == parseInt(s*100) && current_b == parseInt(b*100)) return;
 655  
 656          var h = this.truncate(this.inputs.H.value,0,360)/360;
 657  
 658          var color = new Rico.Color();
 659          color.rgb = Rico.Color.HSBtoRGB(h,s,b);
 660  
 661  
 662          this.inputs.selector.style.left = x+"px";
 663          this.inputs.selector.style.top = y+"px";
 664          
 665          this.inputs.currentColor.style.backgroundColor = color.asHex();
 666  
 667          return this.setColor(color);
 668      },
 669  
 670      changeH : function(ev)
 671      {
 672          var py = Event.pointerY(ev);
 673          var pos = Position.cumulativeOffset(this.inputs.background);
 674          var y = this.truncate(py - pos[1],0,255);
 675          
 676          var h = (255-y)/255;
 677          var current_h = this.truncate(this.inputs.H.value,0,360);
 678          current_h = current_h == 0 ? 360 : current_h;
 679          if(current_h == parseInt(h*360)) return;
 680  
 681          var s = parseInt(this.inputs.S.value)/100;
 682          var b = parseInt(this.inputs.V.value)/100;
 683          var color = new Rico.Color();
 684          color.rgb = Rico.Color.HSBtoRGB(h,s,b);
 685  
 686          var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b);
 687          hue.setSaturation(1); hue.setBrightness(1);
 688  
 689          this.inputs.background.style.backgroundColor = hue.asHex();
 690          this.inputs.currentColor.style.backgroundColor = color.asHex();
 691  
 692          this.inputs.slider.style.top = this.truncate(y,0,255)+"px";
 693          return this.setColor(color);
 694  
 695      },
 696  
 697      onOKClicked : function(ev)
 698      {
 699          var r = this.truncate(this.inputs.R.value,0,255);///255;
 700          var g = this.truncate(this.inputs.G.value,0,255);///255;
 701          var b = this.truncate(this.inputs.B.value,0,255);///255;
 702          var color = new Rico.Color(r,g,b);
 703          this.updateColor(color);
 704          this.inputs.oldColor.style.backgroundColor = color.asHex();
 705          this.hide(ev);
 706      },
 707  
 708      onInputChanged : function(ev, type)
 709      {
 710          if(this.isMouseDownOnColor || isMouseDownOnHue)
 711              return;
 712  
 713  
 714          switch(type)
 715          {
 716              case "H": case "S": case "V":
 717                  var h = this.truncate(this.inputs.H.value,0,360)/360;
 718                  var s = this.truncate(this.inputs.S.value,0,100)/100;
 719                  var b = this.truncate(this.inputs.V.value,0,100)/100;
 720                  var color = new Rico.Color();
 721                  color.rgb = Rico.Color.HSBtoRGB(h,s,b);
 722                  return this.setColor(color,true);
 723              case "R": case "G": case "B":
 724                  var r = this.truncate(this.inputs.R.value,0,255);///255;
 725                  var g = this.truncate(this.inputs.G.value,0,255);///255;
 726                  var b = this.truncate(this.inputs.B.value,0,255);///255;
 727                  var color = new Rico.Color(r,g,b);
 728                  return this.setColor(color,true);
 729              case "HEX":
 730                  var color = Rico.Color.createFromHex(this.inputs.HEX.value);
 731                  return this.setColor(color,true);
 732          }
 733      },
 734  
 735      setColor : function(color, update)
 736      {
 737          var hsb = color.asHSB();
 738  
 739          this.inputs.H.value = parseInt(hsb.h*360);
 740          this.inputs.S.value = parseInt(hsb.s*100);
 741          this.inputs.V.value = parseInt(hsb.b*100);
 742          this.inputs.R.value = color.rgb.r;
 743          this.inputs.G.value = color.rgb.g;
 744          this.inputs.B.value = color.rgb.b;
 745          this.inputs.HEX.value = color.asHex().substring(1).toUpperCase();
 746          
 747          var images = Prado.WebUI.TColorPicker.UIImages;
 748  
 749          var changeCss = color.isBright() ? 'removeClassName' : 'addClassName';
 750          Element[changeCss](this.inputs.selector, 'target_white');
 751          
 752          if(update)
 753              this.updateSelectors(color);
 754      },
 755  
 756      updateSelectors : function(color)
 757      {
 758          var hsb = color.asHSB();
 759          var pos = [hsb.s*255, hsb.b*255, hsb.h*255];
 760          
 761          this.inputs.selector.style.left = this.truncate(pos[0],0,255)+"px";
 762          this.inputs.selector.style.top = this.truncate(255-pos[1],0,255)+"px";
 763          this.inputs.slider.style.top = this.truncate(255-pos[2],0,255)+"px";
 764          
 765          var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b);
 766          hue.setSaturation(1); hue.setBrightness(1);
 767          this.inputs.background.style.backgroundColor = hue.asHex();
 768          this.inputs.currentColor.style.backgroundColor = color.asHex();
 769      },
 770  
 771      truncate : function(value, min, max)
 772      {
 773          value = parseInt(value);
 774          return value < min ? min : value > max ? max : value;
 775      }
 776  });
 777  
 778