var video = document.getElementById('video');
var source = document.getElementById('source').getContext('2d');
var bufferEl = document.getElementById('buffer');
var buffer = bufferEl.getContext('2d');
//var output = source;
var cW = source.canvas.width;
var cH = source.canvas.height;

var settings = {
  'sampleLight': 0.4,
  'whiteCutoff': 0.08,
  'blackoutAlpha': 0.33,
  'drawAlpha': 0.095,
  'rangeCenter': 0.5,
  'rangeGive':0.1,
}

var gui = new dat.GUI();
gui.add(settings, 'sampleLight', 0.05, 0.95);
gui.add(settings, 'whiteCutoff', 0.05, 0.1);
gui.add(settings, 'blackoutAlpha', 0.0, 1);
gui.add(settings, 'drawAlpha', 0.05, 0.1);

video.addEventListener('loadedmetadata', function () {
  if (video.videoWidth) {
    cW = source.canvas.width = video.videoWidth;
    cH = source.canvas.height = video.videoHeight;
  }
  draw();
});

function requestStream() {
  navigator.webkitGetUserMedia(
    {video: true},
    streamSuccess,
    streamFail
  );
}

function streamSuccess(stream) {
  console.log('stream success');
  video.src = window.webkitURL.createObjectURL(stream);
  video.play();
}

function streamFail() {
  console.log('not working');
}

function draw() {
  buffer.drawImage(
    video, 
    0, 0, 
    video.videoWidth, video.videoHeight, 
    0, 0, 
    source.canvas.width, source.canvas.height
  );
  
  var pixels = buffer.getImageData(0, 0, source.canvas.width, source.canvas.height);

  for (var i = 0; i < pixels.data.length; i+=4) {
    var newPixel = transformPixel(
      'sineRange', 
      {  r: pixels.data[i], 
         g: pixels.data[i+1],
         b: pixels.data[i+2],
         a: pixels.data[i+3],
      });
    
    pixels.data[i] = newPixel.r;2
    pixels.data[i+1] = newPixel.g;
    pixels.data[i+2] = newPixel.b;
    pixels.data[i+3] = newPixel.a;
    
    delete newPixel;
  }
  
  
  buffer.putImageData(pixels, 0, 0);
  
  
  source.globalCompositeOperation = 'source-over';  
  source.fillStyle = "rgba(0,0,0," + settings.blackoutAlpha + ")";
  source.fillRect(0,0,source.canvas.width,source.canvas.height);
  source.globalCompositeOperation = 'lighter';  
  source.drawImage(bufferEl, 0, 0, cW, cH);
  
  webkitRequestAnimationFrame(draw);
}

function transformPixel(type, pixel) {
  
  var r, g, b, a;
  
  var transformers = {
    'grayscale':
    function(p) {
        var avg = (p.r + p.g + p.b) / 3;
        if (avg < 128) avg = 0;
        r = avg; g=avg; b=avg; a=p.a;
    },
    'stripe':
    function(p) {

      var avg = (p.r + p.g + p.b) / 3;
      var l = avg/255; 
      
      if (l < settings.sampleLight) {
        l = 0; a = 255;
      } else {
        l%=.1;
        if (l > settings.whiteCutoff) { l = settings.drawAlpha; }
        else { l = 0; }
        l *= 10; 
      }
      
      avg = Math.floor(255*l)
      r = avg; g=avg; b=avg; a=255;
    },
    'sineRange':
    function(p) {

      var avg = (p.r + p.g + p.b) / 3;
      var l = avg/255; 
      
      var min = Math.max(0.0, settings.rangeCenter-settings.rangeGive);
      var max = Math.max(1.0, settings.rangeCenter+settings.rangeGive);
      
      
      avg = Math.floor(255*l);
      r = avg; g=avg; b=avg; a=255;
    },
  }; 
  
  transformers[type](pixel);
  return {r:r, g:g, b:b, a:a};
}


$('body').keypress(function() {
  requestStream();
  $('#message').remove();
});