/*note the changes to the gradient I made to make it work on Firefox*/
body {
  padding: 0px;
  margin: 0px;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 151, 255, 1) 100%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}
canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin;
  height: 80vmin;
}
#image {
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin;
  height: 80vmin;
  display:none
}
#overlay {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vmin;
  height: 70vmin;

  padding: 1vmin;
  margin: 0px;
  color: white;
  border-radius: 2vmin;

  font-size: 3.3vmin;
}

a {
  color: white;
}

var VIDEO
var SIZE = 200
var CANVAS
var COLOR_CANVAS

function removeOverlay(){
  document.getElementById('overlay').remove()
}

function main() {

    CANVAS = initializeCanvas("myCanvas", SIZE, SIZE)

    initializeCamera();
    var ctx = CANVAS.getContext("2d")

    setInterval(() => {
        drawScene(ctx)
    }, 100)
}

function initializeCanvas(canvasName, width, height) {
    let canvas = document.getElementById(canvasName)
    canvas.width = width
    canvas.height = height
    return canvas
}
async function initializeCamera() {

    let stream = null;

    try {
        stream = await navigator.mediaDevices.getUserMedia({ video: true });
        VIDEO = document.createElement('video')
        VIDEO.srcObject = stream
        VIDEO.play()
    
    } catch (err) {
        console.log("camera ERROR!")
    }
}
//  https://www.yourhealth.net.au/wp-content/uploads/2017/09/human-skeleton-with-bones.jpg
function drawScene(ctx) {

    if (VIDEO != null) {
        var min = Math.min(VIDEO.videoWidth, VIDEO.videoHeight)
        var sx = (VIDEO.videoWidth - min) / 2
        var sy = (VIDEO.videoHeight - min) / 2

        
        ctx.drawImage(VIDEO, sx, sy, min, min, 0, 0, SIZE, SIZE)
      
      setTimeout(() =>{
 const image=  document.getElementById('image')
      image.style.display = 'block'
        
      },500) 
    }
    else {
        //load
    }
    xRay(ctx)
}

function xRay(ctx) {

  ctx.save()
  ctx.scale(-1,1)
    const whiteThreshold = 230
    const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height)
   
    const { data } = imgData

    for (let i = 0; i < data.length; i += 4) {

        const red = data[i + 0]
        const green = data[i + 1]
        const blue = data[i + 2]

        if (red > whiteThreshold && green > whiteThreshold && blue > whiteThreshold) {
            //transparent if white enough
            data[i + 3] = 0
        }

    }
    ctx.putImageData(imgData, 0, 0)
  ctx.restore()
  
}

// function getPixelValue(data, x, y) {

//     return {
//         red: data[(y * SIZE + x) * 4],
//         green: data[(y * SIZE + x) * 4 + 1],
//         blue: data[(y * SIZE + x) * 4 + 2],
//         alpha: data[(y * SIZE + x) * 4 + 3]
//     }

// }