var controls = (function(){

  var controls = {}

  controls.cross = new Tool (cross_el)
  controls.cross.use = function(){
    brush.generate = controls.cross.generate
    brush.generate()
    drawing = true
    filling = false
    selection.hide()
    brush.modified = false
  }
  controls.cross.generate = function(){
    brush.forEach(function(lex,x,y) {
      if ((x+y)%2) {
        lex.clear()
      }
      else {
        lex.assign(brush)
      }
    })
  }

  controls.circle = new Tool (circle_el)
  controls.circle.use = function(){
    brush.generate = controls.circle.generate
    brush.generate()
    drawing = true
    filling = false
    selection.hide()
    brush.modified = false
  }
  controls.circle.generate = function(){
    var fg = brush.fg, bg = brush.bg
    var hw = brush.w/2|0, hh = brush.h/2|0
    brush.forEach(function(lex,x,y) {
      var len = Math.sqrt(Math.pow(x-hw,2)+Math.pow(y-hh,2))
      if (len > Math.abs(hw)) {
        lex.clear()
      }
      else {
        lex.assign(brush)
      }
    })
  }
  
  controls.square = new Tool (square_el)
  controls.square.use = function(){
    brush.generate = controls.square.generate
    brush.generate()
    brush.modified = false
    drawing = true
    filling = false
    selection.hide()
  }
  controls.square.generate = function(){
    var fg = brush.fg, bg = brush.bg
    brush.fill(fg,bg)
  }
  
  controls.text = new Tool (text_el)
  controls.text.use = function(){
    brush.generate = controls.text.generate
    brush.generate()
    drawing = false
    filling = false
    selection.hide()
  }
  controls.text.generate = function(){
  }

  controls.select = new Tool (select_el)
  controls.select.use = function(){
    drawing = false
    filling = false
    selection.show()
  }

  controls.fill = new Tool (fill_el)
  controls.fill.use = function(){
    drawing = false
    filling = true
    selection.hide()
  }
  
  controls.clear = new Tool (clear_el)
  controls.clear.use = function(){
    canvas.erase()
  }
  
  controls.grid = new Checkbox (grid_el)
  controls.grid.use = function(){
    selection.hide()
    document.body.classList.toggle('grid')
    this.update( document.body.classList.contains("grid") )
  }
  controls.grid.show = function(){
    document.body.classList.add('grid')
    this.update( true )
  }
  controls.grid.hide = function(){
    document.body.classList.remove('grid')
    this.update( false )
  }

  ClipboardTool = Tool.extend({
    blur: function(){
      this.__blur()
      clipboard.hide()
    }
  })
  controls.save = new ClipboardTool (save_el)
  controls.save.use = function(){
    clipboard.show()
    clipboard.export_mode()
  }
  controls.load = new ClipboardTool (load_el)
  controls.load.use = function(){
    clipboard.show()
    clipboard.import_mode()
  }
  
  //

  ShaderTool = Tool.extend({
    use: function(){
      shader_rapper.style.display = "block"
      shader_textarea.focus()
    },
    blur: function(){
      this.__blur()
      shader_rapper.style.display = "none"
    }
  })  
  controls.shader = new ShaderTool (shader_el)
  shader_textarea.value = demo_shader.innerHTML
  shader_textarea.addEventListener("input", function(){
    var fn = shader.build(shader_textarea.value)
    fn && shader.run(canvas)
  })
  controls.animate = new Checkbox (animate_checkbox)
  controls.animate.use = function(state){
    var state = shader.toggle()
    this.update(state)
  }

  //
  
  controls.fg = new Checkbox (fg_checkbox)
  controls.fg.use = function(state){
    brush.draw_fg = state || ! brush.draw_fg
    this.update(brush.draw_fg)
  }

  controls.bg = new Checkbox (bg_checkbox)
  controls.bg.use = function(state){
    brush.draw_bg = state || ! brush.draw_bg
    this.update(brush.draw_bg)
  }

  controls.char = new Checkbox (char_checkbox)
  controls.char.use = function(state){
    brush.draw_char = state || ! brush.draw_char
    this.update(brush.draw_char)
  }
  
  //
  
  controls.width = new Lex (width_el)
  controls.height = new Lex (height_el)
  controls.canvas_width = new Lex (canvas_width_el)
  controls.canvas_height = new Lex (canvas_height_el)

  // bind  
  
  controls.bind = function(){
    [
      controls.width,
      controls.height,
      controls.canvas_width,
      controls.canvas_height
    ].forEach(function(lex){
      lex.span.addEventListener('mousedown', function(e){
        lex.focus()
      })
    });
    
    [
      controls.square,
      controls.circle,
      controls.cross,
      controls.text,
      controls.fill,
      controls.select,
      controls.clear,
      controls.grid,
      controls.fg,
      controls.bg,
      controls.char,
      controls.shader,
      controls.animate,
      controls.save,
      controls.load
    ].forEach(function(tool){
      tool.span.addEventListener('mousedown', function(e){
        tool.focus()
      })
    })
  
    controls.width.key = int_key(function(n, keyCode){
      controls.width.blur()
      controls.width.char = ""+n
      controls.width.build()
      brush.w = n
      brush.rebuild()
    })
    controls.height.key = int_key(function(n, keyCode){
      controls.height.blur()
      controls.height.char = ""+n
      controls.height.build()
      brush.h = n
      brush.rebuild()
    })
  
    controls.canvas_width.key = int_key(function(n, keyCode){
      controls.canvas_width.read()
      if (controls.canvas_width.char.length < 3) {
        n = parseInt(controls.canvas_width.char) * 10 + n
      }
      controls.canvas_width.char = ""+n
      controls.canvas_width.build()
    })
    controls.canvas_width.onBlur = function(){
      var w = parseInt(controls.canvas_width.char)
      if (! w) return;
      controls.canvas_width.char = w+""
      controls.canvas_width.build()
      canvas.resize(w, canvas.h)
    }

    controls.canvas_height.key = int_key(function(n, keyCode){
      controls.canvas_height.read()
      if (controls.canvas_height.char.length < 3) {
        n = parseInt(controls.canvas_height.char) * 10 + n
      }
      controls.canvas_height.char = ""+n
      controls.canvas_height.build()
    })
    controls.canvas_height.onBlur = function(){
      var h = parseInt(controls.canvas_height.char)
      if (! h) return;
      controls.canvas_height.char = h+""
      controls.canvas_height.build()
      canvas.resize(canvas.w, h)
    }
    
		add_custom_el.addEventListener("click", function(){
			custom.clone()
		})

  }

  function int_key (f) {
    return function (key, keyCode) {
      var n = parseInt(key)
      ! isNaN(n) && f(n)
    }
  }

  return controls
})()