(function ($) {
	var WidgetElements_ACFSliderHandler = function ($scope, $) {
		let elementSettings = dceGetElementSettings($scope);
		let swiper_class = dceIsSwiperLatest() ? '.swiper' : '.swiper-container';
		let elementSwiper = $scope.find(swiper_class);
		let id_scope = $scope.attr('data-id');
		let id_post = $scope.closest('.elementor').attr('data-post-id');
		let interleaveOffset = -0.5;
		let interleaveEffect = {
					
			onProgress: function (swiper, progress) {

				for (var i = 0; i < swiper.slides.length; i++) {

					var slide = swiper.slides[i];
					var translate, innerTranslate;
					progress = slide.progress;

					if (progress > 0) {
						translate = progress * swiper.width;
						innerTranslate = translate * interleaveOffset;
					} else {
						innerTranslate = Math.abs(progress * swiper.width) * interleaveOffset;
						translate = 0;
					}

					$(slide).css({
						transform: 'translate3d(' + translate + 'px,0,0)',
					});

					$(slide).find('.slide-inner').css({
						transform: 'translate3d(' + innerTranslate + 'px,0,0)',
					});
				}
			},

			onTouchStart: function (swiper) {
				for (var i = 0; i < swiper.slides.length; i++) {
					$(swiper.slides[i]).css({transition: ''});
				}
			},

			onSetTransition: function (swiper, speed) {
				for (var i = 0; i < swiper.slides.length; i++) {
					$(swiper.slides[i])
						.find('.slide-inner')
						.andSelf()
						.css({transition: speed + 'ms'});
				}
			}
		};

		let swpEffect = elementSettings.effects || 'slide';
		let centeredSlides = Boolean(elementSettings.centeredSlides);

		var swiperOptions = {
			direction: 'horizontal',
			speed: Number(elementSettings.speedSlide) || 300,
			autoHeight: Boolean(elementSettings.autoHeight),
			roundLengths: Boolean(elementSettings.roundLengths),
			nested: Boolean(elementSettings.nested),
			grabCursor: Boolean(elementSettings.grabCursor),
			watchSlidesProgress: Boolean(elementSettings.watchSlidesProgress),
			watchSlidesVisibility: Boolean(elementSettings.watchSlidesVisibility),
			freeMode: Boolean(elementSettings.freeMode),
			freeModeMomentum: Boolean(elementSettings.freeModeMomentum),
			freeModeMomentumRatio: Number(elementSettings.freeModeMomentumRatio) || 1,
			freeModeMomentumVelocityRatio: Number(elementSettings.freeModeMomentumVelocityRatio) || 1,
			freeModeMomentumBounce: Boolean(elementSettings.freeModeMomentumBounce),
			freeModeSticky: Boolean(elementSettings.freeModeSticky),
			effect: swpEffect,
			fadeEffect: {
				crossFade: true
			},
			centerInsufficientSlides: true,
			watchOverflow: true,
			centeredSlides: centeredSlides,
			spaceBetween: Number(elementSettings.spaceBetween.size) || 0,
			slidesPerView: Number(elementSettings.slidesPerView) || 'auto',
			slidesPerGroup: Number(elementSettings.slidesPerGroup) || 1,
			keyboard: Boolean(elementSettings.keyboardControl),
			mousewheel: Boolean(elementSettings.mousewheelControl),
			pagination: {
				el: id_post ? '.dce-elementor-post-' + id_post + ' .elementor-element-' + id_scope + ' .pagination-' + id_scope : '.pagination-' + id_scope, //'.swiper-pagination', //'.pagination-acfslider-'+id_scope,
				clickable: true,
				type: String(elementSettings.pagination_type) || 'bullets',
				dynamicBullets: true,
				renderFraction: function (currentClass, totalClass) {
					return '<span class="' + currentClass + '"></span>' +
						'<span class="separator">' + String(elementSettings.fraction_separator) + '</span>' +
						'<span class="' + totalClass + '"></span>';
				},
			},
			// *********************************************************************************************
			// Navigation arrows
			spaceBetween: Number(elementSettings.slidesPerView) || 0,
			navigation: {
				nextEl: $scope.find('.swiper-button-next')[0],
				prevEl: $scope.find('.swiper-button-prev')[0],
			},
			// And if we need scrollbar
			scrollbar:{
				el:  '.swiper-scrollbar'
			},
		};
		if ( dceIsSwiperLatest() ) {
			swiperOptions = $.extend(swiperOptions, {
				grid: {
					rows: Number(elementSettings.slidesColumn),
					fill: 'row',
			  	}
			});
		} else {
			swiperOptions = $.extend(swiperOptions, {
                slidesPerColumn: Number(elementSettings.slidesColumn) || 1,
				slidesPerColumnFill: 'row',
            });
		}
		
		if( 1 == elementSettings.slidesColumn ) {
			swiperOptions = $.extend(swiperOptions, {
				loop: Boolean(elementSettings.loop)
			});
		}

		if (elementSettings.useAutoplay) {
			//default
			swiperOptions = $.extend(swiperOptions, {autoplay: true});
			var autoplayDelay = Number(elementSettings.autoplay) || 3000;
			swiperOptions = $.extend(swiperOptions, {autoplay: {delay: autoplayDelay, disableOnInteraction: Boolean(elementSettings.autoplayDisableOnInteraction), stopOnLastSlide: Boolean(elementSettings.autoplayStopOnLast)}});
		}

		// Responsive Params
		swiperOptions.breakpoints = dynamicooo.makeSwiperBreakpoints({
			slidesPerView: {
				elementor_key: 'slidesPerView',
				default_value: 'auto'
			},
			slidesPerGroup: {
				elementor_key: 'slidesPerGroup',
				default_value: 1
			},
			spaceBetween: {
				elementor_key: 'spaceBetween',
				default_value: 0,
			},
			slidesPerColumn: {
				elementor_key: 'slidesColumn',
				default_value: 1,
			}
		}, elementSettings);

		if (elementSettings.effects == 'custom1') {
			swiperOptions = $.extend(swiperOptions, interleaveEffect);
		}

		if ($scope.find('.swiper-slide').length > 1){
			const asyncSwiper = elementorFrontend.utils.swiper;

			new asyncSwiper( elementSwiper, swiperOptions ).then( ( newSwiperInstance ) => {
				dce_swiper = newSwiperInstance;
			} ).catch( error => console.log(error) );
		}

		var initPhotoSwipeFromDOM = function (gallerySelector) {
			// parse slide data (url, title, size ...) from DOM elements
			// (children of gallerySelector)
			var parseThumbnailElements = function (el) {
				var thumbElements = el.childNodes,
					numNodes = thumbElements.length,
					items = [],
					figureEl,
					linkEl,
					size,
					item;

				for (var i = 0; i < numNodes; i++) {
					figureEl = thumbElements[i]; // <figure> element

					// include only element nodes
					if (figureEl.nodeType !== 1) {
						continue;
					}

					linkEl = figureEl.children[0].getElementsByTagName('a')[0]; // <a> element

					size = linkEl.getAttribute('data-size').split('x');

					// create slide object
					item = {
						src: linkEl.getAttribute('href'),
						w: parseInt(size[0], 10),
						h: parseInt(size[1], 10)
					};

					if (figureEl.children.length > 1) {
						// <figcaption> content
						item.title = figureEl.children[1].innerHTML;
					}

					if (linkEl.children.length > 0) {
						// <img> thumbnail element, retrieving thumbnail url
						item.msrc = linkEl.children[0].getAttribute('src');
					}

					item.el = figureEl; // save link to element for getThumbBoundsFn
					items.push(item);
				}

				return items;
			};

			// find nearest parent element
			var closest = function closest(el, fn) {
				return el && (fn(el) ? el : closest(el.parentNode, fn));
			};

			// triggers when user clicks on thumbnail
			var onThumbnailsClick = function (e) {
				e = e || window.event;
				e.preventDefault ? e.preventDefault() : e.returnValue = false;

				var eTarget = e.target || e.srcElement;

				// find root element of slide
				var clickedListItem = closest(eTarget, function (el) {
					return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
				});

				if (!clickedListItem) {
					return;
				}

				// find index of clicked item by looping through all child nodes
				// alternatively, you may define index via data- attribute
				var clickedGallery = clickedListItem.parentNode,
					childNodes = clickedListItem.parentNode.childNodes,
					numChildNodes = childNodes.length,
					nodeIndex = 0,
					index;

				for (var i = 0; i < numChildNodes; i++) {
					if (childNodes[i].nodeType !== 1) {
						continue;
					}

					if (childNodes[i] === clickedListItem) {
						index = nodeIndex;
						break;
					}
					nodeIndex++;
				}

				if (index >= 0) {
					// open PhotoSwipe if valid index found
					openPhotoSwipe(index, clickedGallery);
				}
				return false;
			};

			// parse picture index and gallery index from URL (#&pid=1&gid=2)
			var photoswipeParseHash = function () {
				var hash = window.location.hash.substring(1),
					params = {};

				if (hash.length < 5) {
					return params;
				}

				var vars = hash.split('&');
				for (var i = 0; i < vars.length; i++) {
					if (!vars[i]) {
						continue;
					}
					var pair = vars[i].split('=');
					if (pair.length < 2) {
						continue;
					}
					params[pair[0]] = pair[1];
				}

				if (params.gid) {
					params.gid = parseInt(params.gid, 10);
				}

				return params;
			};

			var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
				var pswpElement = document.querySelectorAll('.pswp')[0],
					gallery,
					options,
					items;

				items = parseThumbnailElements(galleryElement);

				// define options (if needed)
				options = {

					// define gallery index (for URL)
					galleryUID: galleryElement.getAttribute('data-pswp-uid'),

					getThumbBoundsFn: function (index) {
						// See Options -> getThumbBoundsFn section of documentation for more info
						var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
							pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
							rect = thumbnail.getBoundingClientRect();

						return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
					}

				};

				// PhotoSwipe opened from URL
				if (fromURL) {
					if (options.galleryPIDs) {
						// parse real index when custom PIDs are used
						// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
						for (var j = 0; j < items.length; j++) {
							if (items[j].pid == index) {
								options.index = j;
								break;
							}
						}
					} else {
						// in URL indexes start from 1
						options.index = parseInt(index, 10) - 1;
					}
				} else {
					options.index = parseInt(index, 10);
				}

				// exit if index not found
				if (isNaN(options.index)) {
					return;
				}

				if (disableAnimation) {
					options.showAnimationDuration = 0;
				}

				// Pass data to PhotoSwipe and initialize it
				gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
				gallery.init();
			};

			// loop through all gallery elements and bind events
			var galleryElements = document.querySelectorAll(gallerySelector);

			for (var i = 0, l = galleryElements.length; i < l; i++) {
				galleryElements[i].setAttribute('data-pswp-uid', i + 1);
				galleryElements[i].onclick = onThumbnailsClick;
			}

			// Parse URL and open gallery if it contains #&pid=3&gid=1
			var hashData = photoswipeParseHash();
			if (hashData.pid && hashData.gid) {
				openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true);
			}
		};
		// execute above function
		if ($scope.find('.dynamic_acfslider.is-lightbox.photoswipe').length > 0) {
			if ($('body').find('.pswp').length < 1)
				photoSwipeContent();
			initPhotoSwipeFromDOM('.dynamic_acfslider.is-lightbox.photoswipe');
		}
	};

	
	$(window).on('elementor/frontend/init', function () {
		elementorFrontend.hooks.addAction('frontend/element_ready/dyncontel-acfslider.default', WidgetElements_ACFSliderHandler);
	});
	var photoSwipeContent = function () {
		$('body').append('<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button><button class="pswp__button pswp__button--share" title="Share"></button><button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button><button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div>');
	};
})(jQuery);
