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;

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 );
    // init();
    // ctx = processing.externals.context;
    console.log(width, height);
  };

  processing.draw = function() {
    var color = videoInstance.get(Math.round(cursor.x), Math.round(cursor.z));
    // console.log (cursor, color);
    processing.fill(color);
    processing.ellipse(cursor.x, cursor.z, Math.abs(cursor.y) / 2, Math.abs(cursor.y) / 2);
    // processing.image(img, 0, 0);
  };

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

  };

  processing.mouseReleased = function() {

  };

  leapFunction = function() {
    // If the Leap Motion library is available, set up our
    // Leap loop. Will only be called if a controller is
    // available, though

    if (typeof Leap !== "undefined") {

      // Setup Leap loop with frame callback function
      console.log("LEAP!!");
      Leap.loop(function (frame) {

        if (frame.hands.length > 0) {
          var hand = frame.hands[0];

          cursor = {
            x: hand.sphereCenter[0] * 4 + halfWidth,  // x axis, horizontal
            y: hand.sphereCenter[1] * -1, // y axis, vertical, must be inverted
            z: hand.sphereCenter[2] * 4 + halfHeight // z axis, depth
          };
        }
      })
    }
  };

  loadPlugins = function() {
    $.getScript("//js.leapmotion.com/leap-plugins-0.1.7.min.js", leapFunction);
  } ;
  $.getScript("//cdnjs.cloudflare.com/ajax/libs/leapjs/0.6.1/leap.min.js", loadPlugins);

}


// 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);