let mapBounds = {};
const imageWidth = 800, imageHeight = 600;
let targets = []; // Array of moving targets

function init(coordinate_lt, coordinate_rb) {
  mapBounds = {
    x1: coordinate_lt[0], y1: coordinate_lt[1],
    x2: coordinate_rb[0], y2: coordinate_rb[1]
  };

  // Initial mock targets (e.g., drones or rovers)
  targets = [
    { id: 1, x: 39.5, y: -74.5, vx: 0.0001, vy: 0.00005 }, // Velocity in coord units/frame
    { id: 2, x: 38.8, y: -73.8, vx: -0.00005, vy: 0.0001 }
  ];

  startBreathing();
}

function coordToPixels(x, y, bounds = mapBounds) {
  const dx = bounds.x2 - bounds.x1 || 1;
  const dy = bounds.y2 - bounds.y1 || 1;
  const px = imageWidth * (x - bounds.x1) / dx;
  const py = imageHeight * (bounds.y1 - y) / dy;
  return { x: Math.min(Math.max(px, 0), imageWidth), y: Math.min(Math.max(py, 0), imageHeight) };
}

function adjust(targetTriangle) {
  // Update bounds based on triangle (e.g., from fixed sensors)
  const targetBounds = {
    x1: Math.min(...targetTriangle.map(c => c[0])),
    y1: Math.min(...targetTriangle.map(c => c[1])),
    x2: Math.max(...targetTriangle.map(c => c[0])),
    y2: Math.max(...targetTriangle.map(c => c[1])),
  };
  const attractionStrength = 0.05;
  mapBounds.x1 += (targetBounds.x1 - mapBounds.x1) * attractionStrength;
  mapBounds.y1 += (targetBounds.y1 - mapBounds.y1) * attractionStrength;
  mapBounds.x2 += (targetBounds.x2 - mapBounds.x2) * attractionStrength;
  mapBounds.y2 += (targetBounds.y2 - mapBounds.y2) * attractionStrength;

  // Update moving targets
  targets.forEach(t => {
    t.x += t.vx; // Move based on velocity
    t.y += t.vy;
    // Bounce off bounds (optional, for demo)
    if (t.x < mapBounds.x1 || t.x > mapBounds.x2) t.vx *= -1;
    if (t.y < mapBounds.y1 || t.y > mapBounds.y2) t.vy *= -1;
  });

  updateUI();
}

function updateUI() {
  const container = document.querySelector('.map-container');
  container.innerHTML = '<img src="muddy-earth.png" class="map-image" alt="Map">';

  // Plot moving targets
  targets.forEach(t => {
    const pos = coordToPixels(t.x, t.y);
    const marker = document.createElement('div');
    marker.className = 'marker';
    marker.style.left = `${pos.x}px`;
    marker.style.top = `${pos.y}px`;
    marker.style.background = t.id === 1 ? 'purple' : 'orange';
    container.appendChild(marker);
  });
}

function startBreathing() {
  function breathe() {
    // Fixed triangle (e.g., RTK reference points)
    const referenceTriangle = [
      [39.0 + Math.sin(Date.now() / 1000) * 0.01, -74.0],
      [39.5, -74.5 + Math.cos(Date.now() / 1000) * 0.01],
      [38.5, -73.5]
    ];
    adjust(referenceTriangle);
    requestAnimationFrame(breathe);
  }
  breathe();
}

// Earth test
init([40.0, -75.0], [38.0, -73.0]);

//CSS code ... ...