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

   var cssfilter = function(event) {
    var zeronum=0;
    if (('' + eval('' + document.getElementById('mode').value)).length != document.getElementById('mode').value.length) {
       zeronum=document.getElementById('mode').value.length - ('' + eval('' + document.getElementById('mode').value)).length;
       if (zeronum == 1) { // sepia
         var rect=document.getElementById("c2").getBoundingClientRect();
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.zIndex='45';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         if (('' + document.getElementById("ic1").className).indexOf('sepia') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='sepia';
           } else {
             document.getElementById("ic1").className+=' sepia';
           }
         }
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
       } else if (zeronum == 2) { // saturate
         var rect=document.getElementById("c2").getBoundingClientRect();
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.zIndex='45';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         if (('' + document.getElementById("ic1").className).indexOf('saturate') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='saturate';
           } else {
             document.getElementById("ic1").className+=' saturate';
           }
         }
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
        } else if (zeronum == 3) { // hue-rotate
         var rect=document.getElementById("c2").getBoundingClientRect();
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.zIndex='45';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         if (('' + document.getElementById("ic1").className).indexOf('hue-rotate') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='hue-rotate';
           } else {
             document.getElementById("ic1").className+=' hue-rotate';
           }
         }
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
      } else if (zeronum == 4) { // opacity
         var rect=document.getElementById("c2").getBoundingClientRect();
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.zIndex='45';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         if (('' + document.getElementById("ic1").className).indexOf('opacity') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='opacity';
           } else {
             document.getElementById("ic1").className+=' opacity';
           }
         }
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
      } else if (zeronum == 5) { // brightness
         var rect=document.getElementById("c2").getBoundingClientRect();
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.zIndex='45';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         if (('' + document.getElementById("ic1").className).indexOf('brightness') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='brightness';
           } else {
             document.getElementById("ic1").className+=' brightness';
           }
         }
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
      } else if (zeronum == 6) { // contrast
         var rect=document.getElementById("c2").getBoundingClientRect();
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.zIndex='45';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         if (('' + document.getElementById("ic1").className).indexOf('contrast') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='contrast';
           } else {
             document.getElementById("ic1").className+=' contrast';
           }
         }
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
      } else if (zeronum == 7) { // blur
         var rect=document.getElementById("c2").getBoundingClientRect();
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.zIndex='45';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         if (('' + document.getElementById("ic1").className).indexOf('blur') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='blur';
           } else {
             document.getElementById("ic1").className+=' blur';
           }
         }
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
      } else if (zeronum == 8) { // drop-shadow
         var rect=document.getElementById("c2").getBoundingClientRect();
         document.getElementById("ic1").style.position='absolute';
         document.getElementById("ic1").style.zIndex='45';
         document.getElementById("ic1").style.top=('' + rect.top).replace('px','') + 'px';
         document.getElementById("ic1").style.left=('' + rect.left).replace('px','') + 'px';
         document.getElementById("ic1").style.width=('' + rect.width).replace('px','') + 'px';
         document.getElementById("ic1").style.height=('' + rect.height).replace('px','') + 'px';
         document.getElementById("ic1").style.display='block';
         if (('' + document.getElementById("ic1").className).indexOf('drop-shadow') == -1) {
           if (('' + document.getElementById("ic1").className) == '') {
             document.getElementById("ic1").className='drop-shadow';
           } else {
             document.getElementById("ic1").className+=' drop-shadow';
           }
         }
         document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
      }
            
    }
   };

   var zoom = function(event) {
    var zeronum=0;
    if (eval(eval('' + document.getElementById('mode').value) % 3) != 0 || eval('' + document.getElementById('mode').value) == 0) { document.getElementById("mode").value="15"; }
    if (('' + eval('' + document.getElementById('mode').value)).length != document.getElementById('mode').value.length) {
       zeronum=document.getElementById('mode').value.length - ('' + eval('' + document.getElementById('mode').value)).length;
    }
    if (zeronum > 0) { 
    cssfilter(event); 
    } else if (zeronum == 0) {
    document.getElementById("ic1").style.zIndex='-5';
    var x = event.layerX;
    var y = event.layerY;
    var x5=120, y5=192;
    x5/=eval(eval('' + document.getElementById('mode').value) / 3); 
    y5/=eval(eval('' + document.getElementById('mode').value) / 3); 
    document.getElementById("ic1").src=document.getElementById("c1").toDataURL();
    document.getElementById("c2").getContext("2d").drawImage(document.getElementById("ic1"),
                      Math.min(Math.max(0, x - 5), document.getElementById("ic1").width - 10),
                      Math.min(Math.max(0, y - 5), document.getElementById("ic1").height - 10),
                      Math.round(x5), Math.round(y5),
                      0, 0,
                      120, 192);
    }
  };


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");
      document.getElementById("c1").addEventListener('mousemove', zoom);
      document.getElementById("c1").addEventListener('touchmove', zoom);
      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; }
      }
      }
      if (eval(mode % 3) != 0 || mode == 0) { this.ctx2.putImageData(frame, 0, 0); }
      return;
    }
  };

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