var controls = (function(){

  var controls = {}

  controls.cross = new Tool (cross_el)
  controls.cross.use = function(){
    brush.generate = controls.cross.generate
    brush.generate()
    drawing = true
    brush.modified = false
  }
  controls.cross.generate = function(){
		brush.fill(brush)
    blit.cross(brush)
  }
  controls.cross.done = function(){
    drawing = false
  }

  controls.circle = new Tool (circle_el)
  controls.circle.use = function(){
    brush.generate = controls.circle.generate
    brush.generate()
    drawing = true
    brush.modified = false
  }
  controls.circle.generate = function(){
		brush.fill(brush)
    blit.circle(brush)
  }
  controls.circle.done = function(){
    drawing = false
  }
  
  controls.square = new Tool (square_el)
  controls.square.use = function(){
    brush.generate = controls.square.generate
    brush.generate()
    brush.modified = false
    drawing = true
  }
  controls.square.generate = function(){
		brush.fill(brush)
  }
  controls.square.done = function(){
    drawing = false
  }
  
  controls.text = new Tool (text_el)
  controls.text.use = function(){
    brush.generate = controls.text.generate
    brush.generate()
  }
  controls.text.generate = function(){
  }

  controls.select = new Tool (select_el)
  controls.select.use = function(){
    selection.show()
  }
  controls.select.done = function(){
    selection.hide()
  }

  controls.fill = new Tool (fill_el)
  controls.fill.use = function(){
    filling = true
    document.body.classList.add("bucket")
  }
  controls.fill.done = function(){
    filling = false
    document.body.classList.remove("bucket")
  }
  
  controls.clear = new BlurredTool (clear_el)
  controls.clear.use = function(){
  	if (confirm("really delete this colorcode?")) {
			canvas.erase()
		}
  }

  controls.webcam = new BlurredTool (webcam_el)
  controls.webcam.load = function(){
    this.loaded = true
    webcam_close.addEventListener("click", function(){ controls.webcam.blur() })
    window.addEventListener("message", function(e){
      if (e.origin !== window.location.origin) return
      controls.webcam.blur()
      controls.circle.focus()
      import_textarea.value = e.data
      clipboard.import_colorcode()
    })
  }
  controls.webcam.use = function(){
    if (! this.loaded) {
      this.load()
    }
    webcam_iframe.src = "webcam.html"
    webcam_rapper.style.display = "block"
  }
  controls.webcam.done = function(){
    webcam_iframe.src = ""
    webcam_rapper.style.display = "none"
  }
  
  controls.grid = new BlurredCheckbox (grid_el)
  controls.grid.use = function(){
    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({
  	active: false,
    use: function(state){
    	this.active = typeof state == "boolean" ? state : ! this.active
    	if (this.active) {
				shader_rapper.style.display = "block"
				shader_textarea.focus()
			}
			else {
				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.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)
  controls.experimental_palette.use = function(state){
    var state = palette.experimental()
    this.update(state)
  }

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

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

  controls.char = new BlurredCheckbox (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.webcam,
      controls.fg,
      controls.bg,
      controls.char,
      controls.shader,
      controls.animate,
      controls.save,
      controls.load,
      controls.experimental_palette
    ].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
})()