(function ($) {
	"use strict";
	var WidgetImageScroll = function ($scope, $) {
		var container = $scope[0].querySelectorAll('.ec-image-scroll-wrapper'),
			imagescroll = (container[0].dataset) ? JSON.parse(container[0].dataset.imagescroll) : [],
			imgurl = (imagescroll && imagescroll.imgurl) ? imagescroll.imgurl : '',
			imgstring = (imagescroll && imagescroll.imgstring) ? imagescroll.imgstring : '',
			imgtype = (imagescroll && imagescroll.imgtype) ? imagescroll.imgtype : 'jpg',
			imgprefix = (imagescroll && imagescroll.imgprefix) ? imagescroll.imgprefix : '',
			effecton = (imagescroll && imagescroll.effecton) ? imagescroll.effecton : '',
			id = (imagescroll && imagescroll.id) ? imagescroll.id : '';
			
		if(effecton != null && effecton != undefined && effecton=='body'){
			var getWrapper = document.body.querySelector('.elementor > .elementor-section,.elementor > .elementor-element.e-con');
			getWrapper.insertAdjacentHTML("afterbegin", `<canvas style="position:fixed;left:0;top:0;width:100%" class="ec-image-scroll-canvas" id="ec-image-scroll${id}"/>`);
		}else{
			var getWrapper = $scope[0].closest('.elementor > .elementor-section,.elementor > .elementor-element.e-con');
			getWrapper.insertAdjacentHTML("afterbegin", `<canvas style="position:sticky;left:0;top:0;width:100%" class="ec-image-scroll-canvas" id="ec-image-scroll${id}"/>`);
		}
		
		
		
			
		function onplayscrollimage(){                    
			window.requestAnimationFrame(onplayscrollimage);
		}
		
		window.requestAnimationFrame(onplayscrollimage);       
		
		const canvas = document.getElementById("ec-image-scroll"+id);
		const context = canvas.getContext("2d");
		
		const imagemax = (imagescroll && imagescroll.maximage) ? imagescroll.maximage : '1';
		
		const lodedimage = index => (
			`${imgurl}/${imgprefix}${index.toString().padStart(parseInt(`${imgstring}`), '0')}.${imgtype}`
		)
		const ec_image_scroll_func = () => {
			for (let i = 1; i < imagemax; i++) {
				const img = new Image();
				img.src = lodedimage(i);
			}
		};
		
		const img = new Image()
		img.src = lodedimage(1);
		canvas.width = screen.width;
		canvas.height = screen.height;
		img.width=screen.width;
		img.height=screen.height;

		img.onload = function(){
			context.drawImage(img, 0, 0, screen.width, screen.height);
		}
		const updateImage = index => {
			img.src = lodedimage(index);
			context.drawImage(img, 0, 0, screen.width, screen.height);
		}
		
		document.addEventListener('scroll', () => {
			const scrollTop = document.documentElement.scrollTop;			
			const maxScrollTop = document.documentElement.scrollHeight - window.innerHeight;
			const scrollFraction = scrollTop / maxScrollTop;
			const frameIndex = Math.min(
					imagemax - 1,
						Math.ceil(scrollFraction * imagemax)
					);
			requestAnimationFrame(() => updateImage(frameIndex + 1))
		});
		
		ec_image_scroll_func()
	};	
	$(window).on('elementor/frontend/init', function () {
		elementorFrontend.hooks.addAction('frontend/element_ready/ecafe-image-scroll.default', WidgetImageScroll);
	});
})(jQuery);