<style>
  * {box-sizing: border-box;}
  body {
    font-family: Verdana, sans-serif;
    overflow: hidden;
  }

  .mySlides {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
  }

  .mySlides img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  /* Slideshow container */
  .slideshow-container {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
  }

  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* Fading animation */
  .slide-in {
    animation-name: slide-in;
    animation-duration: 2s; /* Adjust the duration as per your preference */
    animation-fill-mode: forwards;
    display: block;
  }

  .slide-out {
    animation-name: slide-out;
    animation-duration: 2s; /* Adjust the duration as per your preference */
    animation-fill-mode: forwards;
    display: block;
  }

  @keyframes slide-in {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }

  @keyframes slide-out {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }
</style>

<div class="container-fluid h-100" style="margin-top: -48px;">
    <button type="button" class="hidden" id="s_reload">Reload</button>
    <div class="slider" id="second_display_slider">
    	<%= render 'slider' %>
    </div>

    <div class="item hidden h-100" id="second_display_items">
    	<%= render 'second_display' %>
    </div>
</div>

<script type="text/javascript">
	$(document).ready(function () {
    //html font-size for second display till 35px!
    // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
    
    if(!sessionStorage.getItem("visited_second_display")){
      sessionStorage.setItem("visited_second_display", true);
      window.location.href = '/origami/second_display';
    }

    $('#s_reload').on('click', function () {
    window.location.href = '/origami/second_display';
    });
  });

  showSlides("second_display_slider");

  function showSlides(sliderId) {
    let slider = document.getElementById(sliderId);
    let slides = slider.getElementsByClassName("mySlides");

    let slideIndex = slider.dataset.slideIndex;

    slideIndex++;
    if (!slideIndex || slideIndex >= slides.length) {
      slideIndex = 0;
    }

    for (let i = 0; i < slides.length; i++) {
      slides[i].className = slides[i].className.replace("slide-in", "slide-out");
    }

    slides[slideIndex].classList.remove("slide-out");
    slides[slideIndex].classList.add("slide-in");

    slider.dataset.slideIndex = slideIndex;
    setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
  }
</script>
