<?php
	include 'top.php';
	include 'Scripts/MS.php';
	include 'Scripts/MarketStatCollect.php';
	
	$imageDir = "Pictures/Gallery/Custom/";
	$images = glob($imageDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
	
	$Page = "Custom";
	LogActivity($Page, $ServerName, $ServerUserName, $ServerPassword);	
?>
<!DOCTYPE html>
<html>
	<head>
    	<script src="Script.js"></script>
 	  	<script>
			window.onload=Adjust;
			
			function test(e)
			{
				var img = document.getElementById(e.target.id);
				var imgName = img.src;
				if (imgName.indexOf('/') >= 0) {
					imgName = imgName.substring(imgName.lastIndexOf('/')+1);
				}
				
				var imgLocation = "Pictures/Gallery/Custom/" + imgName;
				var imgHeight = img.height * 3.5;
				var imgWidth = img.width * 3.5;
				var win = window.open("", "View Photo", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width = "+ (imgWidth + 15) +" height = "+ (imgHeight + 15) +" + 100;, top=0, left=0");
				win.document.body.style.backgroundColor = 'black';
				win.document.body.innerHTML = "<img style='height: "+imgHeight+"px; width: "+imgWidth+"px;' src='" + img.src + "' alt='Image Failed to Load'>";
			}
		</script>
    	<link rel="stylesheet" type="text/css" href="body.css">
        <style>
			div.bodyContainerGallery {position: relative; float: left; width: 75%; line-height: 150%; text-align: center; background-color: rgba(0,0,0,0.6);}
			div.imgDivider {width: 10%; margin: auto; text-align: center; border: 1px solid grey; overflow: auto;}
			.img {-webkit-transform: scale(1,1); -webkit-transition-duration: 0.5s;}
			.img2:hover {-webkit-transform: scale(2.5 ,2.5); -webkit-transition-duration: 1s; position: absolute; z-index: 999; margin-bottom: 10px} <!-- 1s defualt value
		</style>
   	</head>
    <body class="background">
        <div class="transparent">
        	<div class="fadeLeft" id="fadeLeft"></div>
    		<div class="bodyContainerGallery" id="bodyContainer">
    			<?php
					$i = 0;
					echo ("<ul style='margin: auto;'>");
					foreach ($images as $value) {
						echo ("<li style='display: inline-table; margin: 10px; text-align: center;'><img class='img' id='".$i."' style='position: relative; border: 5px groove grey; border-radius: 15px; height: 200px; ' src='".$value."' alt='Gallery Photo' onClick='test(event)'></img></li>");
						$i++;
					}
					echo("</ul>");
				?>
                <div>
                	<?php
						include 'bottom.php';
					?>
                </div>
        	</div>
            <div class="fadeRight" id="fadeRight"></div>
        </div>
    </body>
</html>