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')
    if (!selection.hidden) selection.reposition()
    this.update( document.body.classList.contains("grid") )
  }
  controls.grid.show = function(){
    document.body.classList.add('grid')
    if (!selection.hidden) selection.reposition()
    this.update( true )
  }
  controls.grid.hide = function(){
    document.body.classList.remove('grid')
    if (!selection.hidden) selection.reposition()
    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()
  }
  
  //

  var 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"
      }
    },
    done: function(){
      this.use(false)
    }
  })
  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.shader.focus()
    controls.shader.use(true)
  }
 
  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.rotate = new BlurredCheckbox (rotate_checkbox)
  controls.rotate.use = function(state){
  	canvas.rotated = typeof state == "boolean" ? state : ! canvas.rotated
		if (canvas.rotated) {
			canvas_rapper.parentNode.classList.add("rotated")
			canvas_rapper.parentNode.style.height = (canvas_rapper.offsetWidth+20) + "px"
			// canvas_rapper.parentNode.style.width = (canvas_rapper.offsetHeight+20) + "px"
			canvas_rapper.style.top = ((canvas_rapper.offsetWidth+20)/2) + "px"
			// canvas_rapper.style.left = ((canvas_rapper.offsetHeight+20)/2) + "px"
		}
		else {
			canvas_rapper.parentNode.classList.remove("rotated")
			canvas_rapper.parentNode.style.height = (canvas_rapper.offsetHeight+20) + "px"
			// canvas_rapper.parentNode.style.width = (canvas_rapper.offsetWidth+20) + "px"
			canvas_rapper.style.top = "auto"
			// canvas_rapper.style.left = "auto"
		}
		this.update(canvas.rotated)
  }

  //
  
  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.rotate,
      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 = keys.single_numeral_key(controls.width, brush, "w", 1, 10)
    controls.width.raw_key = keys.arrow_key(controls.width, brush, "w", "rebuild", 1, 100)

    controls.height.key = keys.single_numeral_key(controls.height, brush, "h", 1, 10)
    controls.height.raw_key = keys.arrow_key(controls.height, brush, "h", "rebuild", 1, 100)

    controls.canvas_width.raw_key = keys.arrow_key(controls.canvas_width, canvas, "w", "resize", 1, 999)
    controls.canvas_width.key = keys.multi_numeral_key(controls.canvas_width, 3)
    controls.canvas_width.onBlur = keys.multi_numeral_blur(controls.canvas_width, canvas, "w", 1, 999)

    controls.canvas_height.raw_key = keys.arrow_key(controls.canvas_height, canvas, "h", "resize", 1, 999)
    controls.canvas_height.key = keys.multi_numeral_key(controls.canvas_height, 3)
    controls.canvas_height.onBlur = keys.multi_numeral_blur(controls.canvas_height, canvas, "h", 1, 999)
        
    add_custom_el.addEventListener("click", function(){
      custom.clone()
    })

  }

  return controls
})()