(function ($, root, undefined) {

	$(function () {

		'use strict';

		// DOM ready, take it away


		

		// home animation timeline
		const homeAnimation = gsap.timeline();
		homeAnimation.to(".people", {
			duration: 5000,
			backgroundPosition: "+=20%",
			ease: Power4.easeOut,
		});
		homeAnimation.to(".trees", {
			delay:-5000,
			duration: 7500,
			backgroundPosition: "+=20%",
			ease: Power4.easeOut,
		});
		homeAnimation.to(".buildings", {
			delay:-7500,
			duration: 10000,
			backgroundPosition: "+=20%",
			ease: Power4.easeOut,
		});
		homeAnimation.to(".background", {
			delay:-10000,
			duration: 12500,
			backgroundPosition: "+=20%",
			ease: Power4.easeOut,
		});

		// Sliders
		$('#article-slider').flickity({
			cellAlign: 'left',
			contain: true,
			freeScroll: false,
			prevNextButtons: false,
			pageDots: true,
			wrapAround: false,
			imagesLoaded: true,
			// autoPlay: 4000,
			adaptiveHeight: false,
		});
		$('#title-slider').flickity({
			cellAlign: 'left',
			contain: true,
			freeScroll: false,
			prevNextButtons: false,
			pageDots: false,
			wrapAround: true,
			imagesLoaded: true,
			autoPlay: 4000,
		});


		// FAQ accordion
		$('.faqs .item').click(function() {

			let faqGroup = $(this).closest('.faq-group');
			$(this).find('.answer').slideToggle(300);
			$(this).toggleClass('active');

			$(faqGroup).find('.faqs .item').not(this).removeClass('active');
			$(faqGroup).find('.faqs .item').not(this).find('.answer').slideUp(300);

		});

		// Masonry grid
		function packeryGrid() {
			$('#grid').packery({
				itemSelector: '.grid-item',
			});
		}
		if ($("#grid").length) {
			packeryGrid();
		}
		if ($("#home-grid").length) {
			$('#home-grid').packery({
			  itemSelector: '.grid-item',
			});
		}



		// animate event & post rows
		var defaultAnimations = $('.default-animation');
		for (let defaultAnimation of defaultAnimations) {
			gsap.from(defaultAnimation, {
				scrollTrigger: {
					trigger: defaultAnimation,
					start: "-96px bottom",
				},
				duration: .6,
				opacity: 0,
				y: 96,
				ease: Sine.easeOut,
			});
		}

		gsap.from('.grid-item', {
			scrollTrigger: {
				trigger: '#home-grid, #media-grid',
				start: "-96px bottom",
			},
			duration: .6,
			stagger: .15,
			opacity: 0,
			y: 96,
			ease: Sine.easeOut,
		});



		// filter media en kennisbank artikelen

		const filter = $('#filter');
		const filterWrapper = $('#filter-wrapper');
		const showFilter = $('#show-filter');
		const filterConfirm = $('.filter-close');
		const filterCount = $('#count');

		let selector = $(".grid-item");
		let checkboxGroups = $(".filter-group");


		// show filter on mobile
		$(showFilter).click(function(){
			$(filterWrapper).fadeIn();
			$('html').addClass('noscroll');
		});
		// hide filter on mobile
		$(filterConfirm).click(function(){
			$(filterWrapper).fadeOut();
			$('html').removeClass('noscroll');
		});

		// count articles
		function countArticles(){
			let itemCount = $('.grid-item:visible').length;
			$(filterCount).html('('+itemCount+')');
		}
		countArticles();


		// filter hide items if > 5 list items
		$(checkboxGroups).each(function(index) {

			// count list items
			let listItems = $(checkboxGroups[index]).find('li').length;
			let extraItems = listItems - 5;

			// if more than 5 create dropdown
			if(listItems > 5) {
				$(checkboxGroups[index]).find('li:gt(4)').addClass('extra hidden');
				$(checkboxGroups[index]).append($('<div class="more">Bekijk meer ('+extraItems+')...</div>'));
			}

		});

		// show more items
		$('.more').on("click", function() {
			let checkboxGroup = $(this).closest(".filter-group");
			let listItems = $(checkboxGroup).find('li').length;
			let extraItems = listItems - 5;
			$(checkboxGroup).find('.extra').toggleClass('hidden');
			$(this).html() == "Minimaliseer..." ? $(this).html('Bekijk meer ('+extraItems+')...') : $(this).html('Minimaliseer...');
		});

		// show items based on checbox selection
		$(filter).change(function(){

			// get selected checkbox values
			var checkedBoxes = $(filter).find("input:checkbox:checked").map(function(){
				return $(this).val();
			}).get();

			// if checkboxes checked
			if (checkedBoxes.length !== 0) {

				// check if grid item has classname that exists in checkboxes array
				$(selector).each(function( index ) {

					let show = false; // hide by default

					// loop through checkboxes
					for (let i = 0; i < checkedBoxes.length; ++i) {

						// if selector has classname
						if($(this).hasClass(checkedBoxes[i])) {
							show = true;
						}
					}

					// check if to show the item
					if(show == true) {
						$(this).fadeIn(200);
					} else {
						$(this).hide();
					}

				});

			} else { // no checkboxes checked -> show all
				$(selector).fadeIn(200);
			}

         // When we begin, assume no images are loaded.
  var imagesLoaded = 0
  // Count the total number of images on the page when the page has loaded.
  var totalImages = $("img").length

  // After an image is loaded, add to the count, and if that count equals the
  // total number of images, fire the allImagesLoaded() function.
  $("img").on("load", function (event) {
    imagesLoaded++
    if (imagesLoaded == totalImages) {
      packeryGrid();
      console.log("all images loaded");
    }
  })
			// rebuild grid
			//packeryGrid();

			// update visible articles count
			countArticles();

		});


	});

})(jQuery, this);

/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:scripts] [57.139] DESIGN*/
/*******************************************************************/
/* 0.3 D>D */
/* db 161 */