const windows = document.querySelectorAll('.window');

windows.forEach(windowElement => {
  const titleBar = windowElement.querySelector('.title-bar');
  const closeButton = titleBar.querySelector('.close');

  titleBar.style.cursor = 'grab';

  let isDragging = false;
  let offsetX = 0;
  let offsetY = 0;

  titleBar.addEventListener('mousedown', (event) => {
    event.preventDefault();
    isDragging = true;
    offsetX = event.clientX - windowElement.offsetLeft;
    offsetY = event.clientY - windowElement.offsetTop;

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  });

  function onMouseMove(event) {
    if (isDragging) {
      const newLeft = event.clientX - offsetX;
      const newTop = event.clientY - offsetY;

      windowElement.style.left = `${newLeft}px`;
      windowElement.style.top = `${newTop}px`;
    }
  }

  function onMouseUp() {
    isDragging = false;
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }

  closeButton.addEventListener('click', () => {
    windowElement.style.display = 'none'; // Hide the window div
  });
});