String.prototype.hex = function(){
  return parseInt(this, 16);
};

/* FIXME prototype.js's bug? */
Position.cumulativeOffset = function(element) {
  var valueT = 0, valueL = 0;
  if(element){
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
    } while (element);
  };
  return [valueL, valueT];
};

Control.ColorPallet = Class.create();
Control.ColorPallet.prototype = 
{
  initialize: function(element, input){
    element = $(element);
    this.element = element;
    var child = document.createElement('div');
    element.appendChild(child);
    
    if(input) this.input = $(input);

    var parent = document.createElement('div');
    parent.className = 'parent_track';

    var color = document.createElement('div');
    color.className = 'color';
    this.color = color;

    var color_parent = document.createElement('div');
    color_parent.className = 'parent_color';

    element.appendChild(parent);

    this.red = this.getSlider(child, parent, 'red');
    this.green = this.getSlider(child, parent, 'green');
    this.blue = this.getSlider(child, parent, 'blue');
    this.black = this.getSlider(child, parent, 'black');
    
    color_parent.appendChild(color);
    element.appendChild(color_parent);
    var clear = document.createElement('div');
    clear.style.clear = 'both';
    element.appendChild(clear);
  },
  getSlider: function(element, parent, col){
    var track_col = document.createElement('div');
    track_col.className = col + '_track';

    var track = document.createElement('div');
    track.className = 'track';
    var handle = document.createElement('div');
    handle.className = 'handle';
    var img = document.createElement('img');
    img.src = '/images/icons/' + col + '_tri.png';
    handle.appendChild(img);
    
    track.appendChild(handle);
    track_col.appendChild(track);
    parent.appendChild(track_col);
    return new Control.ColorSlider(handle,track , {
      range:$R(0,255),
      onChange:(function(v){
        if(col == 'black'){
          this.red.setValue(this.black.value);
          this.green.setValue(this.black.value);
          this.blue.setValue(this.black.value);
        };
        track.style.borderTopColor = this.getBTC(col);
        this.color.style.backgroundColor = '#' + this.getColor();
        if(this.input){
          this.input.value = this.getColor().toUpperCase();
          if(this.input.onchange)
            this.input.onchange();
        }
      }).bind(this),
      onSlide:(function(v){
        if(col == 'black'){
          this.red.setValue(this.black.value);
          this.green.setValue(this.black.value);
          this.blue.setValue(this.black.value);
        };
        track.style.borderTopColor = this.getBTC(col);
        this.color.style.backgroundColor = '#' + this.getColor();
        if(this.input){
          this.input.value = this.getColor().toUpperCase();
          if(this.input.onchange)
            this.input.onchange();
        }
      }).bind(this)
    });
  },
  getBTC: function(col){
    var c = parseInt((255 + this[col].value) / 2).toColorPart();
    if(col == 'red')
      return '#' + c + '0000';
    else if(col == 'blue')
      return '#0000' + c + '';
    else if(col == 'green')
      return '#00' + c + '00';
    else if(col == 'black')
      return '#' + c + c + c;
  },
  setColor: function(col){
    if(!(col.match(/^[0-9a-fA-F]{6}$/)))
      return false;
    this.red.setValue(col.substring(0,2).hex());
    this.green.setValue(col.substring(2,4).hex());
    this.blue.setValue(col.substring(4,6).hex());
    this.black.setValue(parseInt((this.red.value + this.green.value + this.blue.value) / 3))
    this.red.setValue(col.substring(0,2).hex());
    this.green.setValue(col.substring(2,4).hex());
    this.blue.setValue(col.substring(4,6).hex());
  },
  getColor: function(){
    return this.red.value.toColorPart() + this.green.value.toColorPart() + this.blue.value.toColorPart();
  }
};

Control.ColorSlider = Control.Slider;
Control.ColorSlider.prototype._getNearestValue = Control.ColorSlider.prototype.getNearestValue;
Control.ColorSlider.prototype.getNearestValue = function(value){
  return parseInt(this._getNearestValue(value));
};