
//===============================================================
// debounce関数
//===============================================================
function debounce(func, wait) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            func.apply(context, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}


//===============================================================
// list-maruの中にfigureがない場合にno-figureを付与する
//===============================================================
$(document).ready(function() {
  $('.list-maru').each(function() {
    if ($(this).find('figure').length === 0) {
      $(this).addClass('no-figure');
    }
  });
});


//===============================================================
// width-check-maruの幅をチェックし、中の要素のレイアウトを変更
//===============================================================
$(document).ready(function() {
  // ウィンドウサイズの変更に応じた処理
  function checkWidth() {
    $('.width-check-maru').each(function() {
      var width = $(this).width(); // 各要素の幅を取得

      // 既存のクラスを削除
      $(this).removeClass('width-800-maru width-500-maru');

      // 幅に応じたクラスを追加
      if (width >= 800) {
        $(this).addClass('width-800-maru');
      } else if (width >= 500) {
        $(this).addClass('width-500-maru');
      }
    });
  }

  // ウィンドウサイズ変更イベントにdebounceを使って処理を設定
  $(window).resize(debounce(checkWidth, 200));

  // 初回チェック
  checkWidth();
});


//===============================================================
// 汎用開閉処理
//===============================================================
$(function() {
	$('.openclose-maru dt').next().hide();
	$('.openclose-maru dt').click(function() {
		$(this).next().slideToggle();
		$('.openclose-maru dt').not(this).next().slideUp();
	});
});


//===============================================================
// お知らせのポップアップ
//===============================================================
$(function() {
  // .link-popup-maru 内の a をクリックした際の処理
  $('.link-popup-maru a').click(function(event) {
    event.preventDefault(); // リンクのデフォルト動作を無効化

    // 対応するポップアップ要素を取得
    var $popup = $(this).closest('.link-popup-maru').nextAll('.popup-maru').first();

    $popup.fadeIn(); // 対応するポップアップを表示
  });

  // ポップアップの閉じるボタンをクリックした際の処理
  $(document).on('click', '.close-maru', function() {
    $(this).closest('.popup-maru').fadeOut(); // 対応するポップアップを非表示
  });

  // ポップアップの外側をクリックした際の処理
  $('.popup-maru').click(function(event) {
    if ($(event.target).is('.popup-maru')) {
      $(this).fadeOut(); // 対応するポップアップを非表示
    }
  });
});


//===============================================================
// スライドショー
//===============================================================
$(function() {
    $('.slide1-maru').each(function() {
        var $this = $(this);
        var slides = $this.find('.slide-maru'); // クラス名に「-maru」を追加
        var slideCount = slides.length;
        var currentIndex = 0;

        // インジケータを表示する要素を取得
        var indicators = $this.find('.slide-indicators-maru'); // クラス名に「-maru」を追加

        // スライドの数に応じたインジケータを生成
        for (var i = 0; i < slideCount; i++) {
            indicators.append('<span class="indicator-maru" data-index="' + i + '"></span>'); // クラス名に「-maru」を追加
        }

        // インジケータの初期状態を設定
        var indicatorElements = indicators.find('.indicator-maru'); // クラス名に「-maru」を追加
        indicatorElements.eq(currentIndex).addClass('active-maru'); // クラス名に「-maru」を追加

        // スライドの初期状態を設定
        slides.eq(currentIndex).css('opacity', 1).addClass('active-maru'); // クラス名に「-maru」を追加

        // インジケータをクリックしたときの動作を設定
        indicatorElements.on('click', function() {
            var clickedIndex = $(this).data('index');

            // 現在のスライドと同じ場合は何もしない
            if (clickedIndex === currentIndex) return;

            // スライドの切り替え
            slides.eq(currentIndex).css('opacity', 0).removeClass('active-maru'); // クラス名に「-maru」を追加
            slides.eq(clickedIndex).css('opacity', 1).addClass('active-maru'); // クラス名に「-maru」を追加

            // インジケータの更新
            indicatorElements.eq(currentIndex).removeClass('active-maru'); // クラス名に「-maru」を追加
            indicatorElements.eq(clickedIndex).addClass('active-maru'); // クラス名に「-maru」を追加

            // 現在のスライドを更新
            currentIndex = clickedIndex;
        });

        // 自動スライドのタイマー
        setInterval(function() {
            var nextIndex = (currentIndex + 1) % slideCount;

            // スライドの切り替え
            slides.eq(currentIndex).css('opacity', 0).removeClass('active-maru'); // クラス名に「-maru」を追加
            slides.eq(nextIndex).css('opacity', 1).addClass('active-maru'); // クラス名に「-maru」を追加

            // インジケータの更新
            indicatorElements.eq(currentIndex).removeClass('active-maru'); // クラス名に「-maru」を追加
            indicatorElements.eq(nextIndex).addClass('active-maru'); // クラス名に「-maru」を追加

            currentIndex = nextIndex;
        }, 5000); // 5秒ごとにスライドを切り替える
    });
});

//===============================================================
// サムネイルスライド
//===============================================================
$(document).ready(function() {
    // 各 .thumbnail-slide を個別に処理
    $('.thumbnail-slide-maru').each(function() {
        var $thumbnailSlide = $(this);
        var $divs = $thumbnailSlide.children('div');
        var divCount = $divs.length;

        // 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

        // サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 20 + 's'; 
        var slideWidth = (divCount / 4) * 200 + '%';  

        // 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

        // .thumbnail-slide に animation と width を設定
        $thumbnailSlide.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

        // 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($thumbnailSlide);

        // サムネイルにマウスが乗った時にアニメーションを一時停止
        $thumbnailSlide.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

        // サムネイルからマウスが離れた時にアニメーションを再開
        $thumbnailSlide.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});


//===============================================================
// lightboxを読み込む
//===============================================================
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.min.js');

