// ハンバーガーメニュー
// --------------------------------------------------------------
$(function () {
  $(".js-btn").on("click", function () {
    // js-btnクラスをクリックすると、
    $(".container , .btn-line").toggleClass("open"); // メニューとバーガーの線にopenクラスをつけ外しする
  });
});

// ふわっとさせる
// --------------------------------------------------------------
// 動きのきっかけとなるアニメーションの名前を定義
function fadeAnime() {
  // ふわっ
  $(".fadeUpTrigger").each(function () {
    //fadeUpTriggerというクラス名が
    var elemPos = $(this).offset().top - 50; //要素より、50px上の
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight) {
      $(this).addClass("fadeUp"); // 画面内に入ったらfadeUpというクラス名を追記
    } else {
      $(this).removeClass("fadeUp"); // 画面外に出たらfadeUpというクラス名を外す
    }
  });
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述

// 順番に現れる
// --------------------------------------------------------------

function delayScrollAnime() {
  var time = 0.2; //遅延時間を増やす秒数の値
  var value = time;
  $(".delayScroll").each(function () {
    var parent = this; //親要素を取得
    var elemPos = $(this).offset().top; //要素の位置まで来たら
    var scroll = $(window).scrollTop(); //スクロール値を取得
    var windowHeight = $(window).height(); //画面の高さを取得
    var childs = $(this).children(); //子要素を取得

    if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
      //指定領域内にスクロールが入ったらまた親要素にクラスplayがなければ
      $(childs).each(function () {
        if (!$(this).hasClass("fadeUp")) {
          //アニメーションのクラス名が指定されているかどうかをチェック

          $(parent).addClass("play"); //親要素にクラス名playを追加
          $(this).css("animation-delay", value + "s"); //アニメーション遅延のCSS animation-delayを追加し
          $(this).addClass("fadeUp"); //アニメーションのクラス名を追加
          value = value + time; //delay時間を増加させる

          //全ての処理を終わったらplayを外す
          var index = $(childs).index(this);
          if (childs.length - 1 == index) {
            $(parent).removeClass("play");
          }
        }
      });
    } else {
      $(childs).removeClass("fadeUp"); //アニメーションのクラス名を削除
      value = time; //delay初期値の数値に戻す
    }
  });
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  delayScrollAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
  delayScrollAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述

// Topへ戻るボタン
// --------------------------------------------------------------
$(function () {
  var showFlag = false;
  var topBtn = $("#page-top");
  topBtn.css("bottom", "-100px");
  var showFlag = false;
  //スクロールが100に達したらボタン表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      if (showFlag == false) {
        showFlag = true;
        topBtn.stop().animate({ bottom: "20px" }, 200);
      }
    } else {
      if (showFlag) {
        showFlag = false;
        topBtn.stop().animate({ bottom: "-100px" }, 200);
      }
    }
  });
  //スクロールしてトップ
  topBtn.click(function () {
    $("body,html").animate(
      {
        scrollTop: 0,
      },
      500
    );
    return false;
  });
});

// bgのvideoタグ　再生調整
// --------------------------------------------------------------

// video = document.getElementsByClassName('bg-video', 'bg-video-bottom');
// video.playbackRate = 0.1; //速度調整

// 【エフェクトを表示させない場合の設定】
// --------------------------------------------------------------
// alert(getParam('effect_id'));
// var param = location.search;

if (getParam("effect_id") == "none") {
  $("#effect").addClass("none");
}

function getParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return "";
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// if (document.location.search = 'effect_id') {
//   '<style>body#loc{display:none;}'
// }

// 【エフェクト部分】
// location.html他
// 　scrollするとMVがフェードアウト
// --------------------------------------------------------------
var startPos = 0,
  winScrollTop = 0;
$(window).on("scroll", function () {
  winScrollTop = $(this).scrollTop();
  if (winScrollTop >= startPos) {
    $("#effect").fadeOut(1000);
  } else {
  }
  startPos = winScrollTop;
});

$("#effect").append("<style>body#loc{display:none;}");
$(window).on("load", function () {
  $("body").delay(600).fadeIn("slow");
});

//plan slider
$(function () {
  $(".plan__slider-big").slick({
    // autoplay: true,
    arrows: false,
    speed: 500,
    asNavFor: ".plan__slider-list",
    slidesToShow: 1,
  });
  $(".plan__slider-list").slick({
    asNavFor: ".plan__slider-big",
    focusOnSelect: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    focusOnSelect: true,
    prevArrow: '<div class="slick-prev"></div>',
    nextArrow: '<div class="slick-next"></div>',
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 550,
        settings: {
          slidesToShow: 3,
        },
      },
    ],
  });
});

//room modal
$(".room-plan-list__link").modaal({
  type: "image",
  overlay_close: true,
  before_open: function () {
    $("html").css("overflow-y", "hidden");
  },
  after_close: function () {
    $("html").css("overflow-y", "scroll");
  },
});

$(".gallery").modaal({
  type: "image",
  overlay_close: true, //モーダル背景クリック時に閉じるか
  before_open: function () {
    // モーダルが開く前に行う動作
    $("html").css("overflow-y", "hidden"); /*縦スクロールバーを出さない*/
  },
  after_close: function () {
    // モーダルが閉じた後に行う動作
    $("html").css("overflow-y", "scroll"); /*縦スクロールバーを出す*/
  },
});

// after the movie fadesin
// --------------------------------------------------------------
// $(function () {

//   const opVideo = $('#opv').get(0);
//   $('#opv-wrap').fadeIn(1000);

//   opVideo.addEventListener('loadedmetadata', function () {
//     const playTime = opVideo.duration * 1000 - 1000;

//     // 確認用
//     console.log('動画の時間（長さ）： ' + opVideo.duration);
//     console.log('動画の表示時間： ' + playTime);

//     setTimeout(function () {
//       $('#opv-wrap').fadeIn(1000, function () {
//         $('#header').fadeIn(10000);
//       });
//     }, playTime);

//   });

// });

// $('#opv-wrap').fadeIn(1000);
// $('#header').delay(16000).queue(function () {
//   $(this).css('display', 'block');
// });

(function () {
  const fh = document.getElementById("fixed-header");
  window.addEventListener("scroll", () => {
    if (window.pageYOffset > 200) {
      fh.classList.add("is-show");
    } else {
      fh.classList.remove("is-show");
    }
  });
})();

// トップのエフェクト ページ開くと表示されその後フェードアウト
if (sessionStorage.getItem("startMv")) {
  $(".start").css("display", "none");
  // トップの動画の遅延再生
  $("#opv")
    .delay(0)
    .queue(function (next) {
      $("#opv").get(0).play();
      next();
    });
  $("#opv_sp")
    .delay(0)
    .queue(function (next) {
      $("#opv_sp").get(0).play();
      next();
    });
  // ヘッダーの遅延表示
  if (window.matchMedia("(max-width: 767px)").matches) {
    //スマホ処理
    // $('#opv-wrap').fadeIn(1000);
    $("#header")
      .delay(1)
      .queue(function () {
        $(this).css("display", "block");
      });
  } else if (window.matchMedia("(min-width:768px)").matches) {
    //PC処理
    // $('#opv-wrap').fadeIn(2000);
    $("#header")
      .delay(3800)
      .queue(function () {
        $(this).css("display", "block");
      });
  }
}
$(window).on("load", function () {
  if (!sessionStorage.getItem("startMv")) {
    sessionStorage.setItem("startMv", "start");
    setTimeout(function () {
      $(".start p").fadeIn(450);
    }, 0); //0.5秒後にロゴをフェードイン!
    setTimeout(function () {
      $(".start").fadeOut(500);
    }, 1500); //2.5秒後にロゴ含め真っ白背景をフェードアウト！

    // トップの動画の遅延再生
    $("#opv")
      .delay(2500)
      .queue(function (next) {
        $("#opv").get(0).play();
        next();
      });
    $("#opv_sp")
      .delay(2500)
      .queue(function (next) {
        $("#opv_sp").get(0).play();
        next();
      });

      // ヘッダーの遅延表示
  if (window.matchMedia("(max-width: 767px)").matches) {
    //スマホ処理
    // $('#opv-wrap').fadeIn(1000);
    $("#header")
      .delay(1)
      .queue(function () {
        $(this).css("display", "block");
      });
  } else if (window.matchMedia("(min-width:768px)").matches) {
    //PC処理
    // $('#opv-wrap').fadeIn(2000);
    $("#header")
      .delay(10000)
      .queue(function () {
        $(this).css("display", "block");
      });
  }
  }
});


//3. 画像のモーダル
$(".rp").modaal({
	type: 'image',
	overlay_close:true,//モーダル背景クリック時に閉じるか
	before_open:function(){// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
	},
	after_close:function(){// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
	}
});


// ページ内リンク
$('#page-link a[href*="#"]').click(function () {//全てのページ内リンクに適用させたい場合はa[href*="#"]のみでもOK
	var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
	var pos = $(elmHash).offset().top-100;//idの上部の距離からHeaderの高さを引いた値を取得
	$('body,html').animate({scrollTop: pos}, 500); //取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール
	return false;
});

$('#page-link2 a[href*="#"]').click(function () {//全てのページ内リンクに適用させたい場合はa[href*="#"]のみでもOK
	var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
	var pos = $(elmHash).offset().top-100;//idの上部の距離からHeaderの高さを引いた値を取得
	$('body,html').animate({scrollTop: pos}, 500); //取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール
	return false;
});