var TextEditor = FormView.extend({
	el: "#textEditor",
	tainted: false,
	scenery: null,
		
	events: {
		"keydown": 'taint',
		"focus [name]": "clearMinotaur",
		"mousedown": "stopPropagation",
		"change [name=font-family]": 'changeFontFamily',
		"change [name=font-size]": 'changeFontSize',
		"change [name=text-align]": 'changeTextAlign',
		"click .swatch": 'showColorPicker',
		"click [data-role=hide-color-picker]": 'hideColorPicker',
		"click [data-role=hide-text-editor]": 'hide',
		"input [name=text-body]": 'changeText',
		"click [data-role=destroy-text]": "destroy",
    "click .colors span": "setHue",
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.__super__.initialize.call(this)
    
    this.$textSettings = this.$(".text-setting")
    this.$colorSettings = this.$(".color-setting")
    this.$noTextMessage = this.$(".no-text")
    this.$fontFamily = this.$("[name=font-family]")
    this.$fontSize = this.$("[name=font-size]")
    this.$textBody = this.$("[name=text-body]")
    this.$textAlign = this.$("[name=text-align]")
    this.$swatch = this.$(".swatch")

    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.$colors = this.$(".colors")
    this.parent.colorControl.colors.forEach(function(color){
    	var $swatch = $("<span>")
    	$swatch.css("background-color","rgb(" + color + ")")
    	$swatch.data('color', color)
    	this.$colors.append($swatch)
    }.bind(this))

    this.$(".setting").hide()

    app.on("cancel-scenery", function(){
      this.createMode(true)
      $("body").toggleClass("addText", false)
    }.bind(this))

	},

  toggle: function(state){
    this.$el.toggleClass("active", state)
    if (state) {
			$("#keyhint").fadeOut(200)
      Scenery.nextMedia = {
        type: 'text',
        width: 600,
        height: 450,
        scale: 0.5,
        font: { family: 'Lato', size: 24, align: 'left', color: "#000" },
      }
      this.createMode(true)
    }
    else {
      $("[data-role='toggle-text-editor']").removeClass("inuse")
    }
  },

	hide: function(scenery){
	  Scenery.nextMedia = null
		if (this.scenery) {
			this.unbind()
		}
		this.toggle(false)
	},

	taint: function(e){
	  e.stopPropagation()
		this.tainted = true
	},

	bind: function(scenery){
    this.tainted = false
		this.scenery = scenery
		this.scenery.mx.bound = true
		this.scenery.mx.el.classList.add("picked")
		this.scenery.media.font.color = this.scenery.media.font.color || [0,0,0]
  },
	
	unbind: function(){
	  if (this.scenery) {
      if (this.tainted) {
        Minotaur.watch( app.router.editorView.settings )
      }
	    if (this.scenery.mx) {
        this.scenery.mx.bound = false
        this.scenery.mx.el.classList.remove("picked")
      }
      if (! this.scenery.media || ! this.scenery.media.description || this.scenery.media.description == "") {
        this.scenery.remove()
      }
    }
    this.tainted = false
    this.scenery = null
	},
  
  createMode: function(state){
    this.hideColorPicker()
    this.$textSettings.toggle(! state)
    this.$noTextMessage.toggle(!! state)
    $("body").toggleClass("addText", !! state)
  },
  
  pick: function(scenery){
		if (this.scenery) {
			this.unbind()
		}

    this.parent.settings.hide()
		Scenery.resize.show(scenery)
		Scenery.hovering = true
		
		this.bind(scenery)
		this.$el.toggleClass("active", true)
		this.$textBody.val( this.scenery.media.description )
		
		this.$fontFamily.val( this.scenery.media.font.family )
		this.$fontSize.val( this.scenery.media.font.size )
		this.$textAlign.val( this.scenery.media.font.align )
		this.setSwatchColor( this.scenery.media.font.color )

    this.createMode(false)

    if (! this.scenery.media.description) {
      setTimeout(function(){
        this.$textBody.focus()
      }.bind(this), 100)
    }
  },
  
  taint: function(e){
    e.stopPropagation()
  },
  
  changeFontFamily: function(){
    this.scenery.setFont({ family: this.$fontFamily.val() })
  },

  changeTextAlign: function(){
    this.scenery.setFont({ align: this.$textAlign.val() })
  },
  
  changeFontSize: function(){
    var size = parseInt( this.$fontSize.val() )
    size && this.scenery.setFont({ size: size })
  },
  
  changeText: function(e){
    e.stopPropagation()
    var text = this.$textBody.val()
    this.scenery.setText(text)
  },
  
	destroy: function(){
    this.tainted = false
    this.scenery.remove()
    this.hide()
	},
	
	setSwatchColor: function(rgb){
		this.$swatch.css("background-color", rgb_string(rgb))
	},
	showColorPicker: function(){
    this.$textSettings.hide()
    this.$colorSettings.show()
    
	  var color = this.scenery.media.font.color
    this.labColor = this.colorPicker.load(color)
    this.pickColor(color, this.labColor)
    
    this.$el.addClass("color-mode")
  },
  
	hideColorPicker: function(e){
	  e && e.preventDefault()
    this.$textSettings.show()
    this.$colorSettings.hide()
    this.$el.removeClass("color-mode")
	},

  pickColor: function(rgb, Lab){
    this.labColor = Lab
    this.setSwatchColor(rgb)
    this.scenery.setFont({ color: rgb })
		this.tainted = true
  },

  setHue: function(e){
  	var color = $(e.currentTarget).data('color')
    this.labColor = this.colorPicker.load(color)
    this.pickColor(color, this.labColor)
  },
  
  initialState: null,
  
  begin: function(){
    // this.initialState = this.serialize()
  },
  
  serialize: function(){
    return {
      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 )
  },

})