$(function () {
 
    var GrandGalleryWithMasonry = (function ($, window, document, undefined) {
 
        var grids = [];
 
        var numberOfImagesAtStart  = [];
        var numberOfImagesToReveal = [];
        var galleryRevealMethod    = [];
 
        // Number of visible images after initial load / "Tag" click / "Show more" click
        var counter = [];
 
        var allowCheckingIfReachedBottom = true;
        var allowTriggeringClickEvent    = true;
 
        var initIsotopeBlocks = function () {
 
            $('.js-gg-container-masonry').each(function() {
 
                var blockID = $(this).attr('data-block-id');
 
                numberOfImagesAtStart[blockID]  = parseInt($('.gg-container-'+blockID).attr('data-number-of-images-at-start'));
                numberOfImagesToReveal[blockID] = parseInt($('.gg-container-'+blockID).attr('data-number-of-images-to-reveal'));
                galleryRevealMethod[blockID]    = $('.gg-container-'+blockID).attr('data-gallery-reveal-method');
                counter[blockID]                = numberOfImagesAtStart[blockID];
 
                // Initialize isotope (container is hidden in view.php)
                grids[blockID] = $(this).isotope({
                    itemSelector: '.js-gg-item-outer-'+blockID,
                    layoutMode: 'masonry'
                });
 
                // Display all images when non-reveal method is set
                if (galleryRevealMethod[blockID]!='reveal_in_parts') {
                    numberOfImagesAtStart[blockID] = grids[blockID].data('isotope').filteredItems.length;
                }
 
                // Important!
                // Case: after clicking tag, isotope  will hide image using "display: none" (not "gg-hidden")
                // There is no image flickering because of that behaviour
                // Sometimes, after clicking different tags, image will be hidden, but will not have "gg-hidden" class
                grids[blockID].on('layoutComplete', function(event, filteredItems) {
                    jQuery.each(filteredItems, function(index, item) {
                        if ( ! $(item.element).hasClass('gg-hidden')) {
                            initLazyLoad(item);
                        }
                    });
                });
 
                // Reveal images
                revealImages(blockID, numberOfImagesAtStart[blockID], 'init');
 
            });
 
        };
 
        var filterByTag = function () {
 
            // Enable/disable multiselect (true or false)
            var multiSelectEnabled = true;
            // Display Images that have all filtered Tags ('and')
            // Display Images that have at least one of filtered Tags ('or')
            var multiSelectFilteringMode = 'or';
 
            var blockID = $(this).attr('data-block-id');
            var clickedFilterValue = $(this).attr('data-filter');
 
            // After clicking tags, counter will reset
            counter[blockID] = numberOfImagesAtStart[blockID];
 
            // Toggle active filter classes
            if (multiSelectEnabled) {
                if (clickedFilterValue==='*') {
                    $('.js-gg-tag-'+blockID).removeClass('gg-tag-active');
                    $(this).addClass('gg-tag-active');
                } else {
                    $('.js-gg-tag-'+blockID+'[data-filter="*"]').removeClass('gg-tag-active');
                    $(this).toggleClass('gg-tag-active');
                    if (!$('.js-gg-tag-'+blockID+'.gg-tag-active').length) {
                        $('.js-gg-tag-'+blockID+'[data-filter="*"]').addClass('gg-tag-active');
                    }
                }
            } else {
                $('.js-gg-tag-'+blockID).removeClass('gg-tag-active');
                $(this).addClass('gg-tag-active');
            }
 
            // Filter images by tag/tags
            var filterValueExpression = '*';
 
            if (multiSelectEnabled) {
                var selectedFilters = $('.js-gg-tag-'+blockID+'.gg-tag-active:not([data-filter="*"])'); // skip "All" tag
                var selectedFiltersValues = [];
                selectedFilters.each(function() {
                    selectedFiltersValues.push($(this).attr('data-filter'));
                });
                if (selectedFiltersValues.length) {
                    filterValueExpression = function () {
                        var tagsAttr = $(this).attr('data-tags');
                        var tags = tagsAttr.split(',');
                        if (multiSelectFilteringMode==='or') {
                            var shouldBeDisplayed = false;
                            $.each(selectedFiltersValues, function(index, value) {
                                if ($.inArray(value, tags) != -1) {
                                    shouldBeDisplayed = true;
                                }
                            });
                        } else {
                            var shouldBeDisplayed = true;
                            $.each(selectedFiltersValues, function(index, value) {
                                if ($.inArray(value, tags) == -1) {
                                    shouldBeDisplayed = false;
                                }
                            });
                        }
                        return shouldBeDisplayed;
                    }
                }
            } else {
                if (clickedFilterValue !== '*') {
                    filterValueExpression = function () {
                        var tagsAttr = $(this).attr('data-tags');
                        var tags = tagsAttr.split(',');
                        return ($.inArray(clickedFilterValue, tags) != -1) ? true : false;
                    }
                }
            }
 
            grids[blockID].isotope({
                filter: filterValueExpression
            });
 
            // Hide all elements and reveal starting images
            if (galleryRevealMethod[blockID]=='reveal_in_parts') {
                revealImages(blockID, counter[blockID], 'tag');
            }
 
            // Toggle "No images were found" text depending on number of filtered items
            toggleNoImagesFoundText(blockID, grids[blockID].data('isotope').filteredItems.length);
 
        };
 
        var filterByImageTag = function () {
 
            // Enable/disable multiselect (true or false)
            var multiSelectEnabled = true;
 
            var blockID  = $(this).attr('data-block-id');
            var filterID = $(this).attr('data-filter');
 
            if (multiSelectEnabled) {
                if ($('.js-gg-tag-'+blockID+'[data-filter="'+filterID+'"]').hasClass('gg-tag-active')) {
                    // Filter tag is already selected, so do nothing
                } else {
                    // Filter tag is not already selected, proceed as normal
                    $('.js-gg-tag-'+blockID+'[data-filter="'+filterID+'"]').trigger('click');
                }
            } else {
                $('.js-gg-tag-'+blockID+'[data-filter="'+filterID+'"]').trigger('click');
            }
 
            $('html, body').animate({
                scrollTop: $('.js-gg-tags-'+blockID).offset().top - 10
            }, 750);
 
        };
 
        var showMore = function () {
 
            var blockID = $(this).attr('data-block-id');
 
            // After clicking button, counter will be even to sum already visible and newly revealed images
            counter[blockID] = counter[blockID] + numberOfImagesToReveal[blockID];
 
            // Reveal images
            revealImages(blockID, counter[blockID], 'more');
 
        };
 
        var revealImages = function (blockID, numberOfVisibleImages, state) {
 
            var count = grids[blockID].data('isotope').filteredItems.length;
 
            // Disable tags in reveal method
            if (galleryRevealMethod[blockID]=='reveal_in_parts') {
                $('.js-gg-tags-' + blockID).addClass('gg-tags-disabled');
            }
 
            // Show spinner, hide button
            $('.js-gg-show-more-button-'+blockID).hide();
            $('.js-gg-spinner-'+blockID).show();
 
            // Lazy load new images
            var i = 1;
            var dd = numberOfImagesToReveal[blockID];
            if (state=='init' || state=='tag') {
                dd = numberOfImagesAtStart[blockID];
            }
            jQuery.each(grids[blockID].data('isotope').filteredItems, function(index, item) {
                if ($(item.element).hasClass('gg-hidden') && i <= dd) {
                    i++;
                    initLazyLoad(item);
                }
            });
 
            // Wait till all images are loaded
            grids[blockID].imagesLoaded( function() {
 
                // Remove "gg-hidden" class from all elements (this method prevents flickering)
                $('.js-gg-container-'+blockID).find('.gg-hidden').removeClass('gg-hidden');
                // Add "gg-hidden" class to hidden elements after you reveal new images
                var hiddenElements = grids[blockID].data('isotope').filteredItems.slice(numberOfVisibleImages, grids[blockID].data('isotope').filteredItems.length).map(function(item) {
                    return item.element;
                });
                $(hiddenElements).addClass('gg-hidden');
 
                // Hide spinner, show button
                $('.js-gg-show-more-button-'+blockID).show();
                $('.js-gg-spinner-'+blockID).hide();
 
                // Show/hide "Show more" button / "Spinner"
                if (numberOfVisibleImages >= count) {
                     $('.js-gg-show-more-'+blockID).hide();
                } else {
                    $('.js-gg-show-more-'+blockID).show();
                }
 
                // Show container
                if (galleryRevealMethod[blockID]=='reveal_in_parts') {
                    $('.js-gg-container-' + blockID).removeClass('gg-container-hidden');
                }
 
                // Enable tags again
                if (galleryRevealMethod[blockID]=='reveal_in_parts') {
                    $('.js-gg-tags-' + blockID).removeClass('gg-tags-disabled');
                }
 
                // Re-arrange layout (important)
                grids[blockID].isotope('layout');
 
                // Automatic reveal will not trigger another reveal earlier than finishing current one
                allowTriggeringClickEvent = true;
 
            });
 
        };
 
        var toggleNoImagesFoundText = function (blockID, count) {
 
            if (count) {
                $('.js-gg-no-images-found-'+blockID).addClass('gg-no-images-found-hidden');
                $('.js-gg-no-images-found-'+blockID).removeClass('gg-no-images-found-no-margin');
                $('.js-gg-container-'+blockID).removeClass('gg-container-no-margin');
            } else {
                $('.js-gg-no-images-found-'+blockID).removeClass('gg-no-images-found-hidden');
                $('.js-gg-no-images-found-'+blockID).addClass('gg-no-images-found-no-margin');
                $('.js-gg-container-'+blockID).addClass('gg-container-no-margin');
            }
 
        };
 
        var initLazyLoad = function (item) {
 
            $(item.element).find('.js-gg-image').addClass('js-lazy-load');
            var myLazyLoad = new LazyLoad({
                elements_selector: '.js-lazy-load'
            });
 
      };
 
        var checkIfReachedBottom = function () {
 
            var pageBottomOffset = $('.js-gg-show-more-button[data-automatic-reveal="yes"]').attr('data-automatic-reveal-offset');
 
            if(allowCheckingIfReachedBottom && allowTriggeringClickEvent &&( $(window).scrollTop() + $(window).height()) >= ($(document).height() - pageBottomOffset)) {
                $('.js-gg-show-more-button[data-automatic-reveal="yes"]').trigger('click');
                allowCheckingIfReachedBottom = false;
                allowTriggeringClickEvent    = false;
            } else if (($(window).scrollTop() + $(window).height()) < ($(document).height() - pageBottomOffset)) {
                allowCheckingIfReachedBottom = true;
            }
 
      };
 
        var triggerFirstTagClick = function () {
 
             $('.js-gg-tags').each(function() {
 
                var blockID = $(this).attr('data-block-id');
                var displayImagesFromFirstTag = parseInt($(this).attr('data-display-images-from-first-tag'));
 
                if (displayImagesFromFirstTag) {
                    if ($('.js-gg-tags-'+blockID+' > span:first-of-type').hasClass('gg-tag-active')) {
                        $('.js-gg-tags-'+blockID+' > span:nth-child(2)').trigger('click');
                    } else {
                        $('.js-gg-tags-'+blockID+' > span:first-of-type').trigger('click');
                    }
                }
 
            });
 
      };
 
        var bindFunctions = function () {
            $('body').on('click', '.js-gg-tag', filterByTag);
            $('body').on('click', '.js-gg-item-card-text-tag', filterByImageTag);
            $('body').on('click', '.js-gg-show-more-button', showMore);
            if ($('.js-gg-show-more-button[data-automatic-reveal="yes"]').length) {
                $(window).on('scroll', checkIfReachedBottom);
            }
        };
 
        var init = function () {
            initIsotopeBlocks();
            bindFunctions();
            triggerFirstTagClick();
        };
 
        return {
            init: init
        };
 
    })(jQuery, window, document);
 
    GrandGalleryWithMasonry.init();
 
});