ScriptUI - Create Window Showing a Different part of the image

Hello! I am attempting to write a plugin to enable me to show a different part of an image to the point where the mouse is. Specifically, I want to be zoomed in quite close on one side and to be able to see a corresponding part of the other side of the image. I have gone down a number of rabbit holes, and I think my lack of knowledge of JavaScript/plugin writing has tied me in knots. If anyone is able to help me untangle my attempt at a script, or indeed has a suggestion for a better/existing way to achieve what I want - that would be much appreciated!

// Create a new ScriptUI palette window
var palette = new Window("palette", "Image Preview", undefined, {resizeable: true});
palette.bounds = [100, 100, 400, 400]; // Set initial size and position

// Create an image container inside the palette
var imageContainer = palette.add("image");
imageContainer.bounds = [0, 0, 300, 300]; // Set the size of the image container

// Function to update the preview window
function updatePreviewWindow(event) {
  // Get the active document and layer
  var activeDocument = app.activeDocument;
  var activeLayer = activeDocument.activeLayer;

  // Calculate the offset coordinates
  var offsetX = 100; // Adjust as needed
  var offsetY = 100; // Adjust as needed
  var previewX = event.clientX + offsetX;
  var previewY = event.clientY + offsetY;

  // Get the pixel data for the offset region
  var imageData = activeLayer.getPixels(
    new Rectangle(
      previewX - imageContainer.bounds[2] / 2,
      previewY - imageContainer.bounds[3] / 2,
      imageContainer.bounds[2],
      imageContainer.bounds[3]
    )
  );

  // Create an off-screen canvas and draw the pixel data
  var canvas = document.createElement("canvas");
  canvas.width = imageContainer.bounds[2];
  canvas.height = imageContainer.bounds[3];
  var ctx = canvas.getContext("2d");
  var imageDataObj = ctx.createImageData(imageContainer.bounds[2], imageContainer.bounds[3]);

  // Copy the pixel data to the canvas
  for (var i = 0; i < imageData.length; i++) {
    imageDataObj.data[i] = imageData[i];
  }

  // Draw the image data onto the canvas
  ctx.putImageData(imageDataObj, 0, 0);

  // Convert canvas to base64 data URL
  var base64ImageData = canvas.toDataURL();

  // Update the preview window content and position
  imageContainer.image = base64ImageData;
  imageContainer.bounds = [previewX, previewY, previewX + imageContainer.bounds[2], previewY + imageContainer.bounds[3]];

  // Refresh the palette to ensure the changes are visible
  palette.layout.layout(true);
}

// Function to handle mouse movement
function handleMouseMove(event) {
  // Update the preview window
  updatePreviewWindow(event);
}

// Add a listener for mouse movement
palette.addEventListener("mousemove", handleMouseMove);

// Show the palette
palette.show();