var images = [
    "https://cavofregata.econtentsys.gr/1.jpg",
    "https://cavofregata.econtentsys.gr/2.jpg",
    "https://cavofregata.econtentsys.gr/3.jpg",
];

const image = document.createElement("img");
const villaeffect = document.getElementsByClassName("villaeffect");
image.src = images[0];
image.style.position = "fixed";
document.body.appendChild(image);

let x = 0;
let y = 0;
let targetX = 0;
let targetY = 0;
let easing = 0.1;
let lastX = 0;
let rotateValue = 0;
let damping = 0.99;

document.addEventListener("mousemove", (event) => {
    targetX = event.clientX;
    targetY = event.clientY;
    let deltaX = event.clientX - lastX;
    rotateValue += deltaX * 0.01;
    lastX = event.clientX;
});

function animate() {
    x += (targetX - x) * easing;
    y += (targetY - y) * easing;
    if (Math.abs(rotateValue) < 0.05) {
        rotateValue = 0;
    } else {
        rotateValue *= damping;
    }
    image.style.left = x + "px";
    image.style.top = y + "px";
    image.style.transform = `rotate(${rotateValue}deg)`;
    requestAnimationFrame(animate);
}

animate();

for (let i = 0; i < villaeffect.length; i++) {
    //villaeffect[i].addEventListener("mouseover", () => {
    villaeffect[i].addEventListener("mouseenter", () => {
        currentImageIndex = i;
        showImage();
    });
    //villaeffect[i].addEventListener("mouseout", hideImage);
    villaeffect[i].addEventListener("mouseleave", hideImage);
}
function showImage() {
    image.src = images[currentImageIndex];
    image.style.visibility = "visible";
}
function hideImage() {
    image.style.visibility = "hidden";
}

let text;
let textCreated = false;
let interval;
for (let i = 0; i < villaeffect.length; i++) {
    villaeffect[i].addEventListener("mouseover", () => {
        currentImageIndex = i;
        showImage();
        // create the text element only if it hasn't been created yet
        if (!textCreated) {
            text = document.createElement("div");
            text.innerHTML = "";
            text.style.cssText = "font-size:25px; position:absolute;";
            villaeffect[i].appendChild(text);
            textCreated = true;
        }
        // typewriting effect
        clearInterval(interval);
        let index = 0;
        interval = setInterval(() => {
            text.innerHTML += `0${i+1}`[index];
            index++;
            if (index === `0${i+1}`.length) {
                clearInterval(interval);
            }
        }, 50);
    });
    villaeffect[i].addEventListener("mouseout", () => {
        hideImage();
        villaeffect[i].removeChild(text);
        textCreated = false;
        clearInterval(interval);
    });
}