const style = document.createElement('style');
style.innerHTML = '.pv-embed {position:relative;min-width:200px;min-height:200px;border:1px solid #ddd;background:#fff url("https://pixelvoice.se/wwwdocs/img/loader.gif") no-repeat center center;} .pv-embed iframe {border:none;position:absolute;width:100%;height:100%;} .pv-embed.pv-emb-loaded {background:none;min-width:none;min-height:none;width:auto;height:auto;}';
document.head.appendChild(style);
var pvEmbedCounter = 0;
document.addEventListener("DOMContentLoaded", function () {
	const pvEmbeds = document.querySelectorAll('.pv-embed'); // Get all div elements with class "pv-embed"

	console.log('Adding Pixelvoice Embed Objects');

	const observerOptions = {
		root: null, // viewport is the root
		rootMargin: "0px",
		threshold: 0.5 // 50% of the div is visible
	};

	const addIframe = (entry) => {
		if (entry.isIntersecting) {
			const div = entry.target;

			// Check if iframe has already been added to avoid duplications
			if (!div.querySelector('iframe')) {
				++pvEmbedCounter;
				const iframe = document.createElement('iframe');
				iframe.src = 'https://pixelvoice.se/bildobjekt-viewer/'+div.dataset.id+'?embed&pvect='+pvEmbedCounter;
				iframe.width = div.dataset.width;
				iframe.height = div.dataset.height;
				iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
				iframe.allowfullscreen = "1";
				iframe.setAttribute('allowFullScreen', '')
				iframe.frameborder = "0";
				iframe.loading = "lazy";
				iframe.title = "An image from Pixelvoice";
				div.id = 'pvembed-'+pvEmbedCounter;
				div.style.paddingBottom = div.dataset.ar+"%"; // Set Aspect Ratio
				div.appendChild(iframe); // Append iframe to the div
			}

			observer.unobserve(div); // Stop observing once the iframe is added
		}
	};

	const observer = new IntersectionObserver((entries) => {
		entries.forEach(addIframe);
	}, observerOptions);

	// Start observing each .pv-embed div
	pvEmbeds.forEach((div) => {
		observer.observe(div);
	});
});