/*
	JSOMG.js - JavaScript One-shot Media Gallery
	2021 by Mercury 0x0D, Creative Commons Attribution 4.0 International License

	Revision history:
	2021-12-25 - Added keyboard controls
	2021-12-23 - Added caption ability
	2021-12-22 - Initial release
*/





var collection = document.getElementsByClassName("JSOMGContainer");
for (var index = 0; index < collection.length; index++)
{
	// set the style attributes
	collection[index].style.display = "flex";
	collection[index].style.flexWrap = "wrap";
	collection[index].style.justifyContent = "center";

	// attach onclick handlers to all images
	for (var index2 = 0; index2 < collection[index].children.length; index2++)
	{
		collection[index].children[index2].setAttribute("onclick", "JSOMGOverlayOpen(this)");
	}
}





function JSOMGKeyDispatcher(theEvent)
{
	if (theEvent.keyCode == 27) JSOMGOverlayClose();
	if (theEvent.keyCode == 37) JSOMGScroll(-1);
	if (theEvent.keyCode == 39) JSOMGScroll(1);
}





function JSOMGMouseEnterArrow(element)
{
	element.style.opacity = 1;
}





function JSOMGMouseExitArrow(element)
{
	element.style.opacity = .3;
}





function JSOMGOverlayClose()
{
	// remove the overlay elements we previously created
	JSOMGOverlay.remove();
	if (typeof JSOMGLeftArrow != "undefined") JSOMGLeftArrow.remove();
	if (typeof JSOMGRightArrow != "undefined") JSOMGRightArrow.remove();
	JSOMGImageNumber.remove();

	// and finally, terminate the event listener
	document.body.onkeydown = null;
}





function JSOMGOverlayOpen(element)
{
	// create global arrays which will hold the SRC / ALT strings and nodeName for all the parent element's IMG and VIDEO children for later use until the div is closed
	JSOMGArrayAlt = [];
	JSOMGArrayNodeName = [];
	JSOMGArraySrc = [];
	for (var i = 0; i < element.parentElement.children.length; i++)
	{
		var nodeName = element.parentElement.children[i].nodeName.toUpperCase();
		if (nodeName == "IMG")
		{
			JSOMGArrayAlt[JSOMGArrayAlt.length] = element.parentElement.children[i].alt;
			JSOMGArrayNodeName[JSOMGArrayNodeName.length] = nodeName;
			JSOMGArraySrc[JSOMGArraySrc.length] = element.parentElement.children[i].src;
		}

		if (nodeName == "VIDEO")
		{
			JSOMGArrayAlt[JSOMGArrayAlt.length] = element.parentElement.children[i].title;
			JSOMGArrayNodeName[JSOMGArrayNodeName.length] = nodeName;
			JSOMGArraySrc[JSOMGArraySrc.length] = element.parentElement.children[i].src;
		}
	}

	// create overlay div
	JSOMGOverlay = document.createElement("div");
	JSOMGOverlay.setAttribute("onclick", "JSOMGOverlayClose()");
	JSOMGOverlay.style.position = "fixed";
	JSOMGOverlay.style.width = "100%";
	JSOMGOverlay.style.height = "100%";
	JSOMGOverlay.style.top = 0;
	JSOMGOverlay.style.left = 0;
	JSOMGOverlay.style.backgroundColor = "#000000AA";
	JSOMGOverlay.style.zIndex = 2;
	JSOMGOverlay.style.cursor = "pointer";
	JSOMGOverlay.imageIndex = Array.prototype.indexOf.call(element.parentElement.children, element);
	document.body.appendChild(JSOMGOverlay);


	// if there's more than one image, create the scroll arrows
	if (JSOMGArrayNodeName.length > 1)
	{
		JSOMGLeftArrow = document.createElement("div");
		JSOMGLeftArrow.innerText = "<";
		JSOMGLeftArrow.style.fontWeight = "bold";
		JSOMGLeftArrow.style.textAlign = "center";
		JSOMGLeftArrow.style.verticalAlign = "middle";
		JSOMGLeftArrow.style.width = "50px";
		JSOMGLeftArrow.style.height = "50px";
		JSOMGLeftArrow.style.fontSize = "40px";
		JSOMGLeftArrow.style.padding = "8px";
		JSOMGLeftArrow.style.borderRadius = "50%";
		JSOMGLeftArrow.style.color = "white";
		JSOMGLeftArrow.style.backgroundColor = "#777777";
		JSOMGLeftArrow.style.opacity = .3;
		JSOMGLeftArrow.style.position = "fixed";
		JSOMGLeftArrow.style.top = "50%";
		JSOMGLeftArrow.style.left = "1%";
		JSOMGLeftArrow.style.objectFit = "contain";
		JSOMGLeftArrow.style.zIndex = 3;
		JSOMGLeftArrow.style.cursor = "default";
		JSOMGLeftArrow.setAttribute("onmouseover", "JSOMGMouseEnterArrow(this)");
		JSOMGLeftArrow.setAttribute("onmouseleave", "JSOMGMouseExitArrow(this)");
		JSOMGLeftArrow.setAttribute("onselectstart", "return false");
		JSOMGLeftArrow.setAttribute("onclick", "JSOMGScroll(-1)");
		document.body.appendChild(JSOMGLeftArrow);

		JSOMGRightArrow = document.createElement("div");
		JSOMGRightArrow.innerText = ">";
		JSOMGRightArrow.style.fontWeight = "bold";
		JSOMGRightArrow.style.textAlign = "center";
		JSOMGRightArrow.style.verticalAlign = "middle";
		JSOMGRightArrow.style.width = "50px";
		JSOMGRightArrow.style.height = "50px";
		JSOMGRightArrow.style.fontSize = "40px";
		JSOMGRightArrow.style.padding = "8px";
		JSOMGRightArrow.style.borderRadius = "50%";
		JSOMGRightArrow.style.color = "white";
		JSOMGRightArrow.style.backgroundColor = "#777777";
		JSOMGRightArrow.style.opacity = .3;
		JSOMGRightArrow.style.position = "fixed";
		JSOMGRightArrow.style.top = "50%";
		JSOMGRightArrow.style.right = "1%";
		JSOMGRightArrow.style.objectFit = "contain";
		JSOMGRightArrow.style.zIndex = 3;
		JSOMGRightArrow.style.cursor = "default";
		JSOMGRightArrow.setAttribute("onmouseover", "JSOMGMouseEnterArrow(this)");
		JSOMGRightArrow.setAttribute("onmouseleave", "JSOMGMouseExitArrow(this)");
		JSOMGRightArrow.setAttribute("onselectstart", "return false");
		JSOMGRightArrow.setAttribute("onclick", "JSOMGScroll(1)");
		document.body.appendChild(JSOMGRightArrow);
	}


	// create the image number display
	JSOMGImageNumber = document.createElement("div");
	JSOMGImageNumber.style.textAlign = "center";
	JSOMGImageNumber.style.color = "white";
	JSOMGImageNumber.style.backgroundColor = "#777777";
	JSOMGImageNumber.style.padding = "8px";
	JSOMGImageNumber.style.borderRadius = "16px";
	JSOMGImageNumber.style.width = "4%";
	JSOMGImageNumber.style.position = "fixed";
	JSOMGImageNumber.style.bottom = "1%";
	JSOMGImageNumber.style.left = "48%";
	JSOMGImageNumber.style.zIndex = 3;
	document.body.appendChild(JSOMGImageNumber);


	// since this function updates the media display, we can call it with a null scroll value to make the image/video appear 
	JSOMGScroll(0);

	// add an event listener to tell us if keys have been pressed
	document.body.onkeydown = function(theEvent){JSOMGKeyDispatcher(theEvent)};
}





function JSOMGScroll(incrementDirection)
{
	var maxIndex = JSOMGArraySrc.length - 1;


	JSOMGOverlay.imageIndex = JSOMGOverlay.imageIndex + incrementDirection;

	// make sure we're not out of bounds
	if (JSOMGOverlay.imageIndex < 0) JSOMGOverlay.imageIndex = maxIndex;
	if (JSOMGOverlay.imageIndex > maxIndex) JSOMGOverlay.imageIndex = 0;

	// create image / video
	if (JSOMGArrayNodeName[JSOMGOverlay.imageIndex] == "IMG") 
	{
		JSOMGOverlayMedia = document.createElement("IMG");
	}

	if (JSOMGArrayNodeName[JSOMGOverlay.imageIndex] == "VIDEO")
	{
		JSOMGOverlayMedia = document.createElement("VIDEO");
		JSOMGOverlayMedia.controls = "true";
	}

	JSOMGOverlayMedia.src = JSOMGArraySrc[JSOMGOverlay.imageIndex];
	JSOMGOverlayMedia.style.height = "90%";
	JSOMGOverlayMedia.style.width = "100%";
	JSOMGOverlayMedia.style.objectFit = "contain";
	JSOMGOverlayMedia.style.zIndex = 3;
	JSOMGOverlay.appendChild(JSOMGOverlayMedia);


	// delete the old media element
	if (JSOMGOverlay.children.length > 1) JSOMGOverlay.firstElementChild.remove();


	// update the image number display
	JSOMGImageNumber.innerText = (JSOMGOverlay.imageIndex + 1) + "/" + JSOMGArraySrc.length;

	// add caption text, if any
	if (JSOMGArrayAlt[JSOMGOverlay.imageIndex])
	{
		JSOMGImageNumber.innerHTML = JSOMGArrayAlt[JSOMGOverlay.imageIndex] + "<br>" + JSOMGImageNumber.innerText;
		JSOMGImageNumber.style.width = "70%";
		JSOMGImageNumber.style.left = "15%";
	} else {
		JSOMGImageNumber.style.width = "4%";
		JSOMGImageNumber.style.left = "48%";
	}
}