$.extend($s, {
  colorpicker: {
    hues: [
    [255, 255, 255 ], // white
    [255,   0,   0 ], // red
    [255, 255,   0 ], // yellow
    [  0, 255,   0 ], // green
    [  0, 255, 255 ], // cyan
    [  0,   0, 255 ], // blue
    [255,   0, 255 ]], // magenta
    
    id: 'thecolorpicker',
  
    init: function() {
    },
    
    selectColor: function(x, y) {
      //we should be able to recalculate the color based on the x and y position
      var regionSize = $('#' + $s.colorpicker.id)[0].width / (this.hues.length-1);
      var region = 0;
      var height = $('#' + $s.colorpicker.id)[0].height;
      while(x > regionSize) {
        region++;
        x -= regionSize;
      }

      var colors = [0,0,0];
      for(var a=0; a<3; a++) {
      	colors[a] = this.hues[region][a];
	colors[a] += (x/regionSize) * (this.hues[region+1][a] - this.hues[region][a]);
	colors[a] *= (height-y)/height;
      }
      
      //$s.drawing.setColor('ffffff');
      $s.drawing.setColor(this.rgbToHex(colors[0],colors[1],colors[2]));
    },
    
    rgbToHex: function(r, g, b) {
      return this.toHex(r)+this.toHex(g)+this.toHex(b);
    },
    
    toHex: function(N) {
       if (N==null) return "00";
       N=parseInt(N); if (N==0 || isNaN(N)) return "00";
       N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
       return "0123456789ABCDEF".charAt((N-N%16)/16)
            + "0123456789ABCDEF".charAt(N%16);
    },
    
    draw: function() {
      var el = $('#' + $s.colorpicker.id)[0];
      var context = el.getContext("2d");
      
      //create the background gradient of hues
      var background = context.createLinearGradient(0, 0, el.width, 0);
      for(var a=0; a<this.hues.length; a++) {
        var color = 'rgb(' + this.hues[a][0] + ', ' + this.hues[a][1] + ', ' + this.hues[a][2] + ')';
        background.addColorStop(a * 1/(this.hues.length-1), color);
      }
      context.fillStyle = background;
      context.fillRect(0,0,el.width,el.height);
      
      //overlay a transparent to black gradient on top of the image
      var mask = context.createLinearGradient(0, 0, 0, el.height);
      mask.addColorStop(0, 'rgba(0,0,0,0)');
      mask.addColorStop(1, 'rgba(0,0,0,1)');
      context.fillStyle = mask;
      context.fillRect(0,0,el.width,el.height);
      
      $(el).mousemove(function(e){
        $s.colorpicker.selectColor(e.pageX,e.pageY);
      });
      $(el).mouseup(function(e){
        $s.colorpicker.hide();
      });
      
      $(el).each(function(){
        this.ontouchend = function(){
          $s.colorpicker.hide();
        };       
        this.ontouchmove = function(e){
          e.preventDefault();
          if(!e.hasOwnProperty('touches')) {
            return;
          }
          
          if(e.touches.length == 1){ // Only deal with one finger
            var touch = e.touches[0];
            $s.colorpicker.selectColor(touch.pageX,touch.pageY);
          }
        };
      });       
    },
    
    show: function() {
      $('#' + $s.colorpicker.id).show();
    },
    
    hide: function() {
      $('#' + $s.colorpicker.id).hide();
    }
  
  }
});