//use strict;

document.addEventListener('readystatechange', () => {
    let close = document.querySelector('#mod-vid a[href="#close"]');
    let mod = document.querySelector('#mod-vid');

    close.addEventListener('click', () => {
        mod.classList.remove('active');
    });
    
});

document.addEventListener('readystatechange', () => {
    let close = document.querySelector('#close-map');

    close.addEventListener('click', () => {
        window.location.href = "itinerario.html";
    });
    
});
/**
 * Open modal overlay
 * for each POI
 * @param {string} id 
 */
function openModal(id) {
    const modTitles = {
        'prologo' : 'Itinerario - #0',
        'viaggiatore' : 'Itinerario - #1',
        'faresi' : 'Itinerario - #2',
        'piazza' : 'Itinerario - #3',
        'nobili' : 'Itinerario - #4',
        'rocco' : 'Itinerario - #5',
        'disputa' : 'Itinerario - #6',
        'duomo' : 'Itinerario - #7',
        'castello' : 'Itinerario - #8',
        'sabini' : 'Itinerario - #9',
        'monumento' : 'Itinerario - #10',
        'fuori' : 'Itinerario - #11',
        'carro' : 'Itinerario - #12',
    }
    // The POI with more than one video
    const multiVid = {
        'piazza' : 3,
        'rocco' : 2,
        'duomo' : 3,
        'monumento' : 3,
    };

    document.querySelector('.modal-title').innerHTML = modTitles[id];
    
    let modal = document.querySelector('#mod-vid');
    let modCont = document.querySelector('#mod-cont');
    let modChildren = Array.from(modCont.children);

    modChildren.forEach(c => {
        if (c.classList.contains('columns')) {
            if (c.id === 'col-'+id || 
                (c.id.includes(id) && Object.keys(multiVid).includes(id))) {
                c.classList.remove('hide');
            }
            else {
                c.classList.add('hide');
            }
        }
    })
    
    modal.classList.add('active');

    if (!Object.keys(multiVid).includes(id)) {
        let thumb = document.querySelector('#t-'+id);

        thumb.addEventListener('click', () => {
            openVid(id);
        });
    } else {
        let thumbs = [];
        for (let i = 1; i <= multiVid[id]; i++) {
            thumbs.push(document.querySelector(`#t-${id}${i}`));
        }
        thumbs.forEach(t => {
            let img = document.querySelector('#'+t.id+' img');
            let vidId = img.src.replace(/^(.*)?img\/thumbs\/thumb_(\w+)\.\w+$/i, "$2");

            t.addEventListener('click', () => {
                openVid(vidId);
            });
        });
    }
}
/**
 * Open video from thumbnail
 * @param {string} id 
 */
const openVid = (id) => {

    const titles = {
        'viaggiatore' : 'Il Viaggiatore #1',
        'prologo' : 'Prologo - Annunciazione',
        'faresi' : 'Sul carattere dei Faresi #2',
        'piazza' : 'Piazza Forcina #3',
        'antonio' : 'Antonio #3a',
        'francesco' : 'Francesco #3b',
        'nobili' : 'I Nobili di Fara #4',
        'rocco' : 'Rocco si è svegliato #5',
        'alberto' : 'Alberto #5b',
        'disputa' : 'Disputa sui dialetti e sui saperi #6',
        'duomo' : 'Piazza Duomo #7',
        'loredana' : 'Loredana #7a',
        'pietro' : 'Pietro #7b',
        'castello' : 'Il castello #8',
        'sabini' : 'I Sabini ieri e oggi #9',
        'monumento' : 'Il monumento sacro #10',
        'eva' : 'Eva #10a',
        'toto' : 'Toto #10b',
        'fuori' : 'Fuori Porta #11',
        'carro' : 'Il ritorno del carro #12',
    }
    const vimeoVids = {
        'prologo'     : '478632535',
        'viaggiatore' : '562518107',
        'faresi'      : '562529310',
        'piazza'      : '443587380',
        'antonio'     : '606341398',
        'francesco'   : '471773781',
        'nobili'      : '562534835',
        'rocco'       : '606346781',
        'alberto'     : '606372910',
        'disputa'     : '471537982',
        'duomo'       : '606343917',
        'loredana'    : '513080769',
        'pietro'      : '455576197',
        'castello'    : '562536148',
        'sabini'      : '542321131',
        'monumento'   : '606362546',
        'eva'         : '606352547',
        'toto'        : '606348670',
        'fuori'       : '606358668',
        'carro'       : '562262086',
    };

    let vimeoLink = 'https://player.vimeo.com/video/'+vimeoVids[id]+'?autoplay=1';

    localStorage.setItem('vidURI', 'vid_'+id+'.mp4');
    localStorage.setItem('vimeo', vimeoLink);
    localStorage.setItem('vidTitle', titles[id]);

    window.location.href = 'video.html';
}