// Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

let processor = {
    timerCallback: function() {
      if (this.video.paused || this.video.ended) {
        return;
      }
      this.computeFrame();
      let self = this;
      setTimeout(function () {
          self.timerCallback();
        }, 0);
    },
  
    doLoad: function() {
      this.video = document.getElementById("video");
      this.c1 = document.getElementById("c1");
      this.ctx1 = this.c1.getContext("2d");
      this.c2 = document.getElementById("c2");
      this.ctx2 = this.c2.getContext("2d");
      let self = this;
      this.video.addEventListener("play", function() {
          self.width = self.video.videoWidth / 2;
          self.height = self.video.videoHeight / 2;
          self.timerCallback();
        }, false);
    },
  
    computeFrame: function() {
      var imr=146;
      var img=117;
      var imb=101;
      var mode=0; // see through
      var bright=0;
      if (document.getElementById('mr')) {
      if (document.getElementById('mr').value != '') {
      imr=eval('' + document.getElementById('mr').value);
      }
      }
      if (document.getElementById('mg')) {
      if (document.getElementById('mg').value != '') {
      img=eval('' + document.getElementById('mg').value);
      }
      }
      if (document.getElementById('mb')) {
      if (document.getElementById('mb').value != '') {
      imb=eval('' + document.getElementById('mb').value);
      }
      }
      this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
      let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
          let l = frame.data.length / 4;
          
      if (document.getElementById('mode')) {
          mode=eval('' + document.getElementById('mode').value);  
          if (mode == 1) {  // going grey
      for (let i = 0; i < l; i++) {
        bright = 0.34 * frame.data[i * 4 + 0] + 0.5 * frame.data[i * 4 + 1] + 0.16 * frame.data[i * 4 + 2];
        frame.data[i * 4 + 0]=bright;
        frame.data[i * 4 + 1]=bright;
        frame.data[i * 4 + 2]=bright;
      }
          } else if (mode == 2) { // invert colours
      for (let i = 0; i < l; i++) {
        frame.data[i * 4 + 0]=255 - frame.data[i * 4 + 0];
        frame.data[i * 4 + 1]=255 - frame.data[i * 4 + 1];
        frame.data[i * 4 + 2]=255 - frame.data[i * 4 + 2];
      }
          } 
      }     
  
      if (mode == 0) {
      for (let i = 0; i < l; i++) {
        let r = frame.data[i * 4 + 0];
        let g = frame.data[i * 4 + 1];
        let b = frame.data[i * 4 + 2];
        if ((Math.abs(r - imr) <= 43 && Math.abs(g - img) <= 43 && Math.abs(b - imb) <= 43) || (1 == 6 && r > 200)) { frame.data[i * 4 + 3] = 0; }
      }
      }
      this.ctx2.putImageData(frame, 0, 0);
      return;
    }
  };

document.addEventListener("DOMContentLoaded", () => {
  processor.doLoad();
});