document.addEventListener('DOMContentLoaded', function() {
  var section_number = document.querySelectorAll("#function_mca_slide_area section").length;
  var slideArea = document.getElementById("function_mca_slide_area");
  slideArea.insertAdjacentHTML('afterend', "<p class='function_ac_nav_next'>次へ</p>");
  var v = document.getElementById("julea_movie");

  horizontal_cursor();

  // Disable navigation a tags
  document.querySelectorAll('a.function_controll_nav, a.function_ac_navigation').forEach(function(a) {
      a.addEventListener('click', function(event) {
          event.preventDefault();
      });
  });

  // Close tab hover actions
  function addHoverEffect(className) {
      document.querySelectorAll("a." + className).forEach(function(a) {
          a.addEventListener('mouseenter', function() {
              document.querySelector("a." + className + " h2").style.color = '#F21986';
              document.querySelectorAll("a." + className + " li").forEach(function(li) {
                  li.style.color = '#F21986';
              });
          });
          a.addEventListener('mouseleave', function() {
              document.querySelector("a." + className + " h2").style.color = '#1E2C5D';
              document.querySelectorAll("a." + className + " li").forEach(function(li) {
                  li.style.color = '#1E2C5D';
              });
          });
      });
  }

  addHoverEffect('uke');
  addHoverEffect('doc');
  addHoverEffect('bun');

  // Carousel and bottom navigation color change
  document.querySelector('a.function_ac_nav-1').style.backgroundColor = "#fbd3e9";
  var slide_sections_div = slideArea.cloneNode(true);
  var slide_number = 1;
  var slide_now_number = 1;
  var slider_timer = setInterval(function() {
      var first_section = slideArea.querySelector("section:first-child");
      var first_section_clone = first_section.cloneNode(true);
      first_section.style.marginLeft = '-920px';
      setTimeout(function() {
          document.querySelectorAll('a.function_ac_navigation').forEach(function(a) {
              a.style.backgroundColor = "#DDDDDD";
          });
          var section_flg = slideArea.querySelector("section:nth-child(2)").className;
          if (section_flg === "section_1") {
              slide_number = 1;
              slide_now_number = 1;
              document.querySelector('a.function_ac_nav-' + slide_number).style.backgroundColor = "#fbd3e9";
          } else {
              slide_number++;
              slide_now_number++;
              document.querySelector('a.function_ac_nav-' + slide_number).style.backgroundColor = "#fbd3e9";
          }
          first_section.remove();
          slideArea.appendChild(first_section_clone);
          first_section.style.marginLeft = '0';
          insert_cursor();
      }, 500);
  }, 5000);

  // Video play button click action
  document.getElementById('play').addEventListener('click', function() {
      this.style.display = 'none';
      document.getElementById('movie_title_container').style.display = 'none';
      v.style.display = 'block';
      video_play();
  });

  function video_play() {
      if (v.requestFullscreen) {
          v.requestFullscreen();
      }
      v.play();
      ga('send', 'event', 'movie_play', 'click', 'function_video');
  }

  function stopSlider() {
      clearInterval(slider_timer);
  }

  function moveSlider(where) {
      stopSlider();
      slideArea.style.transition = 'margin-left 0.5s';
      slideArea.style.marginLeft = (where - 1) * (-920) + 'px';
      slide_now_number = where;
      document.querySelectorAll('a.function_ac_navigation').forEach(function(a) {
          a.style.backgroundColor = "#DDDDDD";
      });
      document.querySelector('a.function_ac_nav-' + where).style.backgroundColor = "#fbd3e9";
      insert_cursor();
  }

  document.querySelectorAll('.function_controll_nav').forEach(function(nav) {
      nav.addEventListener('click', function() {
          var clicked_number = parseInt(this.id.split("-")[1],10);
          moveSlider(clicked_number);
      });
  });

  function insert_cursor() {
      document.querySelectorAll('.function_ac_nav_next, .function_ac_nav_pre').forEach(function(p) {
          p.remove();
      });
      if (section_number > slide_now_number) {
          slideArea.insertAdjacentHTML('afterend', "<p class='function_ac_nav_next'>次へ</p>");
      }
      if (1 < slide_now_number) {
          slideArea.insertAdjacentHTML('afterend', "<p class='function_ac_nav_pre'>前へ</p>");
      }
      horizontal_cursor();
  }

  function horizontal_cursor() {
      document.querySelector('.function_ac_nav_next')?.addEventListener('click', function() {
          var target_number = slide_now_number + 1;
          if (target_number > section_number) {
              target_number = section_number;
          }
          moveSlider(target_number);
      });

      document.querySelector('.function_ac_nav_pre')?.addEventListener('click', function() {
          var target_number = slide_now_number - 1;
          if (target_number < 1) {
              target_number = 1;
          }
          moveSlider(target_number);
      });
  }
});