// 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() {
    // Create popup element
    let popup = document.getElementById('alt-popup');
    
    // If popup doesn't exist, create it
    if (!popup) {
        popup = document.createElement('div');
        popup.id = 'alt-popup';
        popup.className = 'alt-popup';
        document.body.appendChild(popup);
    }
    
    // Find all elements with alt attributes
    function initializePopups() {
        // Get all elements with alt attributes
        const elementsWithAlt = document.querySelectorAll('[alt]');
        
        // 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
        const altText = event.target.getAttribute('alt');
        
        if (altText) {
            // use alt text in popup
            popup.textContent = altText;
            
            // 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';
    }
    
    // Initialize popups on load
    initializePopups();
    
    if (window.MutationObserver) {
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.addedNodes.length) {
                    initializePopups();
                }
            });
        });
        
        if (document.body) {
            observer.observe(document.body, { childList: true, subtree: true });
        }
    }
});

// Start observing the document with the configured parameters
observer.observe(document.body, { childList: true, subtree: true });

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