$(function(){


$(window).on("load", function() {
  

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

		// filter articles
		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');
		});


		// filter view
		$('#list-view').click(function(){

			$('.grid-item').addClass('list-view');

			// rebuild grid
			packeryGrid();

			$('.view').removeClass('active');
			$(this).addClass('active');
		});

		// grid view
		$('#grid-view').click(function(){

			$('.grid-item').removeClass('list-view');

			// rebuild grid
			packeryGrid();

			$('.view').removeClass('active');
			$(this).addClass('active');
		});

		// 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;
						}
						else {
							// hide the element and break
							show = false;
							break;
						}
					}

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

				});

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

			// rebuild grid
			packeryGrid();
          
            

			// update visible articles count
			countArticles();

		});
  

  
    console.log( "ready!" );
   
  
   if ($('#grid-view').hasClass('active'))
     $('#grid-view').click();
   else
     $('#list-view').click();
     
});

/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:source-filter] [56.192] DESIGN*/
/*******************************************************************/
/* 0.9 D>D */
/* db 160 */
});