3 files changed, 119 insertions, 58 deletions

diff --git a/img/brush.png b/img/brush.png
new file mode 100644
index 0000000..72fe926
--- /dev/null
+++ b/img/brush.png
diff --git a/img/eraser.png b/img/eraser.png
new file mode 100644
index 0000000..564949e
--- /dev/null
+++ b/img/eraser.png
diff --git a/sketch.html b/sketch.html
index aa5f5de..fe22e7a 100644
--- a/sketch.html
+++ b/sketch.html
@@ -22,7 +22,18 @@ user-select: none;
 //  position: absolute;
 }
 
-
+.brush_tools{
+  padding:5px;
+  display: inline-block;
+  background: whitesmoke;
+  border: 1px solid gray;
+  cursor: pointer;
+}
+#brush{
+  background:gray;
+  color: white;
+  border: 1px solid black;
+}
 </style>
 
 </head>
@@ -43,16 +54,93 @@ user-select: none;
 </tr>
 </table>
 
-
+<div id="tools">
+  <div id="brush" class="brush_tools">Brush</div>
+  <div id="eraser" class="brush_tools">Eraser</div>
+</div>
 </body>
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
+//dragging event 
+var isDragging = false;
+$("body").mousedown(function() {
+    $(window).mousemove(function() {
+        isDragging = true;
+        $(window).unbind("mousemove");
+    });
+}).mouseup(function() {
+    var wasDragging = isDragging;
+    isDragging = false;
+    $(window).unbind("mousemove");
+    if (!wasDragging) { //was clicking
+    }
+});
+
 var c;
+
+window.active_tool = "brush";
+var brush_tools; 
+
+
+
+function BrushTools(){
+  var brushtools = this;
+  this.brush = $("#brush");
+  this.eraser = $("#eraser");
+  this.brush_tools = $(".brush_tools");
+  this.active_css = {
+    "border" : "1px solid black",
+    "background" : "gray",
+    "color" : "white",
+  },
+  this.inactive_css = {
+    "border" : "1px solid gray",
+    "background" : "whitesmoke",
+    "color" : "black",
+  };
+  this.activate = function(elem){
+    $(elem).css(this.active_css);
+    window.active_tool = $(elem).attr("id");
+  };
+  this.deactivate = function(elem){
+    $(elem).css(this.inactive_css);
+  };
+//  this.cursors = {
+//    "brush" : "img/brush.png",
+//    "eraser" : "img/eraser.png",
+//  };
+  this.brush_tools.click(function(){
+    var that = this;
+    window.active_tool = $(this).attr("id");
+    brushtools.activate(that);
+    brushtools.brush_tools.each(function(){
+      if(this != that){
+        brushtools.deactivate(this);
+      }
+    }); 
+//   $("#canvas_wrapper").css(
+//     "cursor" , "url("+brushtools.cursors[window.active_tool]+")"
+//   ) 
+  });
+}
+
+
 function GridCanvas(){
+  var gridcanvas = this;
   this.rows = 10;
   this.cols = 10;
+  this.current_rows = [];
   this.container = $("#canvas_wrapper");
+  this.paint = function(elem){
+    $(elem).attr("painted", "1");
+    $(elem).css("background", "black");
+  };
+  this.erase = function(elem){
+    $(elem).attr("painted", "0");
+    $(elem).css("background", "white");
+  };
   this.initialize = function(cols, rows){
+    this.container.html("");
     this.rows = rows;
     this.cols = cols;
     for (var i = 0; i< this.rows; i++){
@@ -66,12 +154,19 @@ function GridCanvas(){
         $(cell).addClass("column_"+j)
         $(cell).html("&nbsp;")
         $(cell).click(function(){
-          if ($(this).attr("painted") == "0"){
-            $(this).attr("painted", "1");
-            $(this).css("background", "black");
-          }else{
-            $(this).attr("painted", "0");
-            $(this).css("background", "white");
+          if (window.active_tool == 'brush'){
+            gridcanvas.paint(this);
+          }else if(window.active_tool == 'eraser'){
+            gridcanvas.erase(this);
+          }
+        });
+        $(cell).mouseover(function(){
+          if (isDragging){
+            if (window.active_tool == 'brush'){
+              gridcanvas.paint(this);
+            }else if(window.active_tool == 'eraser'){
+              gridcanvas.erase(this);
+            }
           }
         });
         $(row).append(cell)
@@ -79,6 +174,17 @@ function GridCanvas(){
       this.container.append(row)
     }
   }
+  this.serialize = function(){
+    var matrix = [];
+    for (var i = 0; i < this.rows; i++){
+      var row_storage = [];
+      $("#row_"+i+"> span").each(function(){
+         row_storage.push($(this).attr("painted"));
+      });
+      matrix.push(row_storage);
+    }
+    return matrix;
+  }
 }
 $("#cols").change(function(){
   var cols = $(this).val()
@@ -88,61 +194,16 @@ $("#rows").change(function(){
   var rows = $(this).val()
   c.initialize(c.cols, rows);
 });
+
+
+
+
 $(document).ready(function(){
   
   c = new GridCanvas();
+  brush_tools = new BrushTools();
   c.initialize($("#cols").val(), $("#rows").val());
 });
 
-//var isDragging = false;
-//$("a")
-//.mousedown(function() {
-//    $(window).mousemove(function() {
-//        isDragging = true;
-//        $(window).unbind("mousemove");
-//    });
-//})
-//.mouseup(function() {
-//    var wasDragging = isDragging;
-//    isDragging = false;
-//    $(window).unbind("mousemove");
-//    if (!wasDragging) { //was clicking
-//        $("#throbble").show();
-//    }
-//});
-//      lex.span.addEventListener('mousedown', function(e){
-//        e.preventDefault()
-//        dragging = true
-//        current_canvas = canvas
-//        if (drawing) {
-//          draw.down(e, lex, point)
-//        }
-//        else if (selecting) {
-//          selection.down(e, lex, point)
-//        }
-//        else if (filling) {
-//          draw.fill(brush, x, y)
-//        }
-//        lex.focus()
-//      })
-//      lex.span.addEventListener("mousemove", function(e){
-//        if (! dragging) return
-//        if (drawing) {
-//          draw.move(e, lex, point)
-//        }
-//        else if (selecting) {
-//          selection.move(e, lex, point)
-//        }
-//        lex.focus()
-//      })
-//
-//    })
-//  }
-//
-//  return exports
-//
-//})()
-
-
 </script>
 </html>