/*
 * Responsively Lazy
 * http://ivopetkov.com/b/lazy-load-responsive-images/
 * Copyright 2015-2016, Ivo Petkov
 * Free to use under the MIT license.
 */
var enviraLazy = (function() {
	var hasWebPSupport = false,
		windowWidth = null,
		windowHeight = null,
		justifiedReady = false,
		galleryClass = false,
		hasIntersectionObserverSupport =
			typeof IntersectionObserver !== 'undefined';

	var isVisible = function(element) {
		if (windowWidth === null) {
			windowWidth =
				window.innerWidth ||
				document.documentElement.clientWidth ||
				document.body.clientWidth;
			windowHeight =
				window.innerHeight ||
				document.documentElement.clientHeight ||
				document.body.clientHeight;

			if (windowWidth === null) {
				return false;
			}
		}

		var rect = element.getBoundingClientRect();

		var elementTop = rect.top;
		var elementLeft = rect.left;
		var elementWidth = rect.width;
		var elementHeight = rect.height;
		var test =
			elementTop < windowHeight &&
			elementTop + elementHeight > 0 &&
			elementLeft < windowWidth &&
			elementLeft + elementWidth > 0;

		if (test === false) {
		}
		return test;
	};

	jQuery.fn.exists = function() {
		return this.length > 0;
	};

	var updateElement = function(container, element) {
		var options = element.getAttribute('data-envira-srcset');
		if (options !== null) {
			options = options.trim();
			if (options.length > 0) {
				options = options.split(',');
				var temp = [];
				var optionsCount = options.length;
				for (var j = 0; j < optionsCount; j++) {
					var option = options[j].trim();
					if (option.length === 0) {
						continue;
					}
					var spaceIndex = option.lastIndexOf(' ');
					if (spaceIndex === -1) {
						var optionImage = option;
						var optionWidth = 999998;
					} else {
						var optionImage = option.substr(0, spaceIndex);
						var optionWidth = parseInt(
							option.substr(
								spaceIndex + 1,
								option.length - spaceIndex - 2,
							),
							10,
						);
					}
					var add = false;
					if (
						optionImage.indexOf(
							'.webp',
							optionImage.length - 5,
						) !== -1
					) {
						if (hasWebPSupport) {
							add = true;
						}
					} else {
						add = true;
					}
					if (add) {
						temp.push([optionImage, optionWidth]);
					}
				}
				temp.sort(function(a, b) {
					if (a[1] < b[1]) {
						return -1;
					}
					if (a[1] > b[1]) {
						return 1;
					}
					if (a[1] === b[1]) {
						if (
							b[0].indexOf('.webp', b[0].length - 5) !== -1
						) {
							return 1;
						}
						if (
							a[0].indexOf('.webp', a[0].length - 5) !== -1
						) {
							return -1;
						}
					}
					return 0;
				});
				options = temp;
			} else {
				options = [];
			}
		} else {
			options = [];
		}

		var containerWidth = container.offsetWidth * window.devicePixelRatio;

		var bestSelectedOption = null;
		var optionsCount = options.length;
		for (var j = 0; j < optionsCount; j++) {
			var optionData = options[j];
			if (optionData[1] >= containerWidth) {
				bestSelectedOption = optionData;
				break;
			} else {
			}
		}

		if (bestSelectedOption === null) {
			bestSelectedOption = [
				element.getAttribute('data-envira-src'),
				999999,
			];
		}

		if (typeof container.lastSetOption === 'undefined') {
			container.lastSetOption = ['', 0];
		}
		if (container.lastSetOption[1] < bestSelectedOption[1]) {
			var fireEvent = container.lastSetOption[1] === 0;
			var url = bestSelectedOption[0];
			var image = new Image();
			image.addEventListener(
				'load',
				function() {
					element.setAttribute('srcset', url);
					element.setAttribute('src', url);
					if (fireEvent) {
						var handler = container.getAttribute(
							'data-onlazyload',
						);
						if (handler !== null) {
							new Function(handler).bind(container)();
						}
					}
				},
				false,
			);
			image.addEventListener(
				'error',
				function() {
					container.lastSetOption = ['', 0];
				},
				false,
			);

			image.onload = function() {
				if (
					container.getAttribute('class') === 'envira-lazy' &&
					$(container).not('img')
				) {
					// this is a legacy layout
					var the_image = container.firstElementChild;
					var the_container = container;
					var image_id = the_image.id;
					var image_src = the_image.src;
					var gallery_id = jQuery(the_image).data(
						'envira-gallery-id',
					);
					var item_id = jQuery(container).data('envira-item-id');
					var naturalWidth = this.naturalWidth;
					var naturalHeight = this.naturalHeight;
				} else {
					// we are going with the automatic
					var the_image = image;
					var the_container = container;
					var image_id = container.id;
					var image_src = container.src;
					var gallery_id = jQuery(container).data(
						'envira-gallery-id',
					);
					var item_id = jQuery(container).data('envira-item-id');
					var naturalWidth = this.naturalWidth;
					var naturalHeight = this.naturalHeight;
				}

				/* type check */

				if (gallery_id === undefined || gallery_id === null) {
					gallery_id = 0;
				}

				jQuery(document).trigger({
					type: 'envira_image_lazy_load_complete',
					container: the_container,
					image_src: image_src,
					image_id: image_id,
					item_id: item_id,
					gallery_id: gallery_id,
					naturalWidth: naturalWidth,
					naturalHeight: naturalHeight,
				});
			};
			image.onerror = function() {
				console.error('Cannot load image');
				// do something else...
			};

			// Null assignment could have been for IE, but shows as 404 in Safari web console (although everything else is fine).
			// This should be confirmed to be working, then removed (Chrome/Firefox testing looks ok)
			// image.src = null;
			image.src = url;

			container.lastSetOption = bestSelectedOption;
		}
	};

	var updateWindowSize = function() {
		windowWidth =
			window.innerWidth ||
			document.documentElement.clientWidth ||
			document.body.clientWidth;
		windowHeight =
			window.innerHeight ||
			document.documentElement.clientHeight ||
			document.body.clientHeight;
	};

	var setGalleryClass = function(theClass) {
		galleryClass = theClass;
		alert('setting - ' + galleryClass);
	};

	var run = function(galleryClass) {

		if (typeof galleryClass === 'undefined') {
			return;
		}

		var update = function(elements, unknownHeight) {
			var elementsCount = elements.length;
			for (var i = 0; i < elementsCount; i++) {
				var element = elements[i];
				var container = unknownHeight
					? element
					: element.parentNode;
				if (isVisible(container) === true) {
					updateElement(container, element);
				}
			}
		};
		if (galleryClass) {
			if (typeof galleryClass !== 'string') {
				return;
			}

			if (false === (envira_gallery?.ll_initial ?? false) || false === (envira_gallery?.ll_delay ?? false)) {
				/* if we can't locate these vars, at least define the delay - there is no delay, super fast */
				envira_gallery.ll_delay = 0;
			}

			setTimeout(function() {
				if (
					jQuery(
						galleryClass + ' div.envira-lazy > img',
					).exists() // todo exists as jQuery function ?
				) {
					// alert('1');
					update(
						document.querySelectorAll(
							galleryClass + ' div.envira-lazy > img',
						),
						false,
					);
				} else if (
					jQuery(galleryClass + ' img.envira-lazy').exists()
				) {
					// alert('2');
					update(
						document.querySelectorAll(
							galleryClass + ' img.envira-lazy',
						),
						true,
					);
				}

				envira_gallery.ll_initial = true; // ok, we did the initial load so now delay can happen
			}, envira_gallery.ll_delay);
		}
		// update(document.querySelectorAll('img.envira-lazy'), true);
	};

	if (
		'srcset' in document.createElement('img') &&
		typeof window.devicePixelRatio !== 'undefined' &&
		typeof window.addEventListener !== 'undefined' &&
		typeof document.querySelectorAll !== 'undefined'
	) {
		updateWindowSize();

		var image = new Image();
		image.src =
			'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEADMDOJaQAA3AA/uuuAAA=';
		image.onload = image.onerror = function() {
			hasWebPSupport = image.width === 2;
			if (hasIntersectionObserverSupport) {
				var updateIntersectionObservers = function() {
					var elements = document.querySelectorAll(
						'.envira-lazy',
					);
					var elementsCount = elements.length;
					for (var i = 0; i < elementsCount; i++) {
						var element = elements[i];
						if (
							typeof element.responsivelyLazyObserverAttached ===
							'undefined'
						) {
							element.responsivelyLazyObserverAttached = true;
							intersectionObserver.observe(element);
						}
					}
				};

				var intersectionObserver = new IntersectionObserver(
					function(entries) {
						for (var i in entries) {
							var entry = entries[i];
							if (entry.intersectionRatio > 0) {
								var target = entry.target;
								if (
									target.tagName.toLowerCase() !==
									'img'
								) {
									var img = target.querySelector(
										'img',
									);
									if (img !== null) {
										updateElement(target, img);
									}
								} else {
									updateElement(target, target);
								}
							}
						}
					},
				);

				run();
			} else {
				var requestAnimationFrameFunction =
					window.requestAnimationFrame ||
					window.webkitRequestAnimationFrame ||
					window.mozRequestAnimationFrame ||
					function(callback) {
						window.setTimeout(callback, 1000 / 60);
					};

				var hasChange = true;
				var runIfHasChange = function() {
					if (hasChange) {
						hasChange = false;
						// run();
					}
					requestAnimationFrameFunction.call(
						null,
						runIfHasChange,
					);
				};

				var setChanged = function() {
					hasChange = true;
					runIfHasChange();
				};

				var updateParentNodesScrollListeners = function() {
					var elements = document.querySelectorAll(
						'.envira-lazy',
					);
					var elementsCount = elements.length;
					for (var i = 0; i < elementsCount; i++) {
						var parentNode = elements[i].parentNode;
						while (
							parentNode &&
							parentNode.tagName.toLowerCase() !== 'html'
						) {
							if (
								typeof parentNode.responsivelyLazyScrollAttached ===
								'undefined'
							) {
								parentNode.responsivelyLazyScrollAttached = true;
								parentNode.addEventListener(
									'scroll',
									setChanged,
								);
							}
							parentNode = parentNode.parentNode;
						}
					}
				};

				// runIfHasChange();
			}

			var attachEvents = function() {
				if (hasIntersectionObserverSupport) {
					var resizeTimeout = null;
				}
				window.addEventListener('resize', function() {
					updateWindowSize();
					if (hasIntersectionObserverSupport) {
						window.clearTimeout(resizeTimeout);
						resizeTimeout = window.setTimeout(function() {
							run();
						}, 300);
					} else {
						setChanged();
					}
				});
				if (hasIntersectionObserverSupport) {
					window.addEventListener('load', run);
					updateIntersectionObservers();
				} else {
					window.addEventListener('scroll', setChanged);
					window.addEventListener('load', setChanged);
					updateParentNodesScrollListeners();
				}
				if (typeof MutationObserver !== 'undefined') {
					var observer = new MutationObserver(function() {
						if (hasIntersectionObserverSupport) {
							updateIntersectionObservers();
							run();
						} else {
							updateParentNodesScrollListeners();
							setChanged();
						}
					});
					observer.observe(document.querySelector('body'), {
						childList: true,
						subtree: true,
					});
				}
			};

			if (document.readyState === 'loading') {
				document.addEventListener('DOMContentLoaded', attachEvents);
			} else {
				attachEvents();
			}
		};
	}

	return {
		run: run,
		isVisible: isVisible,
		setGalleryClass: setGalleryClass,
	};
})();
window.enviraLazy = enviraLazy;

module.exports = enviraLazy;