1 files changed, 46 insertions, 20 deletions

diff --git a/js/ui/controls.js b/js/ui/controls.js
index 81403db..6f0fb91 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -1,7 +1,7 @@
 var controls = (function(){
 
 	var controls = {}
-	
+
 	controls.circle = new Tool (circle_el)
 	controls.circle.use = function(){
 		brush.generate = controls.circle.generate
@@ -69,15 +69,18 @@ var controls = (function(){
 		canvas.clear()
 	}
 	
-	controls.grid = new Tool (grid_el)
+	controls.grid = new Checkbox (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({
@@ -86,43 +89,63 @@ var controls = (function(){
       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_textarea.style.display = "block"
+      shader_rapper.style.display = "block"
       shader_textarea.focus()
     },
 	  blur: function(){
       this.__blur()
-      shader_textarea.style.display = "none"
+      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.save = new ClipboardTool (save_el)
-	controls.save.use = function(){
-		clipboard.show()
-		clipboard.export_mode()
+	controls.fg = new Checkbox (fg_checkbox)
+	controls.fg.use = function(state){
+		brush.draw_fg = state || ! brush.draw_fg
+		this.update(brush.draw_fg)
 	}
-	controls.load = new ClipboardTool (load_el)
-	controls.load.use = function(){
-		clipboard.show()
-		clipboard.import_mode()
+
+	controls.bg = new Checkbox (bg_checkbox)
+	controls.bg.use = function(state){
+		brush.draw_bg = state || ! brush.draw_bg
+		this.update(brush.draw_bg)
 	}
-		
-	controls.animate = new Tool (animate_checkbox)
-	controls.animate.use = function(){
-		var state = shader.toggle()
-		if (state) this.el.innerHTML = "x animate"
-		else       this.el.innerHTML = "_ animate"
+
+	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)
@@ -150,6 +173,9 @@ var controls = (function(){
 			controls.select,
 			controls.clear,
 			controls.grid,
+			controls.fg,
+			controls.bg,
+			controls.char,
 			controls.shader,
 			controls.animate,
 			controls.save,