new Vue({
  el: "#app",
  data: {
    files: [],
    index: 0,
    timeout: null,
    carouselTimeout: 10000,
    carouselActive: true
  },
  methods: {
    next: function () {
      this.carouselActive = true;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => this.carousel(), this.carouselTimeout*2);
      if (this.index + 1 < this.files.length) {
        this.index++;
      } else {
        this.index = 0;
      }
    },
    prev: function () {
      this.carouselActive = true;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => this.carousel(), this.carouselTimeout*2);
      if (this.index - 1 >= 0) {
        this.index--;
      } else {
        this.index = this.files.length - 1;
      }
    },
    carousel: function (time = this.carouselTimeout) {
      this.timeout = setTimeout(() => {
        this.next();
        this.carousel();
      }, time);
    },
    loadData: function () {
      fetch('api/files').then(response => response.json()).then(
        data => {
          this.files = data.resource;
          this.carousel();
        }
      )
    },
    toggleCarousel: function () {
      clearTimeout(this.timeout);
      if (this.carouselActive) {
        this.carouselActive = false;
      } else {
        this.carouselActive = true;
        this.carousel();
      }
    }
  },
  mounted() {
    this.loadData();
  }
})