<?php
$dir = ".";
if(isset($_GET['dir']) && strpos(realpath($_GET['dir']), __DIR__) === 0) {
  $dir = $_GET['dir'];
}
$files = scandir($dir);
$ignoreFiles = ['b_arrow.gif', 'home-9.gif', 'homejump.gif'];
$images = array_filter($files, function($file) use ($ignoreFiles) {
  $extension = pathinfo($file, PATHINFO_EXTENSION);
  $filename = pathinfo($file, PATHINFO_BASENAME);
  $desiredExtensions = ['png', 'jpg', 'jpeg', 'gif'];

  return in_array($extension, $desiredExtensions) && !in_array($filename, $ignoreFiles);
});
$directories = array_filter($files, function($file) use ($dir) {
  return is_dir($dir . '/' . $file) && $file != "." && $file != "..";
});
?>

<!DOCTYPE html>
<html>
<head>
    <title>dcss tiles</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
          background-color: black;
          color: white;
          font-family: monospace;
          font-size: 2em;
        }
        #navigation {
          margin-bottom: 20px;
        }
        #images img {
          min-width: 128px;
          max-width: 100%;
          margin: 5px;
        }
        .image-link:hover {
          cursor: pointer;
        }
        a {
          color: pink;
      }
    </style>
</head>
<body>
<div id="container">
    <div id="navigation">
        <div>
          <a href="/~shmup/crawl/rltiles"><img src="homejump.gif"></a>
          <?php if($dir != "."): ?>
              <a href="?dir=<?= dirname($dir) ?>"><img src="b_arrow.gif"></a>
          <?php endif; ?>
        </div>
        <div>
            <span><?php echo $dir . "/"; ?></span>
            <?php if(count($directories) > 0): ?>
                <span>{</span>
                <?php foreach($directories as $directory): ?>
                    <a href="?dir=<?= $dir . '/' . $directory ?>"><?= $directory ?></a>
                <?php endforeach; ?>
                <span>}</span>
            <?php endif; ?>
        </div>
    </div>

    <hr>

    <div id="images">
        <?php foreach($images as $image): ?>
            <span class="image-link"><img src="<?= $dir . '/' . $image ?>" title="<?= $image ?>"></span>
        <?php endforeach; ?>
    </div>

    <div id="preview" style="width: 128px;">
        <img id="previewImage" src="" style="width: 100%;">
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var imageLinks = document.querySelectorAll(".image-link");
  var previewImage = document.getElementById("previewImage");

  imageLinks.forEach(function(link) {
    link.addEventListener("click", function(event) {
      event.preventDefault();
      previewImage.src = event.target.src;
        });
    });
});
</script>
</body>
</html>
