(function() {
	
	var that = this;
	this.viewerFrameSelector = '[data-type="dynamicViewerIframe"]';
	this.dynamicIframeSelector = '[data-type="dynamicIframe"]';

	this.createIframe = function(currentFrame) {
		var a = currentFrame;			
		var frameWidth = a.getAttribute("data-width");
		var frameHeight = a.getAttribute("data-height"); 
		var frameClasses = a.getAttribute("class");
		var frameStyle = a.getAttribute("style");
		var currentFrame = a.getAttribute("data-src");			

		var h = document.createElement("iframe");
		h.setAttribute("src",currentFrame);
		h.setAttribute("width",frameWidth);
		h.setAttribute("height",frameHeight);
		h.setAttribute("allowfullscreen","true");
		h.setAttribute("webkitallowfullscreen","true");
		h.setAttribute("mozallowfullscreen","true");
		h.setAttribute("oallowfullscreen","true");
		h.setAttribute("msallowfullscreen","true");
		h.setAttribute("frameborder","0");
		h.setAttribute("scrolling","no");
		h.setAttribute("marginheight","0");
		h.setAttribute("marginwidth","0");
		h.setAttribute("class",frameClasses);
		h.setAttribute("style",frameStyle);
		h.setAttribute("style.opacity","0");
		h.setAttribute("loading","lazy");

		h._referrer= a;
		h.addEventListener("load", function(a) { 
			var b = a.target;
			b._referrer.replaceWith(b);
		});
		document.body.appendChild(h);
		a.removeAttribute("data-type");
	}

	this.loadPaneekIframe = function() {
		if(!window.MutationObserver) {
			console.log('You can not use the lazy loading iframe, mutatorObserver is not supported');
			return;
		}
		/**This is for the elements that already are on the dom*/
		this.addStyle();
		this.attachEvent();
		/***for future element inserted */
		this.setupMutationObserver();		
	}

	this.addStyle = function(currentFrame) {
		var iframes = [];

		if(currentFrame) {
			iframes.push(currentFrame);
		} else {
			var iframes = document.querySelectorAll(this.viewerFrameSelector);
		}

		for(var x = 0; x < iframes.length;x++) {
			var currentFrame = iframes[x];
			currentFrame.style.width = currentFrame.getAttribute("data-width");
			currentFrame.style.height = currentFrame.getAttribute("data-height");			
			var frameCurrentStyle = currentFrame.getAttribute("style");
			currentFrame.setAttribute("style", frameCurrentStyle + "background-color:black;vertical-align:top;position:relative;" + 
			"display:inline-flex;align-items:center;justify-content:center;color:white;"
			);

			if(currentFrame.firstElementChild) {
				currentFrame.firstElementChild.setAttribute("style","border:1px solid gray;border-radius:3px;padding:5px;cursor:pointer");
			}	

			currentFrame.setAttribute("data-type","dynamicIframe");
		}
	};

	this.attachEvent = function(currentFrame) {

		if(typeof currentFrame === 'string') {
			return;
		}

		var iframes = [];		

		if(currentFrame) {
			iframes.push(currentFrame);
		} else {
			iframes = document.querySelectorAll(this.dynamicIframeSelector);
		}

		for(var x = 0; x < iframes.length;x++) {
			var currentFrame = iframes[x];
			
			currentFrame.addEventListener("click",function(e) {
				if(e.target.nodeName == 'SPAN') {
					
					if(e.currentTarget.getAttribute('data-type') == "dynamicIframe") {
						//e.target.replaceWith(that.getLoadingElement());
						that.createIframe(e.currentTarget);
					}
				}
			});
		}
	};

	// this.getLoadingElement = function() {
	// 	var loading = document.createElement("img");
	// 	loading.setAttribute("src","https://s3-us-west-2.amazonaws.com/saulbpano/resources/loadingFrameEmbed2.gif");
	// 	loading.setAttribute("width",'34');
	// 	loading.setAttribute("height",'20');
	// 	return loading;
	// };

	this.setupMutationObserver = function() {

		var observer = new MutationObserver(function(mutations) {
			// For the sake of...observation...let's output the mutation to console to see how this all works
			mutations.forEach(function(mutation) {				

				mutation.addedNodes.forEach(function(currentNode) {

					if(currentNode instanceof HTMLElement) {
						var frames = currentNode.querySelectorAll(that.viewerFrameSelector);

						if(frames.length > 0 ) {							
							that.setupIntersectionObserver(frames);
						}
					}
					
				});
			});    
		});
		 
		// Notify me of everything!
		var observerConfig = {
			attributes: false, 
			childList: true, 
			characterData: false,
			subtree: true 
		};		 
		
		observer.observe(document.body, observerConfig);
		console.log('mutation setup');
	};

	this.setupIntersectionObserver = function(viewerFrames) {		

		//var viewerFrames = document.querySelectorAll(this.viewerFrameSelector);
		var config = {
			root: null, // avoiding 'root' or setting it to 'null' sets it to default value: viewport
			rootMargin: '0px',
			threshold: 0
		};		

		var observer = new IntersectionObserver(function (entries, self) {
			
			entries.forEach(function(entry) {

				if (entry.isIntersecting) {					
					self.unobserve(entry.target);
					that.addStyle(entry.target);
					that.attachEvent(entry.target);
					
				}

			});
			
		}, config);

		viewerFrames.forEach(function(element) {
			observer.observe(element);			
		});
	}

	window.addEventListener?window.addEventListener("load",this.loadPaneekIframe,!1):window.attachEvent?window.attachEvent("onload",this.loadPaneekIframe):window.onload=this.loadPaneekIframe;

}());

/* <div class="saul guideLine--red" 		
	data-type="dynamicViewerIframe" 
	data-src="https://www.paneek.net/"  
	data-width="250px" 
	data-height="300px">
	<span>Enter tour</span>
</div> */

/* <script src="components/js/nonBlockingIframe.js"></script> */

//http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance?%3E