$(function() {

  var Q = Quintus().setup('quintus', { maximize: true }),
      socket = io.connect(),
      start = {}, 
      move = {};


  function getTouch(e) {
    var touch = e.originalEvent.changedTouches ? 
                e.originalEvent.changedTouches[0] : e,
        canvasPos = Q.el.offset(),
        canvasX = (touch.pageX - canvasPos.left) / Q.el.width() * Q.width,
        canvasY = (touch.pageY - canvasPos.top) / Q.el.height() * Q.height;

    e.preventDefault();
    return { x: canvasX, y: canvasY };
  }

  function drawLine(from,to) {
    Q.ctx.strokeStyle= "#000";
    Q.ctx.beginPath();
    Q.ctx.moveTo(from.x,from.y);
    Q.ctx.lineTo(to.x,to.y);
    Q.ctx.stroke();
  }

  Q.el.on('touchstart mousedown',function(e) {
    start = getTouch(e);
  });

  Q.el.on('touchmove mousemove',function(e) {
    if(!start.x) return;
    move = getTouch(e);

    drawLine(start,move);

    socket.emit("paint",{ start: start, move: move });
    start = move;
  });

  Q.el.on('touchend mouseup mouseleave',function(e) {
    start.x = null;
  });

  socket.on("connect",function() {
    console.log("Connected");
  });

  socket.on("paint",function(data) {
    drawLine(data.start,data.move);
  });

  socket.on("clear",function(data) {
    Q.ctx.clearRect(0,0,Q.width,Q.height);
  });
  

});