const image1 = document.getElementById('image1');
const image2 = document.getElementById('image2');

let interval;
let dx1 = 2;
let dy1 = 2;
let dx2 = -1;
let dy2 = 1;

function moveImages() {
    const rect1 = image1.getBoundingClientRect();
    const rect2 = image2.getBoundingClientRect();
    
    // Adjust for scroll offsets
    const scrollX = window.scrollX || window.pageXOffset;
    const scrollY = window.scrollY || window.pageYOffset;

    // Move image1
    let newX1 = rect1.left + dx1;
    let newY1 = rect1.top + dy1;
    if (newX1 <= 0 || newX1 + rect1.width >= window.innerWidth) {
        dx1 *= -1;
    }
    if (newY1 <= 0 || newY1 + rect1.height >= window.innerHeight) {
        dy1 *= -1;
    }
    image1.style.left = newX1 - scrollX + 'px';
    image1.style.top = newY1 - scrollY + 'px';

    // Move image2
    let newX2 = rect2.left + dx2;
    let newY2 = rect2.top + dy2;
    if (newX2 <= 0 || newX2 + rect2.width >= window.innerWidth) {
        dx2 *= -1;
    }
    if (newY2 <= 0 || newY2 + rect2.height >= window.innerHeight) {
        dy2 *= -1;
    }
    image2.style.left = newX2 - scrollX + 'px';
    image2.style.top = newY2 - scrollY + 'px';

    // Check for collision
    if (rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top) {
        showMessage();
    }
}

function showMessage() {
    const message = document.getElementById('message');
    message.classList.remove('hidden');
    clearInterval(interval);

    setTimeout(function() {
        message.classList.add('hidden');
        randomizeInitialPositions();
        interval = setInterval(moveImages, 10);
    }, 4000); // Adjust the duration (in milliseconds) the message is displayed before resetting
}


function randomizeInitialPositions() {
    const rect1 = image1.getBoundingClientRect();
    const rect2 = image2.getBoundingClientRect();

    image1.style.left = Math.floor(Math.random() * (window.innerWidth - rect1.width)) + 'px';
    image1.style.top = Math.floor(Math.random() * (window.innerHeight - rect1.height)) + 'px';

    image2.style.left = Math.floor(Math.random() * (window.innerWidth - rect2.width)) + 'px';
    image2.style.top = Math.floor(Math.random() * (window.innerHeight - rect2.height)) + 'px';
}

window.addEventListener('resize', randomizeInitialPositions); // Update positions on window resize

document.addEventListener('DOMContentLoaded', () => {
    randomizeInitialPositions();
    interval = setInterval(moveImages, 10);

});


window.addEventListener('DOMContentLoaded', function() {
    var audioPlayer = document.getElementById('audioPlayer');
    audioPlayer.volume = 0.060; // Set volume to 50%
});