// Everything for Aquadivina

class Aquadivina
{
    constructor() {
        this.callbacks = {
            'resize': [],
            'scroll': [],
            'ready': []
        };

        this.onresize = window.addEventListener('resize', () => {
            this.callbacks.resize.forEach((callback) => {
                callback();
            });
        });

        this.onscroll = window.addEventListener('scroll', () => {
            this.callbacks.scroll.forEach((callback) => {
                callback();
            });
        });

        this.onready = document.addEventListener('DOMContentLoaded', () => {
            this.callbacks.ready.forEach((callback) => {
                callback();
            });
        });
    }

    // Initial transformation of collage-images
    setupCollages() {
        this.images = document.querySelectorAll('.collage .image img, .gallery .image img');

        // If there are collage-images present on the site, add scroll and resize-listeners
        if(typeof this.images != 'undefined' && this.images != null) {
            this.onresize = window.addEventListener('resize', () => {
                this.checkCollages();
            });

            this.onscroll = window.addEventListener('scroll', () => {
                this.checkCollages();
            });
        }
    }

    // Check each element if it is in the viewport and the corresponding styles
    checkCollages() {
        if(typeof this.images == 'undefined') {
            console.log('No images present or not setup.');
            return;
        }

        let collages = document.querySelectorAll('.collage, .collage_fullpage, .gallery');
        let bounding = null;
        let images = null;
        let maxHeight = null;       // The highest image of each collage, the container's height will be set to that
        let pixelsInView = null;    // How many pixels is the current element in the viewport
        let percentInView = null;   // How many percent of image is visible in the viewport
        let percentageNeeded = null;

        collages.forEach((el) => {
            maxHeight = 0;
            bounding = el.getBoundingClientRect();
            pixelsInView = 0;
            percentInView = 0;
            percentageNeeded = el.classList.contains('collage') ? 25 : 15;
            
            if(bounding.top < 0 && bounding.bottom < 0) {
                pixelsInView = 0;
                percentInView = 0;
            }
            else if(bounding.top < 0 && bounding.bottom > 0) {
                pixelsInView = bounding.bottom;
                percentInView = parseInt(pixelsInView / bounding.height * 100);
            }
            else if(bounding.top >= 0 && bounding.top < window.innerHeight) {
                if(bounding.bottom > window.innerHeight) {
                    pixelsInView = window.innerHeight - bounding.top;
                    percentInView = parseInt(pixelsInView / bounding.height * 100);
                }
                else {
                    pixelsInView = bounding.height;
                    percentInView = 100;
                }
            }
            
            //if (bounding.top >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
            if(percentInView > percentageNeeded) {
                images = el.querySelectorAll('.image img, .image a img');

                images.forEach((image) => {
                    if(image.clientHeight > maxHeight) {
                        maxHeight = image.clientHeight;
                    }

                    image.classList.add('active');
                    image.style.transition = 'all 2s';
                    image.style.scale = image.dataset.end_scale ?? 1;
                    image.style.rotate = image.dataset.end_rotation;
                });
            } 
            else {
                images = el.querySelectorAll('.image img, .image a img');

                images.forEach((image) => {
                    if(image.clientHeight > maxHeight) {
                        maxHeight = image.clientHeight;
                    }

                    image.classList.remove('active');
                    image.style.scale = 1.0;
                    image.style.rotate = image.dataset.start_rotation;
                });
            }
            
            el.style['min-height'] = (maxHeight + 100) + 'px';
        });
    }

    // Open the mainmenu
    openMenu() {
        document.querySelector('.mainmenu').classList.add('open');
        document.querySelector('body').classList.add('menuopen');
    }

    // Close the mainmenu
    closeMenu() {
        document.querySelector('.mainmenu').classList.remove('open');
        document.querySelector('body').classList.remove('menuopen');
    }

    // On document ready, check if the header image needs to be animated, in case add callback to animate it when loaded
    setupHeaderAnimation() {
        if(document.querySelector('.background.animated')) {
            this.callbacks.ready.push(() => {
                document.querySelector('.background.animated').classList.add('go');
            });
        }
    }
}

aquadivina = new Aquadivina();
aquadivina.setupCollages();
aquadivina.setupHeaderAnimation();