var controls = (function(){

	var controls = {}
	
	
	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(){
		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.fill(fg,bg)
			}
		})
	}
	
	controls.square = new Tool (square_el)
	controls.square.use = function(){
		brush.generate = controls.square.generate
		brush.generate()
		drawing = true
		brush.modified = false
	}
	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
	}
	controls.text.generate = function(){
	}
	

	controls.clear = new Tool (clear_el)
	controls.clear.use = function(){
		canvas.clear()
	}
	

	controls.grid = new Tool (grid_el)
	controls.grid.use = function(){
		document.body.classList.toggle('grid')
	}


	controls.shader = new Tool (shader_el)
	controls.shader.use = function(){
		shader_textarea.style.display = "block"
		// setTimeout(function(){ shader_textarea.focus() })
		shader_textarea.focus()
	}
	controls.shader.blur = function(){
		Tool.prototype.blur.call(this)
		shader_textarea.style.display = "none"		
	}
	shader_textarea.value = demo_shader.innerHTML
	shader_textarea.addEventListener("input", function(){
		var fn = shader.build(shader_textarea.value)
		fn && shader.run(canvas)
	})
	
	controls.save = new Tool (save_el)
	controls.save.use = function(){
		clipboard.show()
		clipboard.export_mode()
	}
	controls.save.blur = function(){
		Tool.prototype.blur.call(this)
		clipboard.hide()
	}
	controls.load = new Tool (load_el)
	controls.load.use = function(){
		clipboard.show()
		clipboard.import_mode()
	}
	controls.load.blur = function(){
		Tool.prototype.blur.call(this)
		clipboard.hide()
	}
		
	controls.animate = new Tool (animate_checkbox)
	controls.animate.use = function(){
		var state = shader.toggle()
		if (state) animate_checkbox.innerHTML = "x animate"
		else       animate_checkbox.innerHTML = "_ animate"
	}
	
	
	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.text,
			controls.clear,
			controls.grid,
			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 == 1) {
				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) || 1
		  controls.canvas_width.char = w+""
		  controls.canvas_width.build()
			canvas.resize(w, canvas.h)
		}
		controls.canvas_height.onBlur = function(){
		  var h = parseInt(controls.canvas_height.char) || 1
		  controls.canvas_height.char = h+""
		  controls.canvas_height.build()
			canvas.resize(canvas.w, h)
		}

		controls.canvas_height.key = int_key(function(n, keyCode){
			controls.canvas_height.read()
			if (controls.canvas_height.char.length == 1) {
				n = parseInt(controls.canvas_height.char) * 10 + n
			}
			controls.canvas_height.char = ""+n
			controls.canvas_height.build()
			canvas.resize(canvas.w, n)
		})
	}

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

	return controls
})()