// console.log("コンソール");
$(document).ready(function(){
  // ページ読み込み時の処理
  scrollFade();
  mainVisulaSlider();
  multipleSearch();

  // ブラウザをスクロールしたときの処理
  $(window).scroll(function(){
    scrollFade()
  });


  // 検索のクリックしたときの処理
  $(".icon-search, .side-bar-hum").on("click",function(){
    // $(".side-bar").toggleClass("is-open");
    toggleSidebar()
  });
  $(".category-list").on("click",function(){
    $(".sub-menu").toggleClass("is-open");
  });
  
  // $(".side-bar-hum").on("click",function(){
  //   $(".side-bar").removeClass("is-open")
  //   toggleSidebar()
  // });
  
  $(".hum").on("click",function(){
    $(".hum").toggleClass("is-show");
    $(".hum-menu").toggleClass("is-open");
  });
  
  $('a[href^="#"]').click(function (e) {
    e.preventDefault(); // デフォルトの動作をキャンセル
    var speed = 500; // スクロールのスピード
    var href = $(this).attr('href'); // クリックされたリンクのhrefを取得
    var target = $(href); // ターゲットとなる要素を取得

    if (target.length) { // ターゲットが存在する場合のみ実行
      var position = target.offset().top; // ターゲットの位置を取得
      const header_height = $("header").height()
      const gnav_height = $(".global-nav").height()
      const offset = 40
      $('html, body').animate({ scrollTop: (position - gnav_height - header_height - offset ) }, speed, 'swing'); // スムーズスクロール
    }
  });


// 関数

  // side-barのクラスの付け外し
  function toggleSidebar(){
    // .side-barに対してis-openクラスを付け外し
    $(".side-bar").toggleClass("is-open");
  }

  // セレクトボックスを複数選択するための関数
  function multipleSearch(){
    // multiple-selectのプラグインを実行している
    $('.multiple-select').multipleSelect({
      width: 200,
      placeholder: "選択してください",
      formatSelectAll: function() {
          return 'すべて';
      },
      formatAllSelected: function() {
          return '全て選択されています';
      }
    });
  }
  
  // メインビジュアルのスライダー
  function mainVisulaSlider(){
    // slickのプラグインを実行
    $('.slider').slick({
      autoplay: true,
      dots: true,
      dotsClass: 'dots-wrap',
      arrows: true,
      variableWidth: true, //左右のスライドを見せるために必要
      centerMode: true, //スライドを中心に寄せる
      slidesToShow: 1,//スライドの見える枚数に合わせて入れると良い
      prevArrow: '<div class="slick-prev"><img src="./img/chevron-left.svg" alt="prev"></div>',
      nextArrow: '<div class="slick-next"><img src="./img/chevron-right.svg" alt="next"></div>',
    });
  }

  // スクロール時のフェードイン
  function scrollFade(){
    // ブラウザのスクロール量を取得してscrollTopという変数(箱)に入れる
    let scrollTop = $(window).scrollTop() // ブラウザのスクロール量を取得
    // ブラウザの高さを取得してwindowHeightという変数(箱)に入れる
    let windowHeight = $(window).height(); // ブラウザの高さを取得

    // .js-fadeが付いてる要素の数だけ繰り返し(.each)実行
    $(".js-fade").each( function(index){

      let boxPosition = $(this).offset().top; // .offset().topで対象の要素の、ブラウザのページ最上部からの位置を取得
      
      // .js-fadeが画面内に入ったらis-activeを付ける
      if(scrollTop + windowHeight > boxPosition){
        $(this).addClass("is-active");
      }
      
    });
  }


   




});