var currentColor = "#000000";

function upload() {
  if(confirm("Want to save?")) {
    $.post('/upload', { imageData : pixel.getDataURL() }, function(data) {
      if(typeof data.thumb != 'undefined') {
        $("#images").prepend(data.thumb);
        pixel.clearCanvas();
      
        FB.ui({
          method: 'feed',
          name: 'My brand new drawing',
          link: data.share_url,
          picture: data.url,
          caption: 'Check my drawing out!',
          description: 'Do you like it?',
          message: 'Check my drawing out!',
          actions: [JSON.stringify({name: 'Draw!', link: 'http://draw.heroku.com/'})]
        },
        function(response) {
          if (response && response.post_id) {
            // alert('Post was published.');
          } else {
            // alert('Post was not published.');
          }
        });
      }
      else {
        alert(data);
      }
    }, "json");
  
    $(this).unbind('click').removeClass('enabled');
    $(this).addClass('disabled');
  }
  
  return false;
}

$(document).ready(function() {
  var canvas = $("#canvas canvas"),
      ctrlDown = false;
      ctrlKey = 17, zKey = 90, shiftKey = 16;

  pixel.init(canvas[0]);

  //set it true on mousedown
  canvas.mousedown(function(e) {
    pixel.setDraw(true);
    var x = e.offsetX ? e.offsetX : e.pageX - this.offsetLeft;
    var y = e.offsetY ? e.offsetY : e.pageY - this.offsetTop;
    
    pixel.doAction(x, y, currentColor);
    
    $("#upload.disabled").bind('click', upload).removeClass('disabled');
    $("#upload").addClass('enabled');
  }).mousemove(function(e) {
    var x = e.offsetX ? e.offsetX : e.pageX - this.offsetLeft;
    var y = e.offsetY ? e.offsetY : e.pageY - this.offsetTop;
    
    pixel.doAction(x, y, currentColor);
  });

  //reset it on mouseup
  $(document).mouseup(function() {
    pixel.setDraw(false);
  });
  
  // if shift is pressed set color to transparent
  $(document).keydown(function(e) {
    if(!ctrlDown && e.keyCode == shiftKey) {
      currentColor = "rgba(0, 0, 0, 0)";
      $(".clearPixel").addClass('active');
    }
  });
  
  // reset color to current active color
  $(document).keyup(function(e) {
    currentColor = $(".color.active").data().color;
    if($(".action.selectable.active").data().action != "clearPixel") {
      $(".clearPixel").removeClass('active');
    }
  });

  // controls
  $("#clear").click(function() {
    if($("#upload").hasClass('enabled') && confirm("Sure?")) {
      pixel.clearCanvas();
    
      $("#upload.enabled").unbind('click').removeClass('enabled');
      $("#upload").addClass('disabled');
    }
  });

  $(".action.selectable").click(function() {
    pixel.setAction($(this).data().action);
    
    $(".action.selectable.active").toggleClass("active");
    $(this).toggleClass("active");
  });

  $(".color").click(function() {
    currentColor = $(this).data().color;
    
    $(".color.active").toggleClass("active");
    $(this).toggleClass("active");
  });

  $(document).keydown(function(e) {
    e.keyCode == ctrlKey && ctrlDown = true;
    e.keyCode == shiftKey && shiftDown = true;
  }).keyup(function(e) {
    e.keyCode == ctrlKey && ctrlDown = false;
    e.keyCode == shiftKey && shiftDown = false;
  });

  $(document).keydown(function(e) {
    if(ctrlDown && e.keyCode == zKey) {
      if(shiftDown) {
        console.log("redo");
      }
      else {
        console.log("undo");
      }
    }
  });
  
  ["undo", "redo"].forEach(function(action) {
    $("." + action).click(function() {
      pixel[action].call();
      return false;
    });
  });
});
@@ -1038,16 +1038,108 @@
 lse;%0A%7D%0A%0A
+function ctrlKey(e) %7B%0A  return navigator.platform.match(/mac/i) ? e.metaKey : e.ctrlKey;%0A%7D%0A%0A
 $(docume
@@ -1207,70 +1207,17 @@
     
-ctrlDown = false;%0A      ctrlKey = 17, zKey = 90, shiftKey = 16
+zKey = 90
 ;%0A%0A 
@@ -2012,37 +2012,28 @@
 if(!ctrl
-Down && e.keyCode == 
+Key(e) && e.
 shiftKey
@@ -3060,346 +3060,131 @@
     
-e.keyCode == ctrlKey && ctrlDown = true;%0A    e.keyCode == shiftKey && shiftDown = true;%0A  %7D).keyup(function(e) %7B%0A    e.keyCode == ctrlKey && ctrlDown = false;%0A    e.keyCode == shiftKey && shiftDown = false;%0A  %7D);%0A%0A  $(document).keydown(function(e) %7B%0A    if(ctrlDown && e.keyCode == zKey) %7B%0A      if(shiftDown) %7B%0A        console.log(%22redo%22
+if(ctrlKey(e) && e.keyCode == zKey) %7B%0A      if(e.shiftKey) %7B%0A        pixel.redo();%0A      %7D%0A      else %7B%0A        pixel.undo(
 );%0A 
@@ -3200,51 +3200,28 @@
     
-else %7B%0A        console.log(%22undo%22);%0A      %7D
+%0A      return false;
 %0A   
@@ -3345,36 +3345,16 @@
 call();%0A
-      return false;%0A
     %7D);%0A

fix ctrl+z and ctrl+shift+z events