// YouTube
let player;
let isMuted = true;
let isPlaying = true;
let lockPlayPause = false;
let lockMute = false;
$(function () {
  player = $(".player").mb_YTPlayer();
  setTimeout(() => {
    player.YTPPlay();
    player.YTPMute();
  }, 1000);
  $("#playPauseBtn").on("click", function () {
    if (lockPlayPause) return;
    lockPlayPause = true;
    const img = $(this).find("img");
    if (isPlaying) {
      player.YTPPause();
      img.attr("src", "assets/img/play.png");
      isPlaying = false;
    } else {
      player.YTPPlay();
      img.attr("src", "assets/img/pause.png");
      isPlaying = true;
    }
    setTimeout(() => {
      lockPlayPause = false;
    }, 300);
  });
  $("#muteBtn").on("click", function () {
    if (lockMute) return;
    lockMute = true;
    const img = $(this).find("img");
    if (isMuted) {
      player.YTPUnmute();
      img.attr("src", "assets/img/unmute.png");
      isMuted = false;
    } else {
      player.YTPMute();
      img.attr("src", "assets/img/mute.png");
      isMuted = true;
    }
    setTimeout(() => {
      lockMute = false;
    }, 300);
  });
});
$(function () {
  $(".player").mb_YTPlayer();
});
// mouse stalker  
$(function () {
  var cursor = $("#cursor");
  var stalker = $("#stalker");
  $(document).on("mousemove", function (e) {
    var x = e.clientX;
    var y = e.clientY;
    cursor.css({
      "opacity": "0.9",
      "top": y + "px",
      "left": x + "px"
    });
    setTimeout(function () {
      stalker.css({
        "opacity": "0.4",
        "top": y + "px",
        "left": x + "px"
      });
    }, 100);
  });
  $("a").on({
    "mouseenter": function () {
      cursor.addClass("active");
      stalker.addClass("active");
    },
    "mouseleave": function () {
      cursor.removeClass("active");
      stalker.removeClass("active");

    }
  });
});
// hamburger
const hamburger = document.querySelector(".js-hamburger");
const drawer = document.querySelector(".js-drawer");
const drawerItems = document.querySelectorAll(".drawerItem");
const underMenu = document.querySelector(".underMenu");
hamburger.addEventListener('click', () => {
  const isActive = hamburger.classList.toggle('is-active');
  drawer.classList.toggle('is-active');
  if (isActive) {
    drawerItems.forEach(item => item.classList.remove('animate'));
    underMenu.classList.remove('animate');
    drawerItems.forEach((item, index) => {
      setTimeout(() => {
        item.classList.add('animate');
      }, index * 150);
    });
    setTimeout(() => {
      underMenu.classList.add('animate');
    }, drawerItems.length * 150 + 200);
  } else {
    drawerItems.forEach(item => item.classList.remove('animate'));
    underMenu.classList.remove('animate');
  }
});
document.querySelectorAll('.drawerLink').forEach(link => {
  link.addEventListener('click', () => {
    hamburger.classList.remove('is-active');
    drawer.classList.remove('is-active');
    drawerItems.forEach(item => item.classList.remove('animate'));
    underMenu.classList.remove('animate');
  });
});
// header logo size
window.addEventListener('scroll', function () {
  const header = document.querySelector('header');
  if (window.scrollY > 50) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});
// loading animation
var bar = new ProgressBar.Line(loading_text, {
  easing: 'easeIn',
  duration: 1000,
  strokeWidth: 0.2,
  color: 'var(--font)',
  trailWidth: 0.1,
  trailColor: 'var(--bgColor-sub)',
  text: {
    style: {
      position: 'absolute',
      right: '40px',
      bottom: '20px',
      padding: '0',
      'font-size': '5rem',
      color: 'var(--font)',
      'font-family': 'var(--en)',
    },
    autoStyleContainer: false
  },
  step: function (state, bar) {
    const val = Math.round(bar.value() * 100);
    const padded = String(val).padStart(3, '0');
    bar.setText(padded);
  }
});
bar.animate(1.0, function () {
  document.getElementById("loading_text").style.opacity = '0';
  document.getElementById("loading").classList.add("opened");
  setTimeout(() => {
    document.getElementById("loading").style.display = "none";
  }, 1000);
});
// page bg anime
(function ($) {
  'use strict';
  $(window).on('load', function () {
    setTimeout(function () {
      $('.page-loadbg').fadeOut(500, function () {
        $(this).remove();
        $('body.page').addClass('loaded');
      });
    }, 1600);
  });
})(jQuery);
// video
document.addEventListener('DOMContentLoaded', () => {
    const videoPc = document.getElementById('bgVideoPc');
    const videoSp = document.getElementById('bgVideoSp');
    let currentVideo;
    if (videoPc && getComputedStyle(videoPc).display !== 'none') {
        currentVideo = videoPc;
    } else if (videoSp && getComputedStyle(videoSp).display !== 'none') {
        currentVideo = videoSp;
    } else {
        console.error('表示されている動画要素が見つかりません。');
        return;
    }
    const playBtn = document.getElementById('playBtn');
    const stopBtn = document.getElementById('stopBtn');
    const muteBtn = document.getElementById('muteBtn');
    const unmuteBtn = document.getElementById('unmuteBtn');
    stopBtn.style.display = 'inline-block';
    playBtn.style.display = 'none';
    muteBtn.style.display = 'inline-block';
    unmuteBtn.style.display = 'none';
    currentVideo.muted = true;
    playBtn.addEventListener('click', () => {
        currentVideo.play().then(() => {
            playBtn.style.display = 'none';
            stopBtn.style.display = 'inline-block';
        }).catch(error => {
            console.error('動画の再生に失敗しました:', error);
        });
    });
    stopBtn.addEventListener('click', () => {
        currentVideo.pause();
        stopBtn.style.display = 'none';
        playBtn.style.display = 'inline-block';
    });
    muteBtn.addEventListener('click', () => {
        currentVideo.muted = false;
        muteBtn.style.display = 'none';
        unmuteBtn.style.display = 'inline-block';
        if (currentVideo.paused) {
            currentVideo.play().catch(error => {
                console.warn('ミュート解除後の再生に失敗しました:', error);
            });
        }
    });
    unmuteBtn.addEventListener('click', () => {
        currentVideo.muted = true;
        unmuteBtn.style.display = 'none';
        muteBtn.style.display = 'inline-block';
    });
});