var ColorControl = View.extend({
  el: ".colorcontrol",
  
  events: {
    "mousedown": "stopPropagation",
    "click .color-swatches span": "setSurface",
    "click .colors span": "setHue",
  },

	colors: [
		[255,94,58],
		[255,149,0],
		[255,219,76],
		[76,217,100],
		[52,170,220],
		[29,98,240],
		[198,68,252],
		[0,0,0],
		[74,74,74],
		[125,126,127],
		[209,211,212],
		[235,235,235],
		[255,255,255],
	],
  
  initialize: function(opt){
    this.parent = opt.parent

    this.colorPicker = new LabColorPicker(this, 155, 155)
    this.$(".color-picker").append( this.colorPicker.canvas )
    this.$(".color-picker").append( this.colorPicker.cursor )
    this.$(".slider").append( this.colorPicker.brightness )
    
    this.$swatches = this.$(".swatch")
    this.$labels = this.$(".swatch + label")
    this.$swatch = {
      wall: this.$("#wall-color"),
      outline: this.$("#outline-color"),
      floor: this.$("#floor-color"),
      ceiling: this.$("#ceiling-color"),
    }
    
    this.$colors = this.$(".colors")
    this.colors.forEach(function(color){
    	var $swatch = $("<span>")
    	$swatch.css("background-color","rgb(" + color + ")")
    	$swatch.data('color', color)
    	this.$colors.append($swatch)
    }.bind(this))
    
    if ($.browser.mozilla) {
      $("#floor-color").parent().hide()
      $("#ceiling-color").parent().hide()
    }
  },

  modes: [ "wall", "outline", "floor", "ceiling" ],

  load: function(data){
    this.modes.forEach(function(mode){
			Walls.setColor[mode](data[mode])
			this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
    }.bind(this))
    this.setMode("wall")
  },
  
  loadDefaults: function(){
    var colors = {
      wall: app.defaults.colors.wall.slice(),
      outline: app.defaults.colors.outline.slice(),
      floor: app.defaults.colors.floor.slice(),
      ceiling: app.defaults.colors.ceiling.slice(),
    }
    this.load(colors)
  },
  
  toggle: function(state){
    if (state) {
      this.parent.cursor.message("colors")
    }
    this.$el.toggleClass("active", state);
  },
  
  show: function(){
    this.toggle(true)
  },
  
  hide: function(){
    this.toggle(false)
  },
  
  pickColor: function(rgb, Lab){
    this.labColor = Lab
    this.setSwatchColor(this.mode, rgb)
    // console.log(rgb)
    Walls.setColor[ this.mode ](rgb)
    this.parent.presets.modified = true
  },
  
  setSwatchColor: function(mode, rgb) {
    this.$swatch[ mode ].css("background-color", rgb_string(rgb))
  },
  
  initialState: null,
  
  begin: function(){  
    this.initialState = this.serialize()
  },
  
  serialize: function(){
    return {
      mode: this.mode,
      rgb: Walls.colors[ this.mode ]
    }
  },
  
  finalize: function(){
    if (! this.initialState) { return }
    UndoStack.push({
      type: 'update-colors',
      undo: this.initialState,
      redo: this.serialize(),
    })

    this.initialState = null

    // TODO: watch individual wall object here
    Minotaur.watch( app.router.editorView.settings )
  },
  
  setMode: function (mode) {
    var color, brightness
    this.mode = mode
    this.$(".active").removeClass("active")
    this.$swatch[ mode ].parent().addClass("active")
    color = Walls.colors[ mode ]
    
    this.labColor = this.colorPicker.load(color)
  },
  
  setSurface: function(e){
    var mode = $('.swatch', e.currentTarget).data('mode')
    this.setMode(mode)
  },
  
  setHue: function(e){
  	var color = $(e.currentTarget).data('color')
    this.labColor = this.colorPicker.load(color)
    this.pickColor(color, this.labColor)
  }

})