5 files changed, 71 insertions, 23 deletions

diff --git a/js/app.js b/js/app.js
index ab2c1ab..96faa7b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -28,7 +28,7 @@ function build () {
 	brush.generate()
 	brush.build()
 
-	controls.grid.use()
+	// controls.grid.use()
 }
 function bind () {
 	canvas.bind()
diff --git a/js/lex.js b/js/lex.js
index 8c3b0f1..bfc8e8e 100644
--- a/js/lex.js
+++ b/js/lex.js
@@ -17,7 +17,7 @@ Lex.prototype.build = function(){
 	this.span.innerHTML = this.html()
 }
 Lex.prototype.css = function(){
-	if (this.opacity == 0) return "fabb"
+	if (this.opacity == 0 && ! this.char) return "fabb"
 	return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,16)]
 }
 Lex.prototype.html = function(){
@@ -57,6 +57,14 @@ Lex.prototype.clone = function (lex){
 	this.opacity = lex.opacity
 	this.build()
 }
+Lex.prototype.paint = function (lex){
+	if (lex.opacity == 0) return
+	if (brush.draw_fg) this.fg = lex.fg
+	if (brush.draw_bg) this.bg = lex.bg
+	if (brush.draw_char) this.char = lex.char
+	this.opacity = 1
+	this.build()
+}
 Lex.prototype.copy = function () {
 	var lex = new Lex (0,0)
 	lex.clone(this)
@@ -108,6 +116,6 @@ Lex.prototype.demolish = function(){
 Lex.prototype.key = function(char, keyCode) {
 	if (! char) { return }
 	this.char = char
-	this.fg = brush.bg
+	this.fg = brush.fg
 	this.build()
 }
diff --git a/js/tool.js b/js/tool.js
index 190f29f..d3d40c1 100644
--- a/js/tool.js
+++ b/js/tool.js
@@ -21,4 +21,14 @@ var Tool = Model({
 })
 
 var Checkbox = Tool.extend({
+  init: function (span){
+    this.__init(span)
+    var state = this.name[0] == "x"
+    this.name = this.name.replace(/^[x_] /,"")
+    this.update(state)
+  },
+  update: function(state){
+		if (state) this.el.innerHTML = "x " + this.name
+		else       this.el.innerHTML = "_ " + this.name
+  }
 })
diff --git a/js/ui/brush.js b/js/ui/brush.js
index 50f6e07..9bc80a5 100644
--- a/js/ui/brush.js
+++ b/js/ui/brush.js
@@ -73,6 +73,10 @@ var brush = (function(){
 	brush.bg = 1
 	brush.opacity = 1
 	
+	brush.draw_fg = true
+	brush.draw_bg = true
+	brush.draw_char = true
+	
 	return brush
 
 })()
\ No newline at end of file
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,