(function () {
  var $tabItems = $(".slip-tab-item");
  var $tabPanels = $(".slip-tab-panel");
  var currentIndex = 0;
  var timer = null;
  var interval = 5000;

  function switchTab(index, immediate) {
    if (index === currentIndex) return;
    $tabItems.removeClass("active");
    $tabItems.eq(index).addClass("active");
    $tabPanels.removeClass("active");
    $tabPanels.eq(index).addClass("active");
    currentIndex = index;
  }

  function startAutoSwitch() {
    if (timer) return;
    timer = setInterval(function () {
      var nextIndex = (currentIndex + 1) % $tabItems.length;
      switchTab(nextIndex, false);
    }, interval);
  }

  function stopAutoSwitch() {
    clearInterval(timer);
    timer = null;
  }

  $tabItems.each(function (index) {
    $(this).on("mouseenter", function () {
      stopAutoSwitch();
      switchTab(index, true);
    });
    $(this).on("mouseleave", function () {
      startAutoSwitch();
    });
  });

  startAutoSwitch();
})();