var width = window.innerWidth;
var height = $('body').height() - 3;
var halfWidth = width / 2;
var halfHeight = height / 2;

function drawerSketch(processing) {
  // set size
  processing.size(width, height);

  var width = window.innerWidth;
var height = $('body').height() - 3;
var halfWidth = width / 2;
var halfHeight = height / 2;
var bPaused = false;
var bMouse = false;

function videoSketch(processing) {
  processing.size(width, height);
  var bStreaming = false;

  var video = document.createElement("video");
  video.setAttribute("style", "display:none;");
  video.setAttribute("id", "videoOutput");
  video.setAttribute("width", "500px");
  video.setAttribute("height", "660px");
  video.setAttribute("autoplay", "true");
  if (document.body !== null) document.body.appendChild(video);

  function init() {
    if (navigator.webkitGetUserMedia) {
      navigator.webkitGetUserMedia({
        video: true
      }, gotStream, noStream);

      function gotStream(stream) {
        video.src = webkitURL.createObjectURL(stream);
        bStreaming = true;
        video.onerror = function() {
          stream.stop();
          streamError();
        };
      }

      function noStream() {
        alert('No camera available.');
      }

      function streamError() {
        alert('Camera error.');
      }
    }
  }

  processing.setup = function() {
    init();
    ctx = processing.externals.context;
  };

  processing.draw = function() {
    if (bPaused === false) {
      processing.pushMatrix();
      processing.translate(width, 0);
      processing.scale(-1, 1); //mirror the video
      ctx.drawImage(video, 0, 0, width, height);
      processing.popMatrix();
    }
  };

}
function drawerSketch(processing) {
  // set size
  processing.size(width, height);

  var cursor = {
    x: 0,
    y: 0
  };

  processing.setup = function() {
    processing.background(255);
    processing.noStroke();
    processing.frameRate( 120 );
    console.log(width, height);
  };

  processing.draw = function() {
    if (bMouse === true) {
      var color = videoInstance.get(processing.mouseX, processing.mouseY);
      // console.log (cursor, color);
      processing.fill(color);
      var mouseDist = processing.dist(processing.pmouseX, processing.pmouseY, processing.mouseX, processing.mouseY);
      processing.ellipse(processing.mouseX, processing.mouseY, mouseDist, mouseDist);
    }
  };

  processing.keyPressed = function() {
    console.log(processing.key);
    if (bPaused === true) {
      bPaused = false;
      console.log("play");
    } else {
      bPaused = true;
      console.log("pause");
    }
  };
    
  processing.mousePressed = function() {
    bMouse = true;
  };

  processing.mouseReleased = function() {
    bMouse = false;
  };

}


// attach the sketch function to the canvas
var processingInstance = new Processing(document.getElementById('sketch'), drawerSketch);

// attach the sketch function to the canvas
var videoInstance = new Processing(document.getElementById('video'), videoSketch);


}
// attach the sketch function to the canvas
var processingInstance = new Processing(document.getElementById('sketch'), drawerSketch);