
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<title>Image Gallery</title>
		<meta name="description" content="Responsive Image Gallery">
		<meta name="author" content="Tim Wells">

		<style type="text/css">

		#darkbox { width:1190px; height:700px; position:absolute;
			top:0; left:0; background-color:#474747; overflow: hidden; text-align:center; cursor: url(images/red.ico), auto;
		}
		.darkboximg { padding:5%; max-width: 1190px; max-height: 700px; }

		#gallery {
			line-height:0;
			-webkit-column-count:5;
			-webkit-column-gap:5px;
			-moz-column-count:5;
			-moz-column-gap:5px;
			column-count:5;
			column-gap:5px;
			margin-top:2rem;
		}

		#gallery img {
			width: 100% !important;
			height: auto !important;
			margin-bottom:5px;
			filter: grayscale(90%);
			transition: filter 1s;
             cursor: url(images/green.cur), auto;
		}

		#gallery img:hover {
			filter:none;
		}

		@media (max-width: 1200px) {
			#gallery {
				-moz-column-count:    4;
				-webkit-column-count: 4;
				column-count:         4;
			}
		}
		@media (max-width: 1000px) {
			#gallery {
				-moz-column-count:    3;
				-webkit-column-count: 3;
				column-count:         3;
			}
		}
		@media (max-width: 800px) {
			#gallery {
				-moz-column-count:    2;
				-webkit-column-count: 2;
				column-count:         2;
			}
		}
		@media (max-width: 400px) {
			#gallery {
				-moz-column-count:    1;
				-webkit-column-count: 1;
				column-count:         1;
			}
		}

		</style>
	</head>
	<body>

		<div id="gallery">

			<img src="images/images/Right_Vacs.JPG" title="Vacuums Vending" Alt="Vacuums Vending">
			<img src="images/images/Right_Vacs_2.JPG" title="Vacuums Vending" Alt="Vacuums Vending">
			<img src="images/images/Bay.JPG" title="Car Wash Bay" Alt="Car Wash Bay">
			<img src="images/images/Bay2.JPG" title="Car Wash Bay" Alt="Car Wash Bay">
			<img src="images/images/Bay3.JPG" title="Car Wash Bay" Alt="Car Wash Bay">
			<img src="images/images/Front.JPG" title="Car Wash Front" Alt="Car Wash Front">
			<img src="images/images/Front_Close.JPG" title="Car Wash Front Close" Alt="Car Wash Front Close">
			<img src="images/images/Left_Side.JPG" title="Car Wash Left Side" Alt="Car Wash Left Side">
			<img src="images/images/newsign.JPG" title="Car Wash New Sign" Alt="Car Wash New Sign">
			<img src="images/images/newsign2.JPG" title="Car Wash Sign" Alt="Car Wash Sign">
			<img src="images/images/SANY0107.JPG" title="Bench" Alt="Bench">
		    <img src="images/images/Vacs.JPG" title="Vacuums" Alt="Vacuums">
			<img src="images/images/RightVacs2.JPG" title="Vacuums Old" Alt="Vacuums Old">
			<img src="images/images/Winter2.JPG" title="Car Wash Winter" Alt="Car Wash Winter">
			<img src="images/images/Back.JPG" title="Car Wash Back" Alt="Car Wash Back">
			<img src="images/images/shammee.jpg" title="Air Shammee" Alt="Air Shammee">


		</div>

		<script>
		let darkBoxVisible = false;

		window.addEventListener('load', (event) => {
			let images = document.querySelectorAll("img");
			if(images !== null && images !== undefined && images.length > 0) {
				images.forEach(function(img) {
					img.addEventListener('click', (evt) => {
						showDarkbox(img.src);
					});
				});
			}
		});

		function showDarkbox(url) {
			if(!darkBoxVisible) {
				let x = (window.innerWidth - 1280) / 2;
				let y = window.scrollY + 50;

				// Create the darkBox
				var div = document.createElement("div");
				div.id = "darkbox";
				div.innerHTML = '<img class="darkboximg" src="'+url+'" />';
				document.body.appendChild(div);
				let box = document.getElementById("darkbox");
				box.style.left = x.toString()+"px";
				box.style.top = y.toString()+"px";
				box.style.height = 'auto';
				box.addEventListener('click', (event) => {
					// Remove it
					let element = document.getElementById("darkbox");
					element.parentNode.removeChild(element);

					darkBoxVisible = false;
				})

				darkBoxVisible = true;

			} else {
				// Remove it
				let element = document.getElementById("darkbox");
				element.parentNode.removeChild(element);

				darkBoxVisible = false;
			}
		}
		</script>

	</body>
</html>