// custom popups that appear on hover that uses the alt attribute on elements
// generated with ai i'm SORRY but i'm stupid and this works so its probably fiiiine
// i'll probably redo this when i can be assed to learn js myself
// Wait for DOM to be fully loaded before executing code (do we even need this. my site is just basic bitch html)
document.addEventListener("DOMContentLoaded", function () {
    let popup = document.getElementById("alt-popup");

    // add popup to all elements with alt or aria-label
    function initializePopups() {
        // find all elements with alt or aria-label
        const elementsWithAlt = document.querySelectorAll("[alt], [aria-label]");

        // add mouse events to each element
        elementsWithAlt.forEach((element) => {
            element.addEventListener("mousemove", showPopup);
            element.addEventListener("mouseout", hidePopup);
        });
    }

    // show popup and position it near the cursor
    function showPopup(event) {
        // get alt text or aria-label
        const altText = event.target.getAttribute("alt");
        const ariaLabel = event.target.getAttribute("aria-label");
        
        // Use alt text if available, otherwise use aria-label
        const displayText = altText || ariaLabel;

        if (displayText) {
            // use text in popup
            popup.textContent = displayText;

            // correct popup positioning away from cursor and make it visible
            popup.style.left = event.clientX + 20 + "px";
            popup.style.top = event.clientY + 20 + "px";
            popup.style.opacity = "1";
        }
    }

    function hidePopup() {
        popup.style.opacity = "0";
    }

    initializePopups();

    if (window.MutationObserver) {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length) {
                    initializePopups();
                }
            });
        });

        // Only set up the observer once
        if (document.body) {
            observer.observe(document.body, { childList: true, subtree: true });
        }
    }
});

// snippet that copies the html for my button(s)
function copyButtonSneexy() {
    navigator.clipboard.writeText(
        '<a href="https://synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy"></a>'
    );
    alert("button html copied!");
}

function copyButtonSynthDownload() {
    navigator.clipboard.writeText(
        '<a href="https://synth.download"><img src="https://synth.download/assets/buttons/synth.download.svg" alt="Synth.Download!"></a>'
    );
    alert("button html copied!");
}