var moreImageButton = document.querySelector('.js-more-images');
if(moreImageButton !== null)
{
    moreImageButton.addEventListener('click', function () {

        var hiddenImages = document.querySelectorAll('.js-photo-item.is-hidden');

        if(hiddenImages.length >= 1)
        {
            var revealAmount = 8;

            for(var i = 0; i < revealAmount; i++){

                var hiddenImage = hiddenImages[i];
                if(hiddenImage === undefined) break;

                hiddenImage.classList.remove('is-hidden');
            }
        }

        var remainingHidden = document.querySelectorAll('.js-photo-item.is-hidden');

        if(remainingHidden.length === 0) {
            moreImageButton.classList.add('is-hidden');
        }
    });
}


var youtubePlaylist = document.querySelector('.js-youtube-playlist');
if(youtubePlaylist !== null) {

    var thumbs = youtubePlaylist.querySelectorAll('.js-thumb');
    var videoAmount = thumbs.length;

    var activeItem = 0;

    for(var i = 0; i < videoAmount; i++){
        var thumb = thumbs[i];

        thumb.addEventListener('click', function () {
            activeItem = this.getAttribute('data-video');
            setActiveVideo();
        });
    }

    function setActiveVideo() {


        var youtubePlayers = YoutubeHandler.players;
        for(var j = 0; j < videoAmount; j++){

            var youtubePlayer = youtubePlayers['serie-video-' + j ];
            youtubePlayer.player.stopVideo();

            if(activeItem == j) youtubePlayer.player.playVideo();

        }

        youtubePlaylist.querySelector('.js-player-frame.is-active').classList.remove('is-active');
        youtubePlaylist.querySelector('.js-thumb.is-active').classList.remove('is-active');

        youtubePlaylist.querySelector('.js-player-frame[data-video="'+activeItem+'"]').classList.add('is-active');
        youtubePlaylist.querySelector('.js-thumb[data-video="'+activeItem+'"]').classList.add('is-active');


        if(window.innerWidth < 900){

            var body = $('html,body');

            body.animate({
                scrollTop: $('#youtube-playlist').offset().top - 40
            }, 700);

            body.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
                body.stop();
            });

            console.log('scroll');

        }

    }
}

var buildMap = document.getElementById('build-map');
var fasePhotos = document.querySelector('.js-fase-photos');
if(buildMap !== null && fasePhotos !== null) {

    var paths = buildMap.querySelectorAll('path');
    var navItems = fasePhotos.getElementsByClassName('js-fase-list-item');
    var images = fasePhotos.getElementsByClassName('js-fase-image');

    function setActiveFase(fase) {

        if(fase === 'Fase-3') return;

        // Set active path
        for (let i = 0; i < paths.length; i++) {
            var path = paths[i];
            var pathFase = path.getAttribute('id');

            path.classList.remove('is-active');

            if(pathFase === fase) path.classList.add('is-active');
        }

        // set active nav item
        for(let j = 0; j < navItems.length; j++) {

            var navItem = navItems[j];
            var navItemFase = navItem.getAttribute('data-fase');

            navItem.classList.remove('is-active');

            if(navItemFase === fase) navItem.classList.add('is-active');
        }

        // set active nav item
        for(let m = 0; m < images.length; m++) {

            var image = images[m];
            var imageFase = image.getAttribute('data-fase');

            image.classList.remove('is-active');

            if(imageFase === fase) image.classList.add('is-active');
        }
    }

    // Add event listeners
    for (let i = 0; i < paths.length; i++) {
        var path = paths[i];

        path.addEventListener('click', function () {
            var fase = this.getAttribute('id');
            setActiveFase(fase);
        });
    }

    for(let j = 0; j < navItems.length; j++) {

        var navItem = navItems[j];

        navItem.addEventListener('click', function () {
           var fase = this.getAttribute('data-fase') ;
            setActiveFase(fase);
        });
    }

}