function draw2097544(n) {
    if(n==1){
        px = 0;
        py = 0;
    }else if(n == 2){
        px = 444;
        py = 0;
    }else if(n == 3){
        px = 0;
        py = 250;
    }else if(n == 4){
        px = 444;
        py = 250;
    }
  var ctx = document.getElementById('2097544').getContext('2d');
  var img = new Image();
  img.onload = function() {
      ctx.canvas.width = 444;
      ctx.canvas.height = 250;
    ctx.drawImage(img, -px,-py,);
    //console.log(img.width + "x" + img.height)
  };
  img.src = "/static/res/webp/2097544.webp";

}
function handleMouseMove(e) {
            var canvasOffset = $(document.getElementById('2097544')).offset();
            var offsetX = canvasOffset.left;
            var offsetY = canvasOffset.top;
            mouseX = parseInt(e.clientX - offsetX);
            mouseY = parseInt(e.clientY - offsetY);
            //console.log(mouseX + "x" + mouseY)
            if(mouseX < 444/4*1){
                draw2097544(1);
            }else if(mouseX < 444/4*2){
                draw2097544(2);
            }else if(mouseX < 444/4*3){
                draw2097544(3);
            }else if(mouseX < 444/4*4){
                draw2097544(4);
            }
        }
function handleTouchMove(){
    var touch = event.touches[0]; // Get the first touch point
  var x = touch.clientX - canvas.getBoundingClientRect().left;
  var y = touch.clientY - canvas.getBoundingClientRect().top;
  if (x < 0){
      x = x+440;
  }
    console.log(x+"x"+y)
if(x < 444/4*1){
                draw2097544(1);
            }else if(x < 444/4*2){
                draw2097544(2);
            }else if(x < 444/4*3){
                draw2097544(3);
            }else if(x < 444/4*4){
                draw2097544(4);
            }
}
draw2097544(1);
$(document.getElementById('2097544')).mousemove(handleMouseMove);
var canvas = document.getElementById('2097544');
canvas.addEventListener('touchmove', handleTouchMove);