var Tool = Model({
  init: function (span) {
    this.el = span
    this.lex = new Lex (span)
    this.name = span.innerHTML
    this.span = span
  },
  use: function(){},
  done: function(){},
  focus: function(){
    // focused && focused.blur()
    current_tool && current_tool.blur()
    current_tool = this
    this.span.classList.add('focused')
    this.use()
    if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
  },
  blur: function(){
    current_tool = null
    this.span.classList.remove('focused')
    this.done()
  }
})

var Checkbox = Tool.extend({
  init: function (span){
    this.__init(span)
    var state = this.name[0] == "x"
    this.name = this.name.replace(/^[x_] /,"")
    this.update(state)
  },
  update: function(state){
    if (state) this.el.innerHTML = "x " + this.name
    else       this.el.innerHTML = "_ " + this.name
  }
})

var BlurredCheckbox = Checkbox.extend({
  focus: function(){
    if (current_tool.name == "shader") {
      shader.toggle(false)
      current_tool.blur()
      current_tool = controls.circle
    }
    this.use()
    if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
  },
  blur: function(){
    this.span.classList.remove('focused')
    this.done()
  }
})

var BlurredTool = Tool.extend({
  focus: function(){
    if (current_tool.name == "shader") {
      shader.toggle(false)
      current_tool.blur()
      current_tool = controls.circle
    }
    this.use()
    if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
  },
  blur: function(){
    this.span.classList.remove('focused')
    this.done()
  }
})

var HiddenCheckbox = BlurredCheckbox.extend({
  init: function (span){
    this.el = span
    this.lex = new Lex (span)
    this.name = span.innerHTML
    this.span = span
    var state = this.name[0] == "o"
    this.update(state)
  },
  update: function(state){
    this.el.innerHTML = state ? "o" : "."
  }
})