<?php
// Configuration
$mode = 'vertical'; // 'vertical' ou 'horizontal'
$set = 'LEGACY';    // 'LEGACY' ou 'OLLY'
$secondsPerImage = 8; // vitesse : secondes pour défiler une image

$imagesSets = [
  'LEGACY' => [
    'images/LEGACY/apples-averywhere.png',
    'images/LEGACY/legacy-menu-pause.png',
    'images/LEGACY/legacy-screen-6.png',
    'images/LEGACY/legacy-screen-7.png',
    'images/LEGACY/run-and-eat-to-survive.png',
    'images/LEGACY/you-won_t-live-forever.png',
  ],
  'OLLY' => [
    'images/OLLY/lesson_contentblock01.png',
    'images/OLLY/lesson_contentblock04.png',
    'images/OLLY/lesson_contentblock05.png',
    'images/OLLY/lesson_cover01.png',
    'images/OLLY/quiz_choosemode.png',
    'images/OLLY/quiz_quadmode.png',
  ],
];

$images = $imagesSets[$set];
$count = count($images);
$duration = $count * $secondsPerImage; // durée calculée selon le nombre d'images

// Décalage par colonne basé sur le nombre d'images
// Colonnes 1 et 3 vont dans la même direction, donc décalées de 1/2
// Colonne 2 va dans l'autre direction, décalée de 1/4
$columns = [
  ['offset' => 0,                    'delay' => 0],
  ['offset' => (int)($count / 3),    'delay' => $duration / 4],
  ['offset' => 0,                    'delay' => $duration / 2],
];

function getShiftedImages($images, $offset) {
  return array_merge(
    array_slice($images, $offset),
    array_slice($images, 0, $offset)
  );
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Animation Galerie</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="gallery-animation gallery-animation--<?= $mode ?>" style="--animation-duration: <?= $duration ?>s;">
    <div class="gallery-animation__wrapper">
      <?php foreach ($columns as $col):
        $colImages = getShiftedImages($images, $col['offset']);
      ?>
      <div class="gallery-animation__column">
        <div class="gallery-animation__track" style="animation-delay: -<?= $col['delay'] ?>s;">
          <?php foreach ($colImages as $img): ?>
          <img src="<?= $img ?>" alt="" class="gallery-animation__image">
          <?php endforeach; ?>
          <?php foreach ($colImages as $img): ?>
          <img src="<?= $img ?>" alt="" class="gallery-animation__image">
          <?php endforeach; ?>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>

</body>
</html>
