FROMMO = {
    currentpage: 0,
    scrolling: 0,
    pages: document.querySelectorAll('section.page'),
    pagination: document.querySelector('ul.pagination'),
    noxlumos: document.querySelector('body footer > button.theme-toggle'),
    scrollme: document.querySelector('body > button.scroll-me'),
    tooltip: document.querySelector('.tooltip'),
    flippers: document.querySelectorAll('.frommo-flipper .flipper'),
    hour: new Date().getHours(),
    touchstartX: 0,
    touchstartY: 0,
    touchendX: 0,
    touchendY: 0,
    gotopageindex: 0,
    modalvisible: 0,
    showcase: {
        container: document.querySelector(".showcase"),
        items: document.querySelectorAll(".showcase .showcase-item"),
        itemnext: document.querySelector(".showcase .itemnext"),
        itemprev: document.querySelector(".showcase .itemprev"),
        currentitem: 0,
        settings: {
            itemsperpage: 6,
        },
        responsive: {
            0: {itemsperpage: 2},
            700: {itemsperpage: 4},
            1450: {itemsperpage: 6},
        }
    }
};


document.addEventListener('touchstart', function(event) {
    FROMMO.touchstartX = event.changedTouches[0].screenX;
    FROMMO.touchstartY = event.changedTouches[0].screenY;
}, false);
document.addEventListener('touchend', function(event) {
    FROMMO.touchendX = event.changedTouches[0].screenX;
    FROMMO.touchendY = event.changedTouches[0].screenY;
    FROMMO.action('handletouch');
}, false);


document.addEventListener('click', (event) => {
    if (event.target.closest('button.theme-toggle svg') || event.target.closest('button.theme-toggle path') || event.target.closest('button.theme-toggle')) {
        FROMMO.action('noxlumos', {'target': event.target});
    }
    if (event.target.closest('button.scroll-me svg') || event.target.closest('button.scroll-me path') || event.target.closest('button.scroll-me')) {
        FROMMO.action('pagedown');
    }
    if (event.target.closest('.header-inner svg') || event.target.closest('.header-inner path')) {
        FROMMO.action('moveto', {'page': 0});
    }
}, false);


/* Pagination */
FROMMO.pages.forEach(function(page, index) {
    let li = document.createElement('li');
    li.setAttribute('data-pageindex', index);
    li.setAttribute('data-title', page.getAttribute('data-title'));
    li.setAttribute('data-slug', page.getAttribute('data-slug'));
    if (index == 0) {
        li.classList.add('active');
    }
    FROMMO.pagination.append(li);
});

FROMMO.paginationitems = document.querySelectorAll('ul.pagination li');

/* Tooltip Mouseover */
document.addEventListener('mouseover', (event) => {
    if (!event.target.closest('ul.pagination li')) {
        return;
    }
    FROMMO.action('tooltip', {'show': 1, 'target': event.target});
}, false);
document.addEventListener('mouseout', (event) => {
    if (!event.target.closest('ul.pagination li')) {
        return;
    }
    FROMMO.action('tooltip', {'show': 0, 'target': event.target});
}, false);

document.addEventListener('click', (event) => {
    if (!event.target.closest('ul.pagination li')) {
        return;
    }
    FROMMO.action('moveto', {'page': event.target.getAttribute('data-pageindex')});
}, false);

/* Die Flippers */
FROMMO.flippers.forEach(function (item) {
    item.addEventListener('focus', (event) => {
       FROMMO.action('flipflipper', {'target': event.target});
    }, false);
});

/* Modal */
document.addEventListener('click', (event) => {
    if (!event.target.hasAttribute('data-modal')) {
        return;
    }
    event.preventDefault();
    FROMMO.action('togglemodal', {'modal': event.target.getAttribute('data-modal')});
}, false);

/* Arrow up/down */
document.addEventListener('keydown', function(e) {
    if (e.keyCode == '38') {
        FROMMO.action('pageup');
    }
    if (e.keyCode == '40') {
        FROMMO.action('pagedown');
    }
});

/* Mousewheel up/down */
document.body.addEventListener('wheel', checkScrollDirection, { passive: false });
function checkScrollDirection(event) {
    if (!event.target.parentNode.parentNode.classList.contains('modal-content')) {
        event.preventDefault();
        if (checkScrollDirectionIsUp(event)) {
            FROMMO.action('pageup');
        } else {
            FROMMO.action('pagedown');
        }
    }
}
function checkScrollDirectionIsUp(event) {
    return (event.wheelDelta) ? event.wheelDelta > 0 : event.deltaY < 0;
}

/* Action */
FROMMO.action = function(action, parameters) {
    parameters = parameters ? parameters : {};
    switch (action) {
        case 'flipflipper':
            const showcaseitems = document.querySelectorAll('.frommo-flipper-item');
            showcaseitems.forEach(function (item) {
                item.classList.remove('flipped');
            });
            parameters.target.closest('.frommo-flipper-item').classList.add('flipped');
            let itempageslug = parameters.target.closest('.page').getAttribute('data-slug');
            if (itempageslug != document.location.hash) {
                let navactive = document.querySelector('.pagination li[data-slug="'+itempageslug+'"]');
                FROMMO.action('moveto', {'page': navactive.getAttribute('data-pageindex')});
            }
            break;
        case 'tooltip':
            FROMMO.tooltip.classList.add('hidden');
            if (parameters.show) {
                let rect = parameters.target.getBoundingClientRect();
                let leftpos = rect.left - FROMMO.tooltip.clientWidth - 15;
                let toppos = rect.top - 15;
                FROMMO.tooltip.setAttribute('style', 'left: '+leftpos+'px; top: '+toppos+'px;');
                FROMMO.tooltip.innerHTML = parameters.target.getAttribute('data-title');
                FROMMO.tooltip.classList.remove('hidden');
                setTimeout(function() {FROMMO.tooltip.classList.add('hidden');}, 1500);
            }
            break;
        case 'togglemodal':
            const allmodals = document.querySelectorAll('.modal');
            allmodals.forEach(function (item) {
                item.classList.add('hidden');
            });

            const modal = document.querySelector('.'+parameters.modal);
            modal.classList.remove('hidden');
            FROMMO.modalvisible = 1;
            break;
        case 'handletouch':
            if (FROMMO.touchendY+30 < FROMMO.touchstartY) {
                FROMMO.action('pagedown');
            }
            if (FROMMO.touchendY-30 > FROMMO.touchstartY) {
                FROMMO.action('pageup');
            }
            break;
        case 'noxlumos':
            if (FROMMO.noxlumos.classList.contains('nox')) {
                FROMMO.noxlumos.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"/></svg>';
            }else{
                FROMMO.noxlumos.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M332.2 426.4c-93.1 17.7-178.5-53.7-178.5-147.7 0-54.2 29-104 76.1-130.8 7.3-4.1 5.4-15.1-2.8-16.7C108.7 109.4 0 200 0 320c0 106 85.8 192 191.8 192 59.2 0 113.2-26.9 149-71.1 5.3-6.5-.5-16.1-8.6-14.5zM304 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zm154.7 85.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208l-53.3-26.7z"/></svg>';
            }
            FROMMO.noxlumos.classList.toggle('lumos');
            FROMMO.noxlumos.classList.toggle('nox');
            let body = document.querySelector('body');
            body.classList.toggle('night');
            break;
        case 'moveto':
            if (parameters.slug) {
                const movetopage = document.querySelector('.pagination li[data-slug="#'+parameters.slug+'"]');
                FROMMO.currentpage = movetopage.getAttribute('data-pageindex');
            }else{
                FROMMO.currentpage = parameters.page;
            }
            FROMMO.pages[FROMMO.currentpage].scrollIntoView();
            FROMMO.action('updatepagination');
            break;
        case 'pageup':
            if (FROMMO.scrolling == 1 || FROMMO.modalvisible == 1) {
                return;
            }
            FROMMO.scrolling = 1;
            FROMMO.currentpage--;
            if (FROMMO.currentpage < 0) {
                FROMMO.currentpage = 0;
            }
            FROMMO.action('moveto', {'page': FROMMO.currentpage});
            break;
        case 'pagedown':
            if (FROMMO.scrolling == 1 || FROMMO.modalvisible == 1) {
                return;
            }
            FROMMO.scrolling = 1;
            FROMMO.currentpage++;
            if (FROMMO.currentpage >= FROMMO.pages.length) {
                FROMMO.currentpage = (FROMMO.pages.length)-1;
            }
            FROMMO.action('moveto', {'page': FROMMO.currentpage});
            break;
        case 'updatepagination':
            FROMMO.paginationitems.forEach(function (item) {
                item.classList.remove('active');
            });
            const activepagination = document.querySelector('ul.pagination li[data-pageindex="'+FROMMO.currentpage+'"]');
            activepagination.classList.add('active');
            if (FROMMO.currentpage > 0) {
                FROMMO.scrollme.classList.add('you-shall-not-scroll');
            }else{
                FROMMO.scrollme.classList.remove('you-shall-not-scroll');
            }
            document.location.hash = activepagination.getAttribute('data-slug');
            setTimeout(function() {FROMMO.scrolling = 0;}, 1000);
            break;
        case 'showcase-init':
            FROMMO.showcase.currentitem = 0;
            Object.keys(FROMMO.showcase.responsive).forEach(function (index) {
                if (window.innerWidth > index) {
                    FROMMO.showcase.settings = FROMMO.showcase.responsive[index];
                }
            });
            Object.keys(FROMMO.showcase.items).forEach(function (index) {
                if (index >= FROMMO.showcase.settings.itemsperpage) {
                    FROMMO.showcase.items[index].classList.remove('active');
                } else {
                    FROMMO.showcase.items[index].classList.add('active');
                }
            });
            FROMMO.action('showcase-checknav');
            break;
        case 'showcase-prevnext':
            event.preventDefault();
            if (parameters.target.classList.contains('hidden')) {
                return;
            }
            if (parameters.direction == 'next') {
                let currentitems = [];
                for (let i = 0; i < FROMMO.showcase.settings.itemsperpage; i++) {
                    currentitems.push(FROMMO.showcase.items[FROMMO.showcase.currentitem + i]);
                }
                let nextitems = [];
                for (let i = 0; i < FROMMO.showcase.settings.itemsperpage; i++) {
                    nextitems.push(FROMMO.showcase.items[FROMMO.showcase.currentitem + FROMMO.showcase.settings.itemsperpage + i]);
                }
                currentitems.forEach((item) => {
                    item.classList.add('to-left');
                    item.addEventListener('animationend', function() {
                        this.classList.remove('active', 'to-left');
                    });
                });
                FROMMO.showcase.currentitem = ((FROMMO.showcase.currentitem + FROMMO.showcase.settings.itemsperpage) + FROMMO.showcase.items.length) % FROMMO.showcase.items.length;
                nextitems.forEach((item) => {
                    item.classList.add('next', 'from-right');
                    item.addEventListener('animationend', function() {
                        this.classList.remove('next', 'from-right');
                        this.classList.add('active');
                    });
                });
            }
            if (parameters.direction == 'prev') {
                let currentitems = [];
                for (let i = 0; i < FROMMO.showcase.settings.itemsperpage; i++) {
                    currentitems.push(FROMMO.showcase.items[FROMMO.showcase.currentitem + i]);
                }
                let nextitems = [];
                for (let i = 0; i < FROMMO.showcase.settings.itemsperpage; i++) {
                    nextitems.push(FROMMO.showcase.items[FROMMO.showcase.currentitem - FROMMO.showcase.settings.itemsperpage + i]);
                }
                currentitems.forEach((item) => {
                    item.classList.add('to-right');
                    item.addEventListener('animationend', function() {
                        this.classList.remove('active', 'to-right');
                    });
                });
                FROMMO.showcase.currentitem = ((FROMMO.showcase.currentitem - FROMMO.showcase.settings.itemsperpage) + FROMMO.showcase.items.length) % FROMMO.showcase.items.length;
                nextitems.forEach((item) => {
                    item.classList.add('next', 'from-left');
                    item.addEventListener('animationend', function() {
                        this.classList.remove('next', 'from-left');
                        this.classList.add('active');
                    });
                });
            }
            FROMMO.action('showcase-checknav');
            break;
        case 'showcase-checknav':
            if (FROMMO.showcase.items[FROMMO.showcase.currentitem - FROMMO.showcase.settings.itemsperpage] === undefined) {
                FROMMO.showcase.itemprev.classList.add('hidden');
                FROMMO.showcase.itemprev.setAttribute('aria-disabled','true');
            } else {
                FROMMO.showcase.itemprev.classList.remove('hidden');
                FROMMO.showcase.itemprev.removeAttribute('aria-disabled');
            }
            if (FROMMO.showcase.items[FROMMO.showcase.currentitem + FROMMO.showcase.settings.itemsperpage] === undefined) {
                FROMMO.showcase.itemnext.classList.add('hidden');
                FROMMO.showcase.itemnext.setAttribute('aria-disabled','true');
            } else {
                FROMMO.showcase.itemnext.classList.remove('hidden');
                FROMMO.showcase.itemnext.removeAttribute('aria-disabled');
            }
            break;
    }
};


document.addEventListener("DOMContentLoaded", function() {
    FROMMO.gotopageindex = (document.location.hash) ? document.querySelector('ul.pagination li[data-slug="'+document.location.hash+'"]').getAttribute('data-pageindex') : 0;
    FROMMO.action('moveto', {'page': FROMMO.gotopageindex});
    if (FROMMO.hour < 8 || FROMMO.hour > 18) {
        FROMMO.action('noxlumos', {'target': FROMMO.noxlumos});
    }
    FROMMO.action('showcase-init');
});


window.addEventListener('resize', () => {FROMMO.action('showcase-init')});

document.addEventListener('click', function(event) {
    if (event.target.classList.contains('itemnext')) {
        FROMMO.action('showcase-prevnext', {'direction': 'next', 'target': event.target});
    }
    if (event.target.classList.contains('itemprev')) {
        FROMMO.action('showcase-prevnext', {'direction': 'prev', 'target': event.target});
    }
});

;(function () {
    'use strict';
    function keyboardFocus (e) {
        if (e.keyCode !== 9) {
            return;
        }
        switch (e.target.nodeName.toLowerCase()) {
            case 'input':
            case 'select':
            case 'textarea':
                break;
            default:
                document.documentElement.classList.add('keyboard-focus');
                document.removeEventListener('keydown', keyboardFocus, false);
                document.addEventListener('mouseup', mouseFocus, false);
        }
    }

    function mouseFocus (e) {
        document.documentElement.classList.remove('keyboard-focus');
        document.removeEventListener('mouseup', mouseFocus, false);
        document.addEventListener('keydown', keyboardFocus, false);
    }
    document.addEventListener('keydown', keyboardFocus, false);
})();