var activeli = null
var lastevent = null

function clearhover(eleli) {
	if (eleli === null) return;

	eleli.dataset.hover = "false";		
	
	eleli.querySelectorAll(".location").forEach (loc => {loc.remove()})
	//let locay = eleli.querySelector(".location");	
	//if ( locay !== null ) {
	//	locay.remove();
	//}
	document.querySelectorAll(".mdl li iframe#hover").forEach (fr => {fr.remove()})


}

( function preview() {

	let div = document.querySelector(".mdl");

	window.loc = window.loc || 'From ';
	window.hideloc = window.hideloc || false;
	window.isMobile = window.isMobile || false;
	window.wide = window.wide || false;

	div.addEventListener("pointerenter", (e) => {
	lastevent = "pointerenter";  
		if (!(e.target.matches('li')) ) return;

		if (activeli !== null) {
			clearhover(activeli);
		}
		
		var thumbLi = e.target
		
		var img = thumbLi.querySelector("img.lazyloaded");
		if (img === null) return;

		const rect = img.getBoundingClientRect();
		const preciseWidth = rect.width - 6
		const preciseHeight = rect.height - 6;
		
		thumbLi.dataset.hover = "true";
		var loca = thumbLi.querySelector("a");
		activeli = thumbLi

		var updateThumb = function () {		
			
			if (thumbLi.dataset.hover === "false") return;	
			
			let mdl = thumbLi.dataset.mn.toLowerCase();
			
			let mdln = thumbLi.querySelector(".mdln");
			if(mdln) mdln.style.zIndex = '3';
			
		
			let fsrc = '/iframe-vivo.php?iname='+mdl;

			let iframe = document.createElement("iframe");

			iframe.src = fsrc;
			//iframe.width = "100%";
			iframe.width = preciseWidth;
			//iframe.height = "100%";
			iframe.height = preciseHeight;
			iframe.style.border = "3px solid transparent"; 			
			iframe.style.margin = "0"; 			
			iframe.style.padding = "0"; 			
			iframe.style.overflow = "hidden"; 			
			//iframe.style.position = "relative"; 			
			iframe.style.position = "absolute"; 			
			iframe.style.zIndex = '2';		
			iframe.id = "hover"; 	
			iframe.className = "code"; 	
			iframe.setAttribute("scrolling", "no");			

/*			
const link = img.closest("a") || img.parentElement;

requestAnimationFrame(() => {
  link.style.cursor = "wait";
});
iframe.style.pointerEvents = "none"; 			
iframe.addEventListener("load", () => {
  iframe.style.pointerEvents = "auto";
  link.style.cursor = "";
});	
*/
			//img.parentNode.insertBefore(iframe, img);		
			thumbLi.insertBefore(iframe, thumbLi.firstChild);		

			const murl = 'https://wmccd.com/api/model/status?performerId='+mdl+'&responseFormat=&psId=xxx6live&accessKey=aa144a3babb920c10270f19bb7f35bec&template=&legacyRedirect=1';
			fetch(murl, {
				})
				.catch(err => { })
				.then(response => response.text())
				.then(responsetxt => 
					{
					if (thumbLi.dataset.hover === "false") return;	
					if(responsetxt == 'offline' || responsetxt == 'private_chat'  || responsetxt == 'member_chat'  || responsetxt == 'free_chat') {
						
						const newDiv = document.createElement("div");
						newDiv.className="location";
						if (responsetxt == 'free_chat') {
							newDiv.innerHTML = 'Free chat';	
						}
						if (responsetxt == 'private_chat') { 
							newDiv.innerHTML = 'In Private';	
							newDiv.classList.add("orangedot");
						}
						if (responsetxt == 'member_chat') { 
							newDiv.innerHTML = 'Members-only chat';	
					        newDiv.classList.add("orangedot");							
						}						
						if (responsetxt == 'offline') { 
							newDiv.innerHTML = 'Offline';	
					        newDiv.classList.add("reddot");							
						}	
						
						const loca = thumbLi.querySelector("a");
						loca.appendChild(newDiv);
						
						}
					}
				)

			
		} // func
		
		updateThumb();
		//setTimeout(updateThumb, 100);

	}, true)

	div.addEventListener("pointerleave", (e) => {
	lastevent = "pointerleave";  
		if (!(e.target.matches('li')) ) { 
			return; 
		}  
		const thumbLi = e.target	
		clearhover(thumbLi);
		activeli = null;
		document.querySelectorAll(".mdl li iframe#hover").forEach (fr => {fr.remove()})
	  }, true);

	window.addEventListener('visibilitychange', function(event) {
	lastevent = "visibilitychange ";  
		if (!document.hidden)  {
				document.getElementsByTagName("html")[0].className="";
				document.querySelectorAll(".mdl li iframe#hover").forEach (fr => {fr.remove()})
			}
		if (activeli !== null) {
			if (document.hidden) {
				activeli.dataset.hover = "false";  // Stop udating	
				clearhover(activeli);
				activeli = null;
			}
		}
	});	

	window.addEventListener('pageshow', function(event) {
	if (event.persisted) {
		if ( activeli !== null) {
			clearhover(activeli)
			activeli = null;
		}
		
		document.querySelectorAll(".mdl li iframe#hover").forEach (fr => {fr.remove()})
		
    }
	});	
	 
	div.addEventListener("click", (e) => {
	lastevent = "click";
	try {
		let clickli = e.target.closest("li");
		if ( clickli ) { 
		   clearhover( clickli );
		   clickli.classList.add("clicked");
		}
	} catch(err) {
		console.log(err.message);
		}
	}, true) 
 
})();  // func preview