jQuery(document).ready(function() {

  class FullWidthFlow {
    constructor(target) {
      this.$target = jQuery(target);
      this.selectedRadio = this.$target.find(".fflow_radio:checked");
      this.intervalID = null;

      this.$target.find(".fflow_radio").on("change", (e) => console.log("radio click", e, e.currentTarget.checked));
    }

    start(interval) {
      this.intervalID = window.setInterval(() => this.advance(), interval * 1000);
    }

    stop() {
      if(this.intervalID === null) {
        return;
      }
      window.clearInterval(this.intervalID);
    }

    advance() {
      let nextSibling = this.selectedRadio.nextAll(".fflow_radio").first();
      if(nextSibling.length === 0) {
        nextSibling = this.$target.find(".fflow_radio:first");
      }
      this.select(nextSibling);
    }

    select(radio) {
      radio.prop("checked", true);
      this.selectedRadio = radio;
    }
  }

  jQuery(".fflow").each((_idx, flow) => {
    const pictureFlow = new FullWidthFlow(flow);
    pictureFlow.start(parseFloat(flow.dataset.changetime ?? 5) + parseFloat(flow.dataset.switch_time ?? 1));
  });
});