var PaletteController = Class.extend({
    
  // {{{ init
  init: function( color, container ) {
    this.color = color;
    this.container = container;
  },
  // }}}
  
  // {{{ show
  show: function( show ) {
    this.log.debug( "Show/hide controller", this.container, show );
    this.container.style.visibility = show ? "visible" : "hidden";
  },
  // }}}

  // {{{ onClose
  onClose: function() {
    this.log.debug( "Closing palette" );
    this.show( false );
    if ( this.parent != null ) {
      this.parent.show( true );
    }
  },
  // }}}
  
  // {{{ toString
  toString: function() {
    return "PaletteController";
  }
  // }}}
});

var ColorView = Class.extend({
    
  // {{{ init
  init: function( color, canvas ) {
    this.log.debug( "init", canvas );
    this.color = color;
    this.width = 100;
    this.height = 100;
    
    this.canvas = canvas;
      
    if ( this.canvas.getContext != null ) {
      this.context = this.canvas.getContext('2d');
      this.draw();
    }
    
    this.color.addListener( this );
  },
  // }}}

  // {{{ draw
  draw: function() {
    this.context.fillStyle = this.color.toString();
    this.context.fillRect( 0,0, this.width, this.height );
    
    var greyGrad = this.context.createLinearGradient( 0,0, this.width, 0 );
    greyGrad.addColorStop( 0, "#fff" );
    greyGrad.addColorStop( 1, "#000" );
    this.context.fillStyle = greyGrad;
    this.context.fillRect( 0,0, this.width, this.height );

    var colorGrad = this.context.createLinearGradient( 0,0, 0, this.height );
    
    this.color.setAlpha( 0 );
    colorGrad.addColorStop( 0, this.color.toString() );
    this.color.setAlpha( 1 );
    colorGrad.addColorStop( 1, this.color.toString() );
    
    this.context.fillStyle = colorGrad;
    this.context.fillRect( 0,0, this.width, this.height );

  },
  // }}}

  // {{{ pick
  pick: function( x, y ) {
    this.log.debug( "Picking color", x, y );
    this.color.setColor( this.color.red, this.color.green, this.color.blue, this.color.alpha );
  },
  // }}}
  
  // {{{ onColorChange
  onColorChange: function() {
    this.draw();
  },
  // }}}
  
  // {{{ onMouseDown
  onMouseDown: function( e ) {
    this.log.debug( "onMouseDown" );

    e = Helpers.resolveMouseEvent( e, this.canvas );

    var me = this;
    document.onmouseup = function(e2) { me.onMouseUp( e2 ); };
    document.onmousemove = function(e3) { me.onMouseMove( e3 ); };

    this.pick( e.relX, e.relY );    
  },
  // }}}
  
  // {{{ onMouseMove
  onMouseMove: function( e ) {
    e = Helpers.resolveMouseEvent( e, this.canvas );

    this.pick( e.relX, e.relY );    
  },
  // }}}
  
  // {{{ onMouseUp
  onMouseUp: function() {
    document.onmouseup = null;
    document.onmousemove = null;
  },
  // }}}
  
  // {{{ toString
  toString: function() {
    return "ColorView";
  }
  // }}}

});

var HueView = Class.extend( {
  
  // {{{ init
  init: function( color, canvas ) {
    this.color = color;
    this.canvas = canvas;
    
    this.height = 100;
    this.width = 25;

    this.arrowWidth = 5;
    this.arrowHeight = 6;
    this.margin = 3;
    
    this.color.addListener( this );
     
    if ( this.canvas.getContext != null ) {                      
      this.context = this.canvas.getContext('2d');
      
      this.hueGrad = this.context.createLinearGradient( 0,0, 0, this.height );
      var color = new Color( 0,0,0 );
      for ( i = 0; i <= this.height; i += 10 ) {
        color.setHue( i / this.height );
        this.hueGrad.addColorStop( i / this.height, color.toString() );
      }
      
      this.draw();
    }
    
  },
  // }}}

  // {{{ draw
  draw: function() {
    this.context.fillStyle = "#fff";
    this.context.fillRect( 0, 0, this.width, this.height );

    this.context.fillStyle = this.hueGrad;
    this.context.fillRect( this.margin, 0, this.width - this.margin * 2, this.height );

    this.context.fillStyle = "#eee;"
    this.context.strokeStyle = "#333";
    this.context.lineWidth = 1;
    
    this.context.beginPath();
    this.context.moveTo( 0, this.color.getHue() * this.height - this.arrowHeight / 2);
    this.context.lineTo( this.arrowWidth, this.color.getHue() * this.height );
    this.context.lineTo( 0, this.color.getHue() * this.height + this.arrowHeight / 2);
    this.context.lineTo( 0, this.color.getHue() * this.height - this.arrowHeight / 2);

    this.context.moveTo( this.width, this.color.getHue() * this.height - this.arrowHeight / 2);
    this.context.lineTo( this.width - this.arrowWidth, this.color.getHue() * this.height );
    this.context.lineTo( this.width, this.color.getHue() * this.height + this.arrowHeight / 2);
    this.context.lineTo( this.width, this.color.getHue() * this.height - this.arrowHeight / 2);

    this.context.fill();
    this.context.stroke();
  },
  // }}}

  // {{{ pick
  pick: function( y ) {
    var hue = y / this.height;
    if ( hue < 0 ) hue = 0;
    if ( hue >= 1) hue = 0;
    this.color.setHue( hue );
    this.log.debug( "Picking Hue", y, hue, this.color.getHue() );
  },
  // }}}
  
  // {{{ onMouseDown
  onMouseDown: function( e ) {
    e = Helpers.resolveMouseEvent( e, this.canvas );

    var me = this;
    document.onmouseup = function(e2) { me.onMouseUp( e2 ); };
    document.onmousemove = function(e3) { me.onMouseMove( e3 ); };

    this.pick( e.relY );    
  },
  // }}}
  
  // {{{ onMouseMove
  onMouseMove: function( e ) {
    e = Helpers.resolveMouseEvent( e, this.canvas );

    this.pick( e.relY );    
  },
  // }}}
  
  // {{{ onMouseUp
  onMouseUp: function() {
    document.onmouseup = null;
    document.onmousemove = null;
  },
  // }}}
    
  // {{{ onColorChange
  onColorChange: function() {
    this.draw();
  },
  // }}}
  
  // {{{ toString
  toString: function() {
    return "HueView";
  }
  // }}}
  
});

var log = new Log().setPrefix( "PaletteEditor " );
PaletteController.prototype.log = log;
ColorView.prototype.log = log;
HueView.prototype.log = log;