<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
    {% include header.html %}
    <div class="slideshowContainer">
      {% for slide in site.slides %}
         {{ slide }}
      {% endfor %}
    </div>
    <script>
    var slideIndex = -1;
    carousel();
    function carousel() {
      var i;
      var fading;
      var x = document.getElementsByClassName("slideshowItem");
      for (i = 0; i < x.length; i++) {
        if(slideIndex!=-1 && i==slideIndex){
          fading=i;
          x[i].className+=" fadeOut";
          x[i].style.zIndex="3";
          window.setTimeout(function(){
            x[fading].style.zIndex="";
          },1000);
        }
        else {
          x[i].style.display = "none";
          x[i].style.zIndex="";
        }
      }
      slideIndex++;
      if (slideIndex >= x.length) {slideIndex = 0}
      with(x[slideIndex]){
        style.display="";
        className="slideshowItem";
        style.zIndex="2";
      }
      setTimeout(carousel, 5000);
    }
    var easter_egg = new Konami();
    easter_egg.load("https://www.youtube.com/watch?v=yPYZpwSpKmA");
    </script>
    <div class="page-content">
      <div class="wrapper">
        {{ content }}
      </div>
    </div>
    {% include footer.html %}
  </body>
</html>
