/*
   _      _      _      _      _      _      _      _      _      _   
 _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_ 
(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)
 (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_) 
   _                                                              _   
 _( )_                                                          _( )_ 
(_ o _)                           _                 _          (_ o _)
 (_,_)                           (_)               | |          (_,_) 
   _        _ __ ___  _   _   ___ _ _ __ ___  _ __ | | ___        _   
 _( )_     | '_ ` _ \| | | | / __| | '_ ` _ \| '_ \| |/ _ \     _( )_ 
(_ o _)    | | | | | | |_| | \__ \ | | | | | | |_) | |  __/    (_ o _)
 (_,_)     |_| |_| |_|\__, | |___/_|_| |_| |_| .__/|_|\___|     (_,_) 
   _                   __/ |                 | |                  _   
 _( )_      _ _       |___/ _   _            |_|                _( )_ 
(_ o _)    | (_)     | |   | | | |                             (_ o _)
 (_,_)     | |_  __ _| |__ | |_| |__   _____  __                (_,_) 
   _       | | |/ _` | '_ \| __| '_ \ / _ \ \/ /                  _   
 _( )_     | | | (_| | | | | |_| |_) | (_) >  <                 _( )_ 
(_ o _)    |_|_|\__, |_| |_|\__|_.__/ \___/_/\_\               (_ o _)
 (_,_)           __/ |                                          (_,_) 
   _            |___/                                             _   
 _( )_                                                          _( )_ 
(_ o _)                                                        (_ o _)
 (_,_)                                                          (_,_) 
   _      _      _      _      _      _      _      _      _      _   
 _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_ 
(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)
 (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_) 
 
 === This script creates a customisable lightbox for displaying images on your website. ===
 === Cobbled together by Fritzi (https://bohemiansultriness.nekoweb.org). Please don't remove the credits! ===
 
 ### How it works ###
 * It automatically attaches to links with the 'data-lightbox' attribute and displays the linked image in a modal overlay when clicked.

### Features ###
 * Responsive design
 * Supports image captions and alt text
 * Closes on clicking outside the image or the close button
 * Smooth open/close animations
 
 ### How to use ###
 * Include this script in your HTML file
 * Add the 'data-lightbox' attribute to any link you want to trigger the lightbox
 * Optionally add 'data-caption' and 'data-alt' attributes for captions and alt text
 
 ### Example ###
 * <a href="path/to/image.jpg" data-lightbox data-caption="My Caption" data-alt="Image description">
  <img src="path/to/thumbnail.jpg" alt="Thumbnail">
  </a>
 
 ### CSS customisation ###
 * Styling: Create a CSS file to style the lightbox elements (classes: .lightbox, .lightbox-content, etc.). Here's a sample CSS to get you started:
  
 *    .lightbox {
 *        visibility: hidden;
 *        display: flex;
 *        justify-content: center;
 *        align-items: center;
 *        position: fixed;
 *        z-index: 1000;
 *        left: 0;
 *        top: 0;
 *        width: 100%;
 *        height: 100%;
 *        background: rgba(32, 32, 32, 0.7);
 *        transition: all 2s ease-in-out;
 *        opacity: 0;
 *        pointer-events: none;
 *    }
 *    
 *    .lightbox:target {
 *        visibility: visible;
 *        opacity: 1;
 *        pointer-events: auto;
 *    }
 *    
 *    .lightbox-content {
 *        position: relative;
 *        max-width: 80vw;
 *        max-height: 80vh;
 *        width: fit-content;
 *        height: fit-content;
 *        transform: scale(0.8);
 *        transition: all 2s ease-in-out;
 *    }
 *    
 *    .lightbox:target .lightbox-content {
 *        transform: scale(1);
 *    }
 *    
 *    .lightbox figure {
 *        margin: 0;
 *        display: flex;
 *        flex-direction: column;
 *        align-items: center;
 *        width: auto;
 *        padding: 0;
 *        border: none;
 *        border-radius: 0;
 *        filter: none;
 *    }
 *    
 *    .lightbox figure img {
 *        max-width: 100%;
 *        max-height: calc(80vh - 40px);
 *        width: auto;
 *        height: auto;
 *        object-fit: contain;
 *        padding: 0px;
 *        border-radius: 5px;
 *        border: 4px solid white;
 *        opacity: 1;
 *    }
 *    
 *    .lightbox figure figcaption {
 *        color: #fff;
 *        padding: 10px;
 *        font-family: "Courier New", monospace;
 *        font-size: 80%;
 *        text-align: center;
 *        line-height: normal;
 *    }
 *    
 *    .lightbox figure:hover {
 *        box-shadow: 0 0;
 *    }
 *    
 *    .lightbox .close {
 *        position: absolute;
 *        top: -24px;
 *        right: -24px;
 *        width: 24px;
 *        height: 24px;
 *    }
 *    
 *    .lightbox .close-icon {
 *        width: 100%;
 *        height: 100%;
 *        border: 0;
 *        border-radius: 0;
 *    }
 * 
 */

 
 class Lightbox {
    constructor() {
        this.lightboxElement = null;
        this.init();
    }

    init() {
        this.createLightbox();
        this.bindEvents();
    }

    // Modify the close button
    createLightbox() {
        const lightboxHTML = `
            <div id="lightbox" class="lightbox">
                <div class="lightbox-content">
                    <figure>
                        <img src="" alt="" id="lightbox-img">
                        <figcaption id="lightbox-caption"></figcaption>
                    </figure>
                    <a href="#" class="close" id="lightbox-close">
                        <img src="path/to/close-button.svg" alt="Close" class="close-icon">
                    </a>
                </div>
            </div>
        `;
        document.body.insertAdjacentHTML('beforeend', lightboxHTML);
        this.lightboxElement = document.getElementById('lightbox');
    }

    bindEvents() {
        document.querySelectorAll('a[data-lightbox]').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                this.openLightbox(link.href, link.getAttribute('data-caption'), link.getAttribute('data-alt'));
            });
        });

        document.getElementById('lightbox-close').addEventListener('click', (e) => {
            e.preventDefault();
            this.closeLightbox();
        });

        this.lightboxElement.addEventListener('click', (e) => {
            if (e.target === this.lightboxElement) {
                this.closeLightbox();
            }
        });
    }

    openLightbox(imageSrc, caption, altText) {
        const img = document.getElementById('lightbox-img');
        const captionElement = document.getElementById('lightbox-caption');
        
        img.src = imageSrc;
        img.alt = altText || ''; // Set the alt text
        captionElement.textContent = caption || '';

        this.lightboxElement.style.visibility = 'visible';
        setTimeout(() => {
            this.lightboxElement.style.opacity = '1';
            this.lightboxElement.style.pointerEvents = 'auto';
            this.lightboxElement.querySelector('.lightbox-content').style.transform = 'scale(1)';
        }, 50);
    }

    closeLightbox() {
        this.lightboxElement.style.opacity = '0';
        this.lightboxElement.style.pointerEvents = 'none';
        this.lightboxElement.querySelector('.lightbox-content').style.transform = 'scale(0.8)';
        setTimeout(() => {
            this.lightboxElement.style.visibility = 'hidden';
        }, 2000); 
    }
}

// Initialize the Lightbox
new Lightbox();