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',
		"input [name=text-body]": 'changeText',
		"click [data-role=destroy-text]": "destroy",
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.__super__.initialize.call(this)
    
    this.$settings = this.$(".setting")
    this.$noTextMessage = this.$(".no-text")
    this.$fontFamily = this.$("[name=font-family]")
    this.$fontSize = this.$("[name=font-size]")
    this.$textBody = this.$("[name=text-body]")
	},

  toggle: function(state){
    $("#keyhint").fadeOut(200)
    
    this.$el.toggleClass("active", state)
    if (state) {
      Scenery.nextMedia = { type: 'text', width: 300, height: 150 }
      this.createMode(true)
    }
  },

	hide: function(scenery){
		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")
	},
	
	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")
      }
    }
    this.tainted = false
    this.scenery = null
	},
  
  createMode: function(state){
    this.$settings.toggle(! state)
    this.$noTextMessage.toggle(!! state)
    $("body").toggleClass("addText", !! state)
  },
  
  pick: function(scenery){
		if (this.scenery) {
			this.unbind()
		}

		Scenery.resize.show(scenery)
		Scenery.hovering = true
		
		this.bind(scenery)
		this.$el.toggleClass("active", true)
		this.$textBody.val( this.scenery.media.description )

    this.createMode(false)

    if (! this.scenery.media.description) {
      setTimeout(function(){
        this.$textBody.focus()
      }.bind(this), 100)
    }
  },
  
  taint: function(e){
    e.stopPropagation()
  },
  
  changeFontFamily: function(){
  },
  
  changeFontSize: function(){
  },
  
  changeText: function(e){
    e.stopPropagation()
    var text = this.$textBody.val()
    this.scenery.setText(text)
  },
  
	destroy: function(){
    var scenery = this.scenery
    this.hide()
    Scenery.remove(scenery.id)
    Scenery.resize.hide()
	},

})