gistfile1.js

  initialize: function(id, settings) {
    this.id = id;
    this.settings = Object.extend(Object.clone(this.defaultOptions), settings || { });

    this._container = $(this.id + '_Container');
    this._controls = $(this.id + '_Controls');

    // attach radio & check boxes
    this._hueRadio = $(this.id + '_HueRadio');
    this._saturationRadio = $(this.id + '_SaturationRadio');
    this._valueRadio = $(this.id + '_BrightnessRadio');

    this._redRadio = $(this.id + '_RedRadio');
    this._greenRadio = $(this.id + '_GreenRadio');
    this._blueRadio = $(this.id + '_BlueRadio');
    //this._webSafeCheck = $(this.id + '_WebSafeCheck');

    if (this._hueRadio) this._hueRadio.value = 'h';
    if (this._saturationRadio) this._saturationRadio.value = 's';
    if (this._valueRadio) this._valueRadio.value = 'v';

    if (this._redRadio) this._redRadio.value = 'r';
    if (this._greenRadio) this._greenRadio.value = 'g';
    if (this._blueRadio) this._blueRadio.value = 'b';

    // attach events to radio & checks
    if (this._controls) {
      Event.observe(this._controls, 'click', function(e, el) {
        if (el = e.findElement('input[type="radio"]')) {
          this.setColorMode(el.value);
        }
      }.bind(this));
    }

    // attach simple properties
    this._preview = $(this.id + '_Preview');

    // MAP
    this._mapBase = $(this.id + '_ColorMap');
    this._mapBase.style.width = this.settings.canvasWidth + 'px';
    this._mapBase.style.height = this.settings.canvasHeight + 'px';
    this._mapBase.style.padding = 0;
    this._mapBase.style.margin = 0;
    this._mapBase.style.position = 'relative';

    this._mapL1 = new Element('img', {
      src: this.settings.clientFilesPath + 'blank.gif',
      width: this.settings.canvasWidth,
      height: this.settings.canvasHeight
    });
    this._mapL1.style.margin = '0';
    this._mapBase.appendChild(this._mapL1);

    this._mapL2 = new Element('img', {
      src: this.settings.clientFilesPath + 'blank.gif',
      width: this.settings.canvasWidth,
      height: this.settings.canvasHeight
    });
    this._mapBase.appendChild(this._mapL2);
    this._mapL2.style.clear = 'both';
    this._mapL2.style.position = 'absolute';
    this._mapL2.style.top = '0';
    this._mapL2.style.left = '0';
    this._mapL2.setOpacity(0.5);


    // BAR
    this._bar = $(this.id + '_ColorBar');
    this._bar.style.width = this.defaultOptions.sliderWidth + 'px';
    this._bar.style.height = this.settings.canvasHeight + 'px';

    this._barL1 = new Element('img', {
      src: this.settings.clientFilesPath + 'blank.gif',
      width: this.settings.sliderWidth,
      height: this.settings.canvasHeight
    });
    this._barL1.style.margin = '0';
    this._barL1.style.position = 'absolute';
    this._barL1.style.top = '0';
    this._barL1.style.left = '0';

    this._bar.appendChild(this._barL1);

    this._barL2 = new Element('img', {
      src: this.settings.clientFilesPath + 'blank.gif',
      width: this.settings.sliderWidth,
      height: this.settings.canvasHeight
    });
    this._barL2.style.position = 'absolute';
    this._barL2.style.top = '0';
    this._barL2.style.left = '0';
    this._bar.appendChild(this._barL2);

    this._barL3 = new Element('img', {
      src: this.settings.clientFilesPath + 'blank.gif',
      width: this.settings.sliderWidth,
      height: this.settings.canvasHeight
    });
    this._barL3.style.position = 'absolute';
    this._barL3.style.top = '0';
    this._barL3.style.left = '0';
    this._barL3.style.backgroundColor = '#ff0000';
    this._bar.appendChild(this._barL3);

    this._barL4 = new Element('img', {
      src: this.settings.clientFilesPath + 'bar-brightness.png',
      width: this.settings.sliderWidth,
      height: this.settings.canvasHeight
    });
    this._barL4.style.position = 'absolute';
    this._barL4.style.top = '0';
    this._barL4.style.left = '0';
    this._bar.appendChild(this._barL4);

    // attach map slider
    this._map = new Refresh.Web.Slider(this._mapL2, {
      xMaxValue: 255,
      yMinValue: 255,
      arrowImage: this.settings.clientFilesPath + 'mappoint.gif',
      container: this._mapBase
    });

    // attach color slider
    this._slider = new Refresh.Web.Slider(this._barL4, {
      xMinValue: 1,
      xMaxValue: 1,
      yMinValue: 255,
      arrowImage: this.settings.clientFilesPath + 'rangearrows.gif',
      container: this._bar
    });

    // attach color values
    this._cvp = new Refresh.Web.ColorValuePicker(this.id);

    this._cvp.parentInstance = this;

    // link up events
    var cp = this;

    this._slider.onValuesChanged = function() { cp.sliderValueChanged() };
    this._map.onValuesChanged = function() { cp.mapValueChanged(); }
    this._cvp.onValuesChanged = function(silent) { cp.textValuesChanged(silent); }

    // initialize values
    this.setColorMode(this.settings.startMode);

    if (this.settings.startHex && this._cvp._hexInput) {
      this._cvp._hexInput.value = this.settings.startHex;
    }
    this._cvp.setValuesFromHex();
    this.positionMapAndSliderArrows();
    this.updateVisualsAndNotify();

    this.color = null;
  },