<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?>
<script>
<?php 
if($pf_gallery_load_more == "yes") { ?>
	//let targetFilterm = 0;
	// Check total images according to filter
	<?php if ( $multi_filters == 1 ) { ?>
	jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> [data-multifilter]').click(function() {
		jQuery(".pf_loader-<?php echo $pf_gallery_id; ?>").hide();
		jQuery(".pf_load_more-<?php echo $pf_gallery_id; ?>").show();
		jQuery(".pf_no_more-<?php echo $pf_gallery_id; ?>").hide();
		
		if (!jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> li').hasClass("filter-active")) {
			jQuery('#filter-all').addClass('filter-active');
		}
		
		let targetFilterm = jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> li.filter-active').map(function(){return jQuery(this).data('multifilter');}).get();
		
		if(targetFilterm[0] == 'all') { targetFilterm = 'all'; }
		
		options = {
			/*animationDuration: 0.5,*/
			callbacks: {
				onFilteringStart: function() { },
				onFilteringEnd: function() { },
				onShufflingStart: function() { },
				onShufflingEnd: function() { },
				onSortingStart: function() { },
				onSortingEnd: function() { }
			},
			controlsSelector: '.filtr-controls-<?php echo $pf_gallery_id; ?>',
			filter: targetFilterm,
			filterOutCss: {
			  top:'0px',
				left:'0px',
				opacity: 0.001,
				transform: ''
			  },
			  filterInCss: {
				  top:'0px',
				left:'0px',
				opacity: 1,
				transform: ''
			  },
			layout: 'sameWidth',
			selector: '.filtr-item',
			setupControls: false
		}
		let filterizd = jQuery('.filter_gallery_<?php echo $pf_gallery_id; ?>').filterizr(options);
		filterizd.filterizr(options).resize();
	});
	<?php } else { ?>
		jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> [data-filter]').click(function() {
			jQuery(".pf_loader-<?php echo $pf_gallery_id; ?>").hide();
			jQuery(".pf_load_more-<?php echo $pf_gallery_id; ?>").show();
			jQuery(".pf_no_more-<?php echo $pf_gallery_id; ?>").hide();
		});
	<?php } ?>
	
	jQuery(document).ready(function() {
    // ajax call get data from server and append to the div
	//Click On Load More
		jQuery('.pf_load_more-<?php echo $pf_gallery_id; ?>').click(function(e) {
			jQuery(".pf_load_more-<?php echo $pf_gallery_id; ?>").hide();
			jQuery(".pf_loader-<?php echo $pf_gallery_id; ?>").show();
			
			e.preventDefault();
			var filter_image_len = 0;
			var numItems = 0;
			//var targetFilter = jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> li.filter-active').data('multifilter');
			<?php if ( $multi_filters == 1 ) { ?>
			var targetFilter = jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> li.filter-active').map(function(){return jQuery(this).data('multifilter');}).get();
			<?php } else { ?>
			var targetFilter = jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> li.active').map(function(){return jQuery(this).data('filter');}).get();
			<?php } ?>
			if(targetFilter[0] == 'all') { targetFilter = 'all'; }
			
			// Load Images acording to filter (Not ALL)
			if(targetFilter != 'all') {
				var filter_image = <?php echo json_encode($filter_image); ?>;
				jQuery(targetFilter).each(function( index, val ) {
				   filter_image_len = filter_image_len + filter_image[val].length;
				   //Check the lenth of according to filter for all
				  // var filtered_img_lenth = jQuery('.'+val).length;
					//if(filtered_img_lenth == 0) { numItems = 0 } else { numItems = jQuery('.'+val).length + jQuery('.'+val).length; }
					 numItems = numItems + jQuery('.'+val).length; 
				});
				//filter_image_len = filter_image[targetFilter].length;
			}
			// Load Images acording to filter (ALL)
			if(targetFilter == 'all') { 
				var pf_total_images_for_all = parseInt(<?php echo $pf_total_images; ?>);
				filter_image_len = pf_total_images_for_all;
				numItems = numItems + jQuery('.all-<?php echo $pf_gallery_id; ?>').length; 
			} 
			
			var pf_limit_start = numItems;
			var pf_limit_end = parseInt(pf_limit_start) + parseInt(<?php echo $pf_limit; ?>);
			
			var filter_image_lens = jQuery('.count_attached-<?php echo $pf_gallery_id; ?>').map(function(){return jQuery(this).val();}).get();
			
			// Check images limit
			if(filter_image_len > numItems) {
				jQuery.ajax({
					dataType : 'html',
					type: 'POST',
					url : location.href,
					cache: false,
					data : '&pf_security=' + '<?php echo wp_create_nonce( "pf_load_more_nonce" ); ?>' + '&pf_limit_start=' + pf_limit_start + '&pf_limit_end=' + pf_limit_end + '&targetFilter=' + targetFilter + '&numItems=' + numItems + '&filter_image_lens=' + filter_image_lens,
					complete : function() {},
					success: function(response) {
						options = {
							/*animationDuration: 0.5,*/
							callbacks: {
								onFilteringStart: function() { },
								onFilteringEnd: function() { },
								onShufflingStart: function() { },
								onShufflingEnd: function() { },
								onSortingStart: function() { },
								onSortingEnd: function() { }
							},
							controlsSelector: '.filtr-controls-<?php echo $pf_gallery_id; ?>',
							filter: targetFilter,
							filterOutCss: {
							  top:'0px',
								left:'0px',
								opacity: 0.001,
								transform: ''
							  },
							  filterInCss: {
								  top:'0px',
								left:'0px',
								opacity: 1,
								transform: ''
							  },
							layout: 'sameWidth',
							selector: '.filtr-item',
							setupControls: false
						}
						var filterizd = jQuery('.filter_gallery_<?php echo $pf_gallery_id; ?>').filterizr(options);
						$node = jQuery(response).find('.pf_result-<?php echo $pf_gallery_id; ?>');
						filterizd.filterizr('insertItem', $node).addClass('animate');
						
						filterizd.filterizr(options).resize();
						
						jQuery('.filtr-item .img-box').addClass('lazyimg');
						// remove blank divs on load
						jQuery(".count_attached-<?php echo $pf_gallery_id; ?>").each(function() {
							if( !jQuery(this).val() ) { // check image has src 
							  jQuery(this).parents("div.pf_result-<?php echo $pf_gallery_id; ?>").remove();
							}
						});
						
						setTimeout(function(){
						jQuery(".pf_loader-<?php echo $pf_gallery_id; ?>").hide();
						jQuery(".pf_load_more-<?php echo $pf_gallery_id; ?>").show();
						}, 800);
						
						
						/*setTimeout(function(){
						jQuery("#filter_gallery_1158").resize();
						}, 1000);*/
						jQuery('.filtr-container').imagesLoaded( function() {
						  // images have already loaded, instantiate Filterizr
						  jQuery('.filter_gallery_<?php echo $pf_gallery_id; ?>').filterizr(options);
						});
						/*== Video player ==*/
						jQuery(function(){
						 jQuery("a.bla-2-<?php echo $pf_gallery_id; ?>").YouTubePopUp( { autoplay: <?php echo $video_auto_play; ?> } );
						});
					},
				});
			} else {
				jQuery(".pf_loader-<?php echo $pf_gallery_id; ?>").hide();
				jQuery(".pf_load_more-<?php echo $pf_gallery_id; ?>").hide();
				jQuery(".pf_no_more-<?php echo $pf_gallery_id; ?>").show();
			}
		});
	}); <?php
} ?>

// get filter from the shortcode
<?php

if(isset($_GET['filter'])) {
	if($array_key) {
		if ( $multi_filters == 1 ) { ?>
			jQuery( ".filter-<?php echo $array_key; ?>" ).addClass( "filter-active" );
			jQuery( "#filter-all" ).removeClass( "filter-active" );
			<?php
		} else { ?>
			jQuery( "#<?php echo $array_key; ?>" ).addClass( "active" );
			jQuery( "#all" ).removeClass( "active" );
			jQuery('.fil-head').text('<?php echo $_GET['filter']; ?>');
			<?php 
		} ?>
		<?php
	}
} else if($selected_filter) {
	if($array_key) {
		if ( $multi_filters == 1 ) { ?>
			jQuery( ".filter-<?php echo $array_key; ?>" ).addClass( "filter-active" );
			jQuery( "#filter-all" ).removeClass( "filter-active" );
			<?php
		} else { ?>
			jQuery( "#<?php echo $array_key; ?>" ).addClass( "active" );
			jQuery( "#all" ).removeClass( "active" );
		<?php 
		}
	}
}
?>
jQuery(document).ready(function() {
	// Animate loader off screen
	jQuery(".loader_img").hide();
	jQuery(".lg_load_more").show();
	jQuery(".filtr-container").css("opacity", 1);
	jQuery('.filtr-item .img-box').addClass('lazyimg');
	//Filterizd Default options
	options = {
		animationDuration: 0.5,
		callbacks: {
			onFilteringStart: function() { },
			onFilteringEnd: function() { },
			onShufflingStart: function() { },
			onShufflingEnd: function() { },
			onSortingStart: function() { },
			onSortingEnd: function() { }
		},
		controlsSelector: '.filtr-controls-<?php echo $pf_gallery_id; ?>',
		filter: '<?php echo $array_key; ?>',
		 filterOutCss: {
		  top:'0px',
			left:'0px',
			opacity: 0.001,
			transform: ''
		  },
		  filterInCss: {
			  top:'0px',
			left:'0px',
			opacity: 1,
			transform: ''
		  },
		selector: '.filtr-item',
		layout: 'sameWidth',
		<?php 
		if ( $multi_filters == 1 ) { 
			if ( $multi_filters_logic == "and" ) { ?>
				multifilterLogicalOperator: 'and',
				<?php 
			}
		} ?>
		setupControls: false,
	}
	var filterizd = jQuery('.filter_gallery_<?php echo $pf_gallery_id; ?>').filterizr(options);
	
	if(jQuery('.portfolio_wrapper').length > 1) {
	   <?php 
		if ( $sort_by_title == "asc" ) { ?>
			// Sort by title
			filterizd.filterizr('sort', 'sortData', 'asc');
			<?php
		} if ( $sort_by_title == "desc" ) { ?>
			// Sort by decending order
			filterizd.filterizr('sort', 'sortData', 'desc');
		<?php
		}  ?>
	} else {
		jQuery('.filter_gallery_<?php echo $pf_gallery_id; ?>').imagesLoaded( function() {
			// images have already loaded, instantiate Filterizr
			jQuery('.filter_gallery_<?php echo $pf_gallery_id; ?>').filterizr(options);
			<?php 
			if ( $sort_by_title == "asc" ) { ?>
				// Sort by title
				filterizd.filterizr('sort', 'sortData', 'asc');
				<?php
			} if ( $sort_by_title == "desc" ) { ?>
				// Sort by decending order
				filterizd.filterizr('sort', 'sortData', 'desc');
				<?php
			}  ?>
		}); 
	}
	<?php 
	if ( $multi_filters == 1 ) { ?>
		jQuery("#filter-all").click(function() {  
			options = {
				animationDuration: 0.5,
				callbacks: {
					onFilteringStart: function() { },
					onFilteringEnd: function() { },
					onShufflingStart: function() { },
					onShufflingEnd: function() { },
					onSortingStart: function() { },
					onSortingEnd: function() { }
				},
				controlsSelector: '.filtr-controls-<?php echo $pf_gallery_id; ?>',
				filter: 'all',
				 filterOutCss: {
				  top:'0px',
					left:'0px',
					opacity: 0.001,
					transform: ''
				  },
				  filterInCss: {
					  top:'0px',
					left:'0px',
					opacity: 1,
					transform: ''
				  },
				layout: 'sameWidth',
				 setupControls: false,
				
				<?php 
				if ( $multi_filters == 1 ) { 
					if ( $multi_filters_logic == "and" ) { ?>
						multifilterLogicalOperator: 'and',
						<?php 
					}
				} ?>
				selector: '.filtr-item',
			}
			var filterizd = jQuery('.filter_gallery_<?php echo $pf_gallery_id; ?>').filterizr(options);
			filterizd.filterizr('destroy');
			filterizd.filterizr(options).resize();
			jQuery('.filter-active').removeClass('filter-active');
			jQuery('#filter-all').addClass('filter-active');
		});
	<?php 
	} 
	if ( $hide_filters == 0 ) {
		if ( $sort_filter_order == 1 ) { ?>
			/* Sort li to alphabetically: */
			jQuery(function(){
			  var list, i, switching, b, shouldSwitch;
			  list = document.getElementById("f-simplefilter-<?php echo $pf_gallery_id; ?>");
			  switching = true;
			  /* Make a loop that will continue until
			  no switching has been done: */
			  while (switching) {
				// start by saying: no switching is done:
				switching = false;
				b = list.getElementsByTagName("LI");
				// Loop through all list-items:
				for (i = 0; i < (b.length - 1); i++) {
				  // start by saying there should be no switching:
				  shouldSwitch = false;
				  /* check if the next item should
				  switch place with the current item: */
				  if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
					/* if next item is alphabetically
					lower than current item, mark as a switch
					and break the loop: */
					shouldSwitch = true;
					break;
				  }
				}
				if (shouldSwitch) {
				  /* If a switch has been marked, make the switch
				  and mark the switch as done: */
				  b[i].parentNode.prepend( b[i + 1], b[i] );
				  b[i].style.marginRight = "4px";
				  switching = true;
				}
			  }
			});
		/* Sort li to alphabetically: */
		<?php 
		} 
	} ?>
	//***************** Video Plyer *********************//
	jQuery(function(){
      jQuery("a.bla-2-<?php echo $pf_gallery_id; ?>").YouTubePopUp( { autoplay: <?php echo $video_auto_play; ?> } ); // autoplay
	});
	<?php
	if (wp_script_is( 'awl-ld-lightbox-js' ) or wp_script_is( 'awl-bootstrap-lightbox-js' )) { ?>
		//***************** LD & Bootstrap Lightbox *********************//
		
		// delegate calls to data-toggle="lightbox"
		jQuery(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
			event.preventDefault();
			return jQuery(this).ekkoLightbox({
				onShown: function() {
					/* if (window.console) {
						return console.log('Checking our the events huh?');
					} */
				},
				onNavigate: function(direction, itemIndex) {
					if (window.console) {
						return console.log('Navigating '+direction+'. Current item: '+itemIndex);
					}
				}
			});
		});

		// navigateTo
		jQuery(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
			event.preventDefault();

			var lb;
			return jQuery(this).ekkoLightbox({
				onShown: function() {
					lb = this;
					jQuery(lb.modal_content).on('click', '.modal-footer a', function(e) {
						e.preventDefault();
						lb.navigateTo(2);
					});
				}
			});
		});
		
		jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> [data-filter]').click(function() {
			//jQuery('.swiper-<?php echo $pf_gallery_id; ?>').swipebox('swipebox-destroy');
			var targetFilter = jQuery(this).data('filter');
			var lighbox_class_name = "pfg-lightbox-" + targetFilter;
			jQuery('.pfg-lightbox-' + targetFilter ).attr('data-lightbox', lighbox_class_name); // add data filter for parent filters
			
		});
		
		<?php
	} 
	if (wp_script_is( 'awl-pfg-swipebox-js' )) {
		if(isset($_GET['filter'])) { ?>
			var targetFilter = jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> li.active').data('filter');
			var lighbox_class_name = "pfg-lightbox-" + targetFilter;
			jQuery('.pfg-lightbox-' + targetFilter ).attr('rel', lighbox_class_name); // add data filter for parent filters
			jQuery('.swiper-<?php echo $pf_gallery_id; ?>').swipebox('.swiper-<?php echo $pf_gallery_id; ?>');
			<?php 
		} else { ?>
			//***************** Swipebox *********************//
			jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> [data-filter]').click(function() {
				jQuery('.swiper-<?php echo $pf_gallery_id; ?>').swipebox('swipebox-destroy');
				var targetFilter = jQuery(this).data('filter');
				var lighbox_class_name = "pfg-lightbox-" + targetFilter;
				jQuery('.pfg-lightbox-' + targetFilter ).attr('rel', lighbox_class_name); // add data filter for parent filters
				jQuery('.swiper-<?php echo $pf_gallery_id; ?>').swipebox('.swiper-<?php echo $pf_gallery_id; ?>');
				// END Swipebox
			});
			
			//swiper on page load
			jQuery('.swiper-<?php echo $pf_gallery_id; ?>').swipebox('.swiper-<?php echo $pf_gallery_id; ?>');
			<?php 
		}
	} ?>
	<?php
	if (wp_script_is( 'awl-ig-viewer-js' )) { 
		?>
		
		
		// You should import the CSS file.
		// import 'viewerjs/dist/viewer.css';
		//import Viewer from 'viewerjs';

		

		// View a list of images
		const gallery = new Viewer(document.getElementById('filter_gallery_viewer'));
		// Then, show one image by click it, or call `gallery.show()`.
		
		<?php 
	} ?>
	// toggle active class with li
	jQuery(function() {
		//Simple filter controls
		jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> li').click(function() {
			jQuery('.filtr-control-<?php echo $pf_gallery_id; ?> li').removeClass('active');
			jQuery(this).addClass('active');
		});
		//Multifilter controls
		jQuery('.multifilter li').click(function() {
			jQuery(this).toggleClass('active');
		});
		//Shuffle control
		jQuery('.shuffle-btn').click(function() {
			jQuery('.sort-btn').removeClass('active');
		});
		//Sort controls
		jQuery('.sort-btn').click(function() {
			jQuery('.sort-btn').removeClass('active');
			jQuery(this).addClass('active');
		});
	});<?php 
	if ( $multi_filters == 1 ) { ?>
		// toggle Class for multifilter
		jQuery('ul.simplefilter li').click(function() {
			jQuery(this).toggleClass('filter-active');
			if(jQuery('.simplefilter li').hasClass('filter-active')) {
				jQuery('#filter-all').removeClass('filter-active'); 
			} else {
				jQuery('#filter-all').addClass('filter-active'); 
			}
			
		}); <?php 
	} ?>
});
</script>