diff --git a/paint_client.js b/paint_client.js
index 9b2b1a9..76c9dd9 100644
--- a/paint_client.js
+++ b/paint_client.js
@@ -160,32 +160,48 @@ function clearCanvas()
   send_change.send();
 }
 
-function clickCell()
+function clickCell(cell)
 {
   var x = Math.round(canvas_mouse_x/cell_size);
   var y = Math.round(canvas_mouse_y/cell_size);
+  var tableCell;
+  if(cell) {
+    x = parseInt(cell.x);
+    y = parseInt(cell.y);
+  }
+  if(lastCell = [])
+  {
+    lastCell = tableArray[x][y];
+  }
   var c = pen_color;
   for(var i=0; i<pen_size/2; i++) {
     for(var j=0; j<pen_size/2; j++) {
       var cellIndex = x + (pen_size/4 - i);
       var rowIndex = y + (pen_size/4 - j);
       try {
-        var tableCell = tableArray[rowIndex][cellIndex];
+        tableCell = tableArray[rowIndex][cellIndex];
         //console.log(tableCell);
         tableCell.style.backgroundColor = c;
         tableCell.lastUpdated = new Date().getTime();
         if(clickedCells.indexOf(tableCell) === -1)
         {
           clickedCells.push(tableCell); //,pen color?
-          smooth([rowIndex,cellIndex]);
-          lastCell = [rowIndex,cellIndex];
         }
 
       } catch(e) {
-        console.log("Error: Couldn't paint cell ["+rowIndex+", "+cellIndex+"].");
+        console.log("Error: Couldn't paint cell ["+rowIndex+", "+cellIndex+"]:"+e);
       }
     }
   }
+  console.log(x+" "+y);
+  var cellToSmooth = tableArray[x][y];
+  console.log(celltoSmooth);
+  var smoothCells = smooth(cellToSmooth);
+  console.log(smoothCells);
+  lastCell = tableCell;
+  /*for(var k=0; k<smoothCells.length; k++) {
+    clickCell(smoothCells[k]);
+  }*/
 }
 
 function changeClickedCells()
@@ -233,7 +249,7 @@ function pollColors()
 function colorsListener()
 {
   this.endTime = new Date().getTime();
-  // console.log("Request load time: "+(this.endTime-this.startTime)+". Parsing response...");
+  console.log("Request load time: "+(this.endTime-this.startTime)+". Parsing response...");
   var canvas = JSON.parse(this.responseText);
   var cellCount = 0;
   var changedCellCount = 0;
@@ -304,8 +320,19 @@ function smooth(newCell)
 {
   //console.log("new:"+newCell+"old:"+lastCell);
   var pen_radius = pen_size/2;
-  var right, down;
-  if (Math.abs(newCell[0]-lastCell[0]) <= pen_radius && Math.abs(newCell[1]-lastCell[1]) <= pen_radius)
+  //var right, down
+  var newCellX = newCell.x;
+  var newCellY = newCell.y;
+  var lastCellX = lastCell.x;
+  var lastCellY = lastCell.y;
+  var xDiff = newCellX-lastCellX;
+  var xDiffAbs = Math.abs(xDiff);
+  var yDiff = (newCellY-lastCellY);
+  var yDiffAbs = Math.abs(newCellY-lastCellY);
+
+  var cellsToAdd = [];
+
+  if (xDiffAbs <= pen_size && yDiffAbs <= pen_size)
   {
     return;
   }
@@ -316,63 +343,78 @@ function smooth(newCell)
   }*/
   else
   {
-    console.log(lastCell)
-    if (clickDownFlag && clickDragFlag)
+    //console.log(lastCell)
+    if (clickDragFlag)
     {
-      var slope = (newCell[0]-lastCell[0])/(newCell[1]-lastCell[1]);
-      console.log("slope"+slope);
-      for (i = 1; i < Math.abs(newCell[1]-lastCell[1]); i++)
+      var new1, new0;
+      var slope = (newCellX-lastCellX)/(newCellY-lastCellY);
+      for (i = 1; i < xDiffAbs; i+=cell_size)
       {
-        if ((newCell[0]-lastCell[0])>0 && (newCell[1]-lastCell[1])>0)
-        {
-          var new0 = Math.floor(lastCell[0]+(slope*i));
-          var new1 = Math.floor(lastCell[1]+i);
-        }
-        //console.log(i+"[0]:"+new0);
-        else if ((newCell[0]-lastCell[0])<0 && (newCell[1]-lastCell[1])>0)
-        {
-          var new0 = Math.floor(lastCell[0]+(slope*i));
-          var new1 = Math.floor(lastCell[1]+i);
-        }
-        else if((newCell[0]-lastCell[0])<0 && (newCell[1]-lastCell[1])<0)
-        {
-          var new0 = Math.floor(lastCell[0]+(slope*(-i)));
-          var new1 = Math.floor(lastCell[1]-i);
-        }
-        else if((newCell[0]-lastCell[0])>0 && (newCell[1]-lastCell[1])<0)
+        if(!isFinite(slope) || slope  > 15 || slope < -15)
         {
-          var new0 = Math.floor(lastCell[0]+(slope*(-i)));
-          var new1 = Math.floor(lastCell[1]-i);
-        }
-        //console.log("[1]:"+new1);
-        try{
-          var tableCell = tableArray[new0][new1];
-          tableCell.style.backgroundColor = pen_color;
-          tableCell.lastUpdated = new Date().getTime();
-          console.log(tableCell);
-          clickedCells.push(tableCell, pen_color);
+          if(xDiff > 0)//move down
+          {
+            new1 = lastCellY;
+            new0 = lastCellX + i;
+          }
+          else if (xDiff < 0)//move up
+          {
+            new1 = lastCellY;
+            new0 = lastCellX - i;
+          }
         }
-        catch(e)
+        else if (isFinite(slope) && !isNaN(slope))
         {
-          console.log("Couldn't paint cell")
-        }
+          //console.log("x: "+xDiff+" y: "+yDiff);
+          if ((xDiff>0 && yDiff>0) || (xDiff<0 && yDiff>0))//down,right
+          {
+            new0 = Math.floor(lastCellX+(slope*i));
+            new1 = Math.floor(lastCellY+i);
+          }
+          //console.log(i+"[0]:"+new0);
+          else if(((newCellX-lastCellX)<0 && (newCellY-lastCellY)<0)||((newCellX-lastCellX)>0 && (newCellY-lastCellY)<0))//up,left
+          {
+            new0 = Math.floor(lastCellX+(slope*(-i)));
+            new1 = Math.floor(lastCellY-i);
+          }
+          //console.log("[1]:"+new1);
+          /*try{
+            var tableCell = tableArray[new0][new1];
+            tableCell.style.backgroundColor = pen_color;
+            tableCell.lastUpdated = new Date().getTime();
+            console.log(tableCell);
+            clickedCells.push(tableCell, pen_color);
+          }
+          catch(e)
+          {
+            console.log("Couldn't paint cell")
+          }*/
+
+          /*for(var i=0; i<pen_radius; i++) {
+            for(var j=0; j<pen_radius; j++) {
+              var cellIndex = new1 + (pen_size/4 - i);
+              var rowIndex = new0 + (pen_size/4 - j);
+              try {
+                var tableCell = tableArray[rowIndex][cellIndex];
+                tableCell.style.backgroundColor = pen_color;
+                tableCell.lastUpdated = new Date().getTime();
+                clickedCells.push(tableCell);
 
-        /*for(var i=0; i<pen_radius; i++) {
-          for(var j=0; j<pen_radius; j++) {
-            var cellIndex = new1 + (pen_size/4 - i);
-            var rowIndex = new0 + (pen_size/4 - j);
-            try {
-              var tableCell = tableArray[rowIndex][cellIndex];
-              tableCell.style.backgroundColor = pen_color;
-              tableCell.lastUpdated = new Date().getTime();
-              clickedCells.push(tableCell);
-
-            } catch(e) {
-              console.log("Error: Couldn't paint cell ["+rowIndex+", "+cellIndex+"].");
+              } catch(e) {
+                console.log("Error: Couldn't paint cell ["+rowIndex+", "+cellIndex+"].");
+              }
             }
-          }
-        }*/
+          }*/
+        }
+        cellsToAdd.push(tableArray[new0][new1]);
       }
+      console.log("0:"+new0+" 1:"+new1);
+      var url = "build_array?zero="+new0+"&one="+new1+"&color="+pen_color+"&size="+pen_radius;
+      var build_array = new XMLHttpRequest;
+      build_array.onload = colorsListener;
+      build_array.open("get", url);
+      build_array.send();
     }
   }
+  return cellsToAdd;
 }
diff --git a/paint_client_backup.js b/paint_client_backup.js
new file mode 100644
index 0000000..0f795fa
--- /dev/null
+++ b/paint_client_backup.js
@@ -0,0 +1,403 @@
+window.onload = load;
+
+var canvas_size = 200;
+var cell_size = 3; // Each cell is 3x3 pixels.
+
+var pen_color = "black";
+var pen_size = 8; // This must always be a multiple of 4.
+var brushSizeSelectors;
+
+var changedCells = [];
+var clickedCells = [];
+var lastCell = [];
+
+var canvas_mouse_x = 0;
+var canvas_mouse_y = 0;
+var canvas_left_x = 0;
+var canvas_top_y = 0;
+
+var table, canvasOverlay;
+var clickDownFlag = false;
+var clickDragFlag = false;
+
+var tableArray = [];
+
+function load()
+{
+  console.log("Loaded");
+  setupTable();
+  setupCanvasOverlay();
+  addMouseListener();
+  setupColorSelectors();
+  window.setInterval(pollColors, 200);
+  window.setTimeout(
+    function() { window.setInterval(sendColors, 100); },
+    100
+  );
+}
+
+function setupTable()
+{
+  table = document.getElementById("tbody");
+  for(var i = 0; i < canvas_size; i++)
+  {
+    var rowArray = [];
+    var row = document.createElement("tr");
+    for (var j = 0; j < canvas_size; j++)
+    {
+      var cell = document.createElement("td");
+      cell.x = i;
+      cell.y = j;
+      cell.lastUpdated = new Date().getTime();
+      cell.style.backgroundColor = "#ffffff";
+      // cell.addEventListener("mousedown", changeCell(i, j, this.style.backgroundColor));
+      row.appendChild(cell);
+      rowArray.push(cell);
+    }
+    table.appendChild(row);
+    tableArray.push(rowArray);
+  }
+}
+
+function setupCanvasOverlay()
+{
+  canvasOverlay = document.getElementById("canvas_overlay");
+  canvas_left_x = canvasOverlay.getBoundingClientRect().left;
+  canvas_top_y = canvasOverlay.getBoundingClientRect().top;
+
+  /* This mouse drag detection code adapted from:
+   * http://stackoverflow.com/a/6042235/3673087 */
+
+  canvasOverlay.addEventListener("mousedown", function() {
+      clickDownFlag = true;
+      clickDragFlag = false;
+      clickCell();
+  }, true);
+  canvasOverlay.addEventListener("mousemove", function() {
+      clickDragFlag = true;
+      if(clickDownFlag) {
+        clickCell();
+      }
+  }, true);
+  document.addEventListener("mouseup", function() {
+      if(!clickDragFlag || !clickDownFlag) {
+          console.log("click");
+      }
+      else if(clickDragFlag && clickDownFlag) {
+          clickCell();
+          console.log("drag");
+      }
+      changeClickedCells();
+      clickDownFlag = false;
+  }, true);
+}
+
+function addMouseListener()
+{
+  document.addEventListener("mousemove", function(e) {
+    var mouse_x = e.pageX || e.clientX;
+    var mouse_y = e.pageY || e.clientY;
+    canvas_mouse_x = Math.max(Math.floor(mouse_x - canvas_left_x), 0);
+    canvas_mouse_y = Math.max(Math.floor(mouse_y - canvas_top_y), 0);
+  }, false);
+}
+
+function setupColorSelectors()
+{
+  var colorSelectors = document.getElementsByClassName("selector");
+  for(var i=0; i<colorSelectors.length; i++) {
+    if(i !== colorSelectors.length - 1) {
+      colorSelectors.item(i).onclick = changePenColor;
+    } else {
+      colorSelectors.item(i).onclick = openColorInput;
+      colorSelectors.item(i).getElementsByTagName("input").item(0).oninput = changePenColorInput;
+    }
+  }
+  var clearButton = document.getElementById("clear");
+  clearButton.onclick = clearCanvas;
+  brushSizeSelectors = document.getElementsByClassName("brush");
+  for(i=0; i<brushSizeSelectors.length; i++) {
+    brushSizeSelectors.item(i).onclick = changePenSize;
+  }
+}
+
+function changePenColor()
+{
+  pen_color = this.style.backgroundColor;
+  console.log("Changed pen color to " + pen_color);
+}
+
+function openColorInput()
+{
+  console.log("Detected color input click.");
+  this.getElementsByTagName("input").item(0).click();
+}
+
+function changePenColorInput(e)
+{
+  pen_color = this.value;
+  this.parentNode.style.backgroundColor = pen_color;
+  console.log("Changed pen color to " + pen_color);
+}
+
+function changePenSize()
+{
+  pen_size = parseInt(this.getAttribute("data-size"));
+  for(var i=0; i<brushSizeSelectors.length; i++) {
+    var brush = brushSizeSelectors.item(i);
+    if(brush === this) {
+      brush.className = "brush selected";
+    } else {
+      brush.className = "brush";
+    }
+  }
+}
+
+function clearCanvas()
+{
+  var send_change = new XMLHttpRequest();
+  send_change.open("get", "clear_canvas");
+  send_change.send();
+}
+
+function clickCell()
+{
+  var x = Math.round(canvas_mouse_x/cell_size);
+  var y = Math.round(canvas_mouse_y/cell_size);
+  var c = pen_color;
+  var cellIndex = x + (pen_size/4 - i);
+  var rowIndex = y + (pen_size/4 - j);
+  for(var i=0; i<pen_size/2; i++) {
+    for(var j=0; j<pen_size/2; j++) {
+      try {
+        var tableCell = tableArray[rowIndex][cellIndex];
+        //console.log(tableCell);
+        tableCell.style.backgroundColor = c;
+        tableCell.lastUpdated = new Date().getTime();
+        if(clickedCells.indexOf(tableCell) === -1)
+        {
+          clickedCells.push(tableCell); //,pen color?
+        }
+
+      } catch(e) {
+        console.log("Error: Couldn't paint cell ["+rowIndex+", "+cellIndex+"]:"+e);
+      }
+    }
+  }
+  smooth([rowIndex,cellIndex]);
+  lastCell = [rowIndex,cellIndex];
+}
+
+function changeClickedCells()
+{
+  // console.log("MOUSEUP. Clicked "+clickedCells.length+" cells.");
+  for(var i=0; i<clickedCells.length; i++) {
+    changedCells.push(clickedCells[i]);
+  }
+  clickedCells = [];
+}
+
+function sendColors()
+{
+  // console.log("Sending colors.");
+  if(changedCells.length > 0) {
+    var url = "change_cells?";
+    var i;
+    for(i=0; i<changedCells.length; i++) {
+      var cell = changedCells[i];
+      //console.log(cell);
+      //newColorHash = cell.style.backgroundColor;
+      //newColor = newColorHash.replace("#","");
+      //console.log(cell.x);
+      var newData = "c"+i+"="+cell.x+"-"+cell.y+"-"+pen_color+"&";
+      url += newData;
+    }
+    // console.log("SENDING. Url has "+i+" cells.");
+    changedCells = [];
+    var send_change = new XMLHttpRequest();
+    send_change.open("get", url);
+    send_change.send();
+  }
+}
+
+function pollColors()
+{
+  // console.log("Polling colors.");
+  var request_colors = new XMLHttpRequest();
+  request_colors.startTime = new Date().getTime();
+  request_colors.onload = colorsListener;
+  request_colors.open( "get", "get_changed_cells" );
+  request_colors.send();
+}
+
+function colorsListener()
+{
+  this.endTime = new Date().getTime();
+  // console.log("Request load time: "+(this.endTime-this.startTime)+". Parsing response...");
+  var canvas = JSON.parse(this.responseText);
+  var cellCount = 0;
+  var changedCellCount = 0;
+  if(canvas instanceof Array) {
+    for(var i=0; i<canvas.length; i++) {
+      var canvasRow = canvas[i];
+      var tableRow = tableArray[i];
+      if(tableRow && canvasRow instanceof Array) {
+        for(var j=0; j<canvasRow.length; j++) {
+          var cellColor = canvasRow[j];
+          var tableCell = tableRow[j];
+          if(tableCell) {
+            cellCount++;
+            var currentColor = tableCell.style.backgroundColor;
+            if(!colorsSame(currentColor, cellColor) &&
+                this.startTime - tableCell.lastUpdated > 0 &&
+                changedCells.indexOf(tableCell) === -1 &&
+                clickedCells.indexOf(tableCell) === -1) {
+
+              changedCellCount++;
+              tableCell.style.backgroundColor = cellColor;
+
+            } else {
+              // console.log("Warning: Cell ["+i+", "+j+"] has been updated on the client more recently than the server. Won't overwrite.");
+            }
+          } else {
+            console.log("Error: Response did not match table cell.");
+          }
+        }
+      } else {
+        console.log("Error: Response was not a multidimensional array.");
+      }
+    }
+  } else {
+    console.log("Error: Response was not an array.");
+  }
+  // console.log("DONE PARSING. Response changed "+changedCellCount+" cells ("+cellCount+" total).");
+}
+
+function colorsSame(color1, color2) {
+  var same = false;
+  if(color1 === color2) {
+    same = true;
+  } else {
+    if(color1.toString().indexOf("#") > -1 && color2.toString().indexOf("rgb") > -1) {
+      color1 = hexToRgb(color1);
+    } else if(color2.toString().indexOf("#") > -1 && color1.toString().indexOf("rgb") > -1) {
+      color2 = hexToRgb(color2);
+    }
+    if(color1 === color2) {
+      same = true;
+    }
+  }
+  return same;
+}
+
+/* This function from http://stackoverflow.com/a/5624139/3673087 */
+function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ?
+        "rgb(" + parseInt(result[1], 16) + ", " +
+        parseInt(result[2], 16) + ", " +
+        parseInt(result[3], 16) + ")"
+    : null;
+}
+
+function smooth(newCell)
+{
+  //console.log("new:"+newCell+"old:"+lastCell);
+  var pen_radius = pen_size/2;
+  var right, down;
+  if (Math.abs(newCell[0]-lastCell[0]) <= pen_size && Math.abs(newCell[1]-lastCell[1]) <= pen_size)
+  {
+    return;
+  }
+  /*if (lastCell = [])
+  {
+    lastCell = newCell;
+    return;
+  }*/
+  else
+  {
+    //console.log(lastCell)
+    if (clickDragFlag)
+    {
+      var slope = (newCell[0]-lastCell[0])/(newCell[1]-lastCell[1]);
+      if(!isFinite(slope) || slope  > 15 || slope < -15)
+      {
+        for (i = 1; i < Math.abs(newCell[0]-lastCell[0]); i++)
+        {
+          if(newCell[0]-lastCell[0] > 0)
+          {
+            var new1 = lastCell[1];
+            var new0 = lastCell[0] + i;
+          }
+          else if (newCell[0]-lastCell[0] < 0)
+          {
+            var new1 = lastCell[1];
+            var new0 = lastCell[0] - i;
+          }
+        }
+      }
+      if(isFinite(slope) && !isNaN(slope))
+      {
+        console.log("x: "+(newCell[0]-lastCell[0])+" y: "+(newCell[1]-lastCell[1]));
+        for (i = 1; i < Math.abs(newCell[1]-lastCell[1]); i++)
+        {
+          if ((newCell[0]-lastCell[0])>0 && (newCell[1]-lastCell[1])>0)
+          {
+            var new0 = Math.floor(lastCell[0]+(slope*i));
+            var new1 = Math.floor(lastCell[1]+i);
+          }
+          //console.log(i+"[0]:"+new0);
+          else if ((newCell[0]-lastCell[0])<0 && (newCell[1]-lastCell[1])>0)
+          {
+            var new0 = Math.floor(lastCell[0]+(slope*i));
+            var new1 = Math.floor(lastCell[1]+i);
+          }
+          else if((newCell[0]-lastCell[0])<0 && (newCell[1]-lastCell[1])<0)
+          {
+            var new0 = Math.floor(lastCell[0]+(slope*(-i)));
+            var new1 = Math.floor(lastCell[1]-i);
+          }
+          else if((newCell[0]-lastCell[0])>0 && (newCell[1]-lastCell[1])<0)
+          {
+            var new0 = Math.floor(lastCell[0]+(slope*(-i)));
+            var new1 = Math.floor(lastCell[1]-i);
+          }
+          //console.log("[1]:"+new1);
+          /*try{
+            var tableCell = tableArray[new0][new1];
+            tableCell.style.backgroundColor = pen_color;
+            tableCell.lastUpdated = new Date().getTime();
+            console.log(tableCell);
+            clickedCells.push(tableCell, pen_color);
+          }
+          catch(e)
+          {
+            console.log("Couldn't paint cell")
+          }*/
+
+          /*for(var i=0; i<pen_radius; i++) {
+            for(var j=0; j<pen_radius; j++) {
+              var cellIndex = new1 + (pen_size/4 - i);
+              var rowIndex = new0 + (pen_size/4 - j);
+              try {
+                var tableCell = tableArray[rowIndex][cellIndex];
+                tableCell.style.backgroundColor = pen_color;
+                tableCell.lastUpdated = new Date().getTime();
+                clickedCells.push(tableCell);
+
+              } catch(e) {
+                console.log("Error: Couldn't paint cell ["+rowIndex+", "+cellIndex+"].");
+              }
+            }
+          }*/
+          console.log("0:"+new0+" 1:"+new1);
+          var url = "build_array?zero="+new0+"&one="+new1+"&color="+pen_color+"&size="+pen_radius;
+          var build_array = new XMLHttpRequest;
+          build_array.onload = colorsListener;
+          build_array.open("get", url);
+          build_array.send();
+        }
+      }
+    }
+  }
+}
diff --git a/paint_client_slow_fill.js b/paint_client_slow_fill.js
new file mode 100644
index 0000000..f98e81b
--- /dev/null
+++ b/paint_client_slow_fill.js
@@ -0,0 +1,403 @@
+window.onload = load;
+
+var canvas_size = 200;
+var cell_size = 3; // Each cell is 3x3 pixels.
+
+var pen_color = "black";
+var pen_size = 8; // This must always be a multiple of 4.
+var brushSizeSelectors;
+
+var changedCells = [];
+var clickedCells = [];
+var lastCell = [];
+
+var canvas_mouse_x = 0;
+var canvas_mouse_y = 0;
+var canvas_left_x = 0;
+var canvas_top_y = 0;
+
+var table, canvasOverlay;
+var clickDownFlag = false;
+var clickDragFlag = false;
+
+var tableArray = [];
+
+function load()
+{
+  console.log("Loaded");
+  setupTable();
+  setupCanvasOverlay();
+  addMouseListener();
+  setupColorSelectors();
+  window.setInterval(pollColors, 200);
+  window.setTimeout(
+    function() { window.setInterval(sendColors, 100); },
+    100
+  );
+}
+
+function setupTable()
+{
+  table = document.getElementById("tbody");
+  for(var i = 0; i < canvas_size; i++)
+  {
+    var rowArray = [];
+    var row = document.createElement("tr");
+    for (var j = 0; j < canvas_size; j++)
+    {
+      var cell = document.createElement("td");
+      cell.x = i;
+      cell.y = j;
+      cell.lastUpdated = new Date().getTime();
+      cell.style.backgroundColor = "#ffffff";
+      // cell.addEventListener("mousedown", changeCell(i, j, this.style.backgroundColor));
+      row.appendChild(cell);
+      rowArray.push(cell);
+    }
+    table.appendChild(row);
+    tableArray.push(rowArray);
+  }
+}
+
+function setupCanvasOverlay()
+{
+  canvasOverlay = document.getElementById("canvas_overlay");
+  canvas_left_x = canvasOverlay.getBoundingClientRect().left;
+  canvas_top_y = canvasOverlay.getBoundingClientRect().top;
+
+  /* This mouse drag detection code adapted from:
+   * http://stackoverflow.com/a/6042235/3673087 */
+
+  canvasOverlay.addEventListener("mousedown", function() {
+      clickDownFlag = true;
+      clickDragFlag = false;
+      clickCell();
+  }, true);
+  canvasOverlay.addEventListener("mousemove", function() {
+      clickDragFlag = true;
+      if(clickDownFlag) {
+        clickCell();
+      }
+  }, true);
+  document.addEventListener("mouseup", function() {
+      if(!clickDragFlag || !clickDownFlag) {
+          console.log("click");
+      }
+      else if(clickDragFlag && clickDownFlag) {
+          clickCell();
+          console.log("drag");
+      }
+      changeClickedCells();
+      clickDownFlag = false;
+  }, true);
+}
+
+function addMouseListener()
+{
+  document.addEventListener("mousemove", function(e) {
+    var mouse_x = e.pageX || e.clientX;
+    var mouse_y = e.pageY || e.clientY;
+    canvas_mouse_x = Math.max(Math.floor(mouse_x - canvas_left_x), 0);
+    canvas_mouse_y = Math.max(Math.floor(mouse_y - canvas_top_y), 0);
+  }, false);
+}
+
+function setupColorSelectors()
+{
+  var colorSelectors = document.getElementsByClassName("selector");
+  for(var i=0; i<colorSelectors.length; i++) {
+    if(i !== colorSelectors.length - 1) {
+      colorSelectors.item(i).onclick = changePenColor;
+    } else {
+      colorSelectors.item(i).onclick = openColorInput;
+      colorSelectors.item(i).getElementsByTagName("input").item(0).oninput = changePenColorInput;
+    }
+  }
+  var clearButton = document.getElementById("clear");
+  clearButton.onclick = clearCanvas;
+  brushSizeSelectors = document.getElementsByClassName("brush");
+  for(i=0; i<brushSizeSelectors.length; i++) {
+    brushSizeSelectors.item(i).onclick = changePenSize;
+  }
+}
+
+function changePenColor()
+{
+  pen_color = this.style.backgroundColor;
+  console.log("Changed pen color to " + pen_color);
+}
+
+function openColorInput()
+{
+  console.log("Detected color input click.");
+  this.getElementsByTagName("input").item(0).click();
+}
+
+function changePenColorInput(e)
+{
+  pen_color = this.value;
+  this.parentNode.style.backgroundColor = pen_color;
+  console.log("Changed pen color to " + pen_color);
+}
+
+function changePenSize()
+{
+  pen_size = parseInt(this.getAttribute("data-size"));
+  for(var i=0; i<brushSizeSelectors.length; i++) {
+    var brush = brushSizeSelectors.item(i);
+    if(brush === this) {
+      brush.className = "brush selected";
+    } else {
+      brush.className = "brush";
+    }
+  }
+}
+
+function clearCanvas()
+{
+  var send_change = new XMLHttpRequest();
+  send_change.open("get", "clear_canvas");
+  send_change.send();
+}
+
+function clickCell()
+{
+  var x = Math.round(canvas_mouse_x/cell_size);
+  var y = Math.round(canvas_mouse_y/cell_size);
+  var c = pen_color;
+  for(var i=0; i<pen_size/2; i++) {
+    for(var j=0; j<pen_size/2; j++) {
+      var cellIndex = x + (pen_size/4 - i);
+      var rowIndex = y + (pen_size/4 - j);
+      try {
+        var tableCell = tableArray[rowIndex][cellIndex];
+        //console.log(tableCell);
+        tableCell.style.backgroundColor = c;
+        tableCell.lastUpdated = new Date().getTime();
+        if(clickedCells.indexOf(tableCell) === -1)
+        {
+          clickedCells.push(tableCell); //,pen color?
+          smooth([rowIndex,cellIndex]);
+          lastCell = [rowIndex,cellIndex];
+        }
+
+      } catch(e) {
+        console.log("Error: Couldn't paint cell ["+rowIndex+", "+cellIndex+"]:"+e);
+      }
+    }
+  }
+}
+
+function changeClickedCells()
+{
+  // console.log("MOUSEUP. Clicked "+clickedCells.length+" cells.");
+  for(var i=0; i<clickedCells.length; i++) {
+    changedCells.push(clickedCells[i]);
+  }
+  clickedCells = [];
+}
+
+function sendColors()
+{
+  // console.log("Sending colors.");
+  if(changedCells.length > 0) {
+    var url = "change_cells?";
+    var i;
+    for(i=0; i<changedCells.length; i++) {
+      var cell = changedCells[i];
+      //console.log(cell);
+      //newColorHash = cell.style.backgroundColor;
+      //newColor = newColorHash.replace("#","");
+      //console.log(cell.x);
+      var newData = "c"+i+"="+cell.x+"-"+cell.y+"-"+pen_color+"&";
+      url += newData;
+    }
+    // console.log("SENDING. Url has "+i+" cells.");
+    changedCells = [];
+    var send_change = new XMLHttpRequest();
+    send_change.open("get", url);
+    send_change.send();
+  }
+}
+
+function pollColors()
+{
+  // console.log("Polling colors.");
+  var request_colors = new XMLHttpRequest();
+  request_colors.startTime = new Date().getTime();
+  request_colors.onload = colorsListener;
+  request_colors.open( "get", "get_changed_cells" );
+  request_colors.send();
+}
+
+function colorsListener()
+{
+  this.endTime = new Date().getTime();
+  // console.log("Request load time: "+(this.endTime-this.startTime)+". Parsing response...");
+  var canvas = JSON.parse(this.responseText);
+  var cellCount = 0;
+  var changedCellCount = 0;
+  if(canvas instanceof Array) {
+    for(var i=0; i<canvas.length; i++) {
+      var canvasRow = canvas[i];
+      var tableRow = tableArray[i];
+      if(tableRow && canvasRow instanceof Array) {
+        for(var j=0; j<canvasRow.length; j++) {
+          var cellColor = canvasRow[j];
+          var tableCell = tableRow[j];
+          if(tableCell) {
+            cellCount++;
+            var currentColor = tableCell.style.backgroundColor;
+            if(!colorsSame(currentColor, cellColor) &&
+                this.startTime - tableCell.lastUpdated > 0 &&
+                changedCells.indexOf(tableCell) === -1 &&
+                clickedCells.indexOf(tableCell) === -1) {
+
+              changedCellCount++;
+              tableCell.style.backgroundColor = cellColor;
+
+            } else {
+              // console.log("Warning: Cell ["+i+", "+j+"] has been updated on the client more recently than the server. Won't overwrite.");
+            }
+          } else {
+            console.log("Error: Response did not match table cell.");
+          }
+        }
+      } else {
+        console.log("Error: Response was not a multidimensional array.");
+      }
+    }
+  } else {
+    console.log("Error: Response was not an array.");
+  }
+  // console.log("DONE PARSING. Response changed "+changedCellCount+" cells ("+cellCount+" total).");
+}
+
+function colorsSame(color1, color2) {
+  var same = false;
+  if(color1 === color2) {
+    same = true;
+  } else {
+    if(color1.toString().indexOf("#") > -1 && color2.toString().indexOf("rgb") > -1) {
+      color1 = hexToRgb(color1);
+    } else if(color2.toString().indexOf("#") > -1 && color1.toString().indexOf("rgb") > -1) {
+      color2 = hexToRgb(color2);
+    }
+    if(color1 === color2) {
+      same = true;
+    }
+  }
+  return same;
+}
+
+/* This function from http://stackoverflow.com/a/5624139/3673087 */
+function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ?
+        "rgb(" + parseInt(result[1], 16) + ", " +
+        parseInt(result[2], 16) + ", " +
+        parseInt(result[3], 16) + ")"
+    : null;
+}
+
+function smooth(newCell)
+{
+  //console.log("new:"+newCell+"old:"+lastCell);
+  var pen_radius = pen_size/2;
+  var right, down;
+  if (Math.abs(newCell[0]-lastCell[0]) <= pen_size && Math.abs(newCell[1]-lastCell[1]) <= pen_size)
+  {
+    return;
+  }
+  /*if (lastCell = [])
+  {
+    lastCell = newCell;
+    return;
+  }*/
+  else
+  {
+    //console.log(lastCell)
+    if (clickDragFlag)
+    {
+      var slope = (newCell[0]-lastCell[0])/(newCell[1]-lastCell[1]);
+      if(!isFinite(slope) || slope  > 15 || slope < -15)
+      {
+        for (i = 1; i < Math.abs(newCell[0]-lastCell[0]); i++)
+        {
+          if(newCell[0]-lastCell[0] > 0)
+          {
+            var new1 = lastCell[1];
+            var new0 = lastCell[0] + i;
+          }
+          else if (newCell[0]-lastCell[0] < 0)
+          {
+            var new1 = lastCell[1];
+            var new0 = lastCell[0] - i;
+          }
+        }
+      }
+      if(isFinite(slope) && !isNaN(slope))
+      {
+        console.log("x: "+(newCell[0]-lastCell[0])+" y: "+(newCell[1]-lastCell[1]));
+        for (i = 1; i < Math.abs(newCell[1]-lastCell[1]); i++)
+        {
+          if ((newCell[0]-lastCell[0])>0 && (newCell[1]-lastCell[1])>0)
+          {
+            var new0 = Math.floor(lastCell[0]+(slope*i));
+            var new1 = Math.floor(lastCell[1]+i);
+          }
+          //console.log(i+"[0]:"+new0);
+          else if ((newCell[0]-lastCell[0])<0 && (newCell[1]-lastCell[1])>0)
+          {
+            var new0 = Math.floor(lastCell[0]+(slope*i));
+            var new1 = Math.floor(lastCell[1]+i);
+          }
+          else if((newCell[0]-lastCell[0])<0 && (newCell[1]-lastCell[1])<0)
+          {
+            var new0 = Math.floor(lastCell[0]+(slope*(-i)));
+            var new1 = Math.floor(lastCell[1]-i);
+          }
+          else if((newCell[0]-lastCell[0])>0 && (newCell[1]-lastCell[1])<0)
+          {
+            var new0 = Math.floor(lastCell[0]+(slope*(-i)));
+            var new1 = Math.floor(lastCell[1]-i);
+          }
+          //console.log("[1]:"+new1);
+          /*try{
+            var tableCell = tableArray[new0][new1];
+            tableCell.style.backgroundColor = pen_color;
+            tableCell.lastUpdated = new Date().getTime();
+            console.log(tableCell);
+            clickedCells.push(tableCell, pen_color);
+          }
+          catch(e)
+          {
+            console.log("Couldn't paint cell")
+          }*/
+
+          /*for(var i=0; i<pen_radius; i++) {
+            for(var j=0; j<pen_radius; j++) {
+              var cellIndex = new1 + (pen_size/4 - i);
+              var rowIndex = new0 + (pen_size/4 - j);
+              try {
+                var tableCell = tableArray[rowIndex][cellIndex];
+                tableCell.style.backgroundColor = pen_color;
+                tableCell.lastUpdated = new Date().getTime();
+                clickedCells.push(tableCell);
+
+              } catch(e) {
+                console.log("Error: Couldn't paint cell ["+rowIndex+", "+cellIndex+"].");
+              }
+            }
+          }*/
+          console.log("0:"+new0+" 1:"+new1);
+          var url = "build_array?zero="+new0+"&one="+new1+"&color="+pen_color+"&size="+pen_radius;
+          var build_array = new XMLHttpRequest;
+          build_array.onload = colorsListener;
+          build_array.open("get", url);
+          build_array.send();
+        }
+      }
+    }
+  }
+}
diff --git a/paint_server.js b/paint_server.js
index ee95da8..0d66581 100644
--- a/paint_server.js
+++ b/paint_server.js
@@ -12,7 +12,7 @@ init();
 function init()
 {
     resetCanvas();
-    
+
     var server = http.createServer( serverFn );
 
     var port;
@@ -43,13 +43,13 @@ function resetCanvas()
 function serverFn(req,res)
 {
     var filename = req.url.substring( 1, req.url.length );
-    
+
     if(filename === "")
     {
         filename = "./index.html";
     }
-    
-    if(filename.indexOf("get_changed_cells") > -1)
+
+    if(filename.indexOf("get_changed_cells") > -1)//how does indexOf > -1 work? and why is this if, not else if?
     {
         sendChangedCells( req, res );
     }
@@ -75,6 +75,11 @@ function serverFn(req,res)
         filename = "./index.html";
         serveFile(filename, req, res);
     }
+    else if(filename.indexOf("build_array") > -1)
+    {
+      //runs the full line builder from the smooth function serverside to avoid crashes.
+      buildArray(filename,req,res);
+    }
     else
     {
         serveFile(filename, req, res);
@@ -138,7 +143,7 @@ function serveFile( filename, req, res )
         fourZeroFour(filename, res);
         return;
     }
-    
+
     var extension = "html";
     try {
         extension = filename.split(/.\./)[1];
@@ -163,10 +168,33 @@ function sendChangedCells(req, res)
     res.end(JSON.stringify(canvas));
 }
 
+function buildArray(filename, req, res)
+{
+  var requests = filename.split("?")[1].split("&");
+  var new0 = Math.floor(requests[0].split("=")[1]);
+  var new1 = Math.floor(requests[1].split("=")[1]);
+  var color = requests[2].split("=")[1];
+  var pen_radius = requests[3].split("=")[1];
+  for(var i=0; i<pen_radius; i++) {
+    for(var j=0; j<pen_radius; j++) {
+      console.log("1:"+new1+" 0:"+new0);
+      var cellIndex = new1 + (pen_radius/2 - i);
+      var rowIndex = new0 + (pen_radius/2 - j);
+      try {
+        canvas[rowIndex][cellIndex] = color;
+        res.writeHead(200, {'Content-Type':'application/json'});
+        res.end(JSON.stringify(canvas));
+      } catch(e) {
+        console.log("Error: Couldn't paint connecting cell ["+rowIndex+", "+cellIndex+"].");
+      }
+    }
+  }
+}
+
 /* Return a 404 page */
 function fourZeroFour(filename, res) {
 	console.log( "Error: Something bad happened trying to open "+filename );
     res.writeHead(404, {'Content-Type':'text/plain'});
     res.write("404 : File Not Found");
     res.end();
-}
\ No newline at end of file
+}