// Original fiddle: http://jsfiddle.net/R4V97/97/
// Stefan's edit: jsfiddle.net/stefanreich/wskby4q5/

var canvas = document.getElementById("scribble"),
    ctx = canvas.getContext("2d"),
    painting = true,
    lastX = 0,
    lastY = 0,
    mouseDown = false,
    fadeInterval = 100,
    fadeSpeed = 0.025,
    strokeStyleDown = "rgba(255,255,255,1)",
    strokeStyleUp = "rgba(255,255,255,0.025)",
    sendStroke = null;

function drawStroke(x1, y1, x2, y2, mouseDown) {
  ctx.strokeStyle = mouseDown ? strokeStyleDown : strokeStyleUp;
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}
  
document.addEventListener('DOMContentLoaded', addMouseListeners, false);

function addMouseListeners() {
  canvas.ontouchdown = function (e) {
    console.log("touchdown " + e.pageX + "/" + e.pageY);
    e.preventDefault();
  };
  
  canvas.onmousedown = function (e) {
    console.log("mousedown");
      lastX = e.pageX /*- this.offsetLeft*/;
      lastY = e.pageY /*- this.offsetTop*/;
      mouseDown = true;
  };
  
  canvas.onmouseup = function (e) {
      mouseDown = false;
  };
  
  canvas.onmouseout = function (e) {
      mouseDown = false;
  };
  
  canvas.onmousemove = function (e) {
    //console.log("mousemove");
    if (!painting) return;
    mouseX = e.pageX/* - this.offsetLeft*/;
    mouseY = e.pageY/* - this.offsetTop*/;
    drawStroke(lastX, lastY, mouseX, mouseY, mouseDown);
    if (sendStroke)
      sendStroke({x1: lastX, y1: lastY, x2: mouseX, y2: mouseY, mouseDown: mouseDown});
    lastX = mouseX;
    lastY = mouseY;
  };
  
  console.log("Registered mouse listeners on canvas");
  
  function fadeOut() {
    var r = fadeSpeed * (1 + Math.random()*0.3);
    ctx.fillStyle = "rgba(60,30,50,"+r+")";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    setTimeout(fadeOut, fadeInterval);
  }
  
  fadeOut();
}