const scannerLine = document.getElementById("scannerLine");
const scannerLineH = document.getElementById("scannerLineH");

$(document).ready(function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
       $("body").removeClass("hideBody");
       $("body").addClass("mobile");

    }else if(('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) && (testratio<0.7777777) ){
        $("body").removeClass("hideBody");
        $("body").addClass("mobile mobileOld");

    }else{
        $("body").removeClass("hideBody");
        $("body").addClass("desktop")
    };



    const img = new Image();
        img.crossOrigin = "anonymous";
        img.src = "./media/360_F_163966311_qh3qSk57mw9oLPOklZigzX9zlB5DgdaM.jpeg";
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const scanner = $(".scanner");
        
        const destination = document.getElementById("letter");
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        img.addEventListener("load", () => {
            canvas.height = canvas.width * (img.height / img.width);
            scanner.css("width", $("#canvas").width());
            scanner.css("height", $("#canvas").height());
            var hRatio = canvas.width / img.width    ;
            var vRatio = canvas.height / img.height  ;
            var ratio  = Math.min ( hRatio, vRatio );
            ctx.drawImage(img, 0,0, img.width, img.height, 0,0,img.width*ratio, img.height*ratio);
          // ctx.drawImage(img, 0, 0);
          img.style.display = "none";
        });
        const hoveredColor = document.getElementById("hovered-color");
        const selectedColor = document.getElementById("selected-color");
        

        
        // let rect = scannelLine.getBoundingClientRect();
        function pick() {
          const bounding = canvas.getBoundingClientRect();
          

          const letters = document.getElementById("typeMaster");
          const letter = $(".letter");

          letter.each(function(i,e){
                let rect = scannerLine.getBoundingClientRect();
                let rectH = scannerLineH.getBoundingClientRect();

                const x = rect.left - bounding.left;
                const y = rectH.top - bounding.top;
                const pixel = ctx.getImageData(x - (i*2), y , 1, 1);
                const data = pixel.data;

                let rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;

                hoveredColor.style.background = rgba;
                hoveredColor.textContent = rgba;
                // letters.style.color = rgba;

                // $(".typeMaster").css("background",rgba);
                $(e).css("color",rgba);
                $(e).css("font-variation-settings","'wght' "+ ((data[0]) + (data[1]) + (data[2])));

                return rgba;
          })

          

          
        }

        const milliseconds = 100;
        window.setInterval(pick, milliseconds);

});

$(window).on("load", function(){
    
    $("#typeMaster").html(function(index, html) {
        return html.replace(/\w+/g, '<span class="word">$&</span>');
    });
    $(".word").html(function(index, html) {
        return html.replace(/\S/g, '<span class="letter">$&</span>');
    })
    var length = $(".letter").length;
    var currentMousePos = { x: -1, y: -1 };
    
});

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = "duration X: " + slider.value; // Display the default slider value

var sliderY = document.getElementById("myRangeY");
var outputY = document.getElementById("demoY");
outputY.innerHTML = "duration Y: " + sliderY.value; // Display the default slider value

slider.oninput = function() {
  output.innerHTML = "duration X: " + this.value;

  scannerLine.style.animationDuration = this.value + "s";
}

sliderY.oninput = function() {
  outputY.innerHTML = "duration Y: " + this.value;
  scannerLineH.style.animationDuration = this.value + "s";
}