// JavaScript Document

/*--------------------------------------------------------
メガメニューの制御
--------------------------------------------------------*/
//var clickEventType = ((window.ontouchstart !== null) ? 'click' : 'touchend');
var clickEventType = 'click mouseend touchend';
var clickElement = $('li.menu_list');
var ua = window.navigator.userAgent;

$(function () {

//「閉じる」ボタンで開いているすべてのメガメニューを閉じる
function headerMenuClose() {
  clickElement.removeClass('active').removeClass('open').addClass('close').siblings().removeClass('open').addClass('close');
  $('.menu_contents').hide();
}    
$('button.menuClose, li.menu_list.active, li.menu_list.open').on(clickEventType, function () {
    event.stopPropagation(); //再開閉防止
    //$(this).off(); //再開閉防止？
    headerMenuClose();
        //ボタンを閉じる時にボタン裏側のスライダーのバナーが開くのを抑制
        $('.slick-slide a').css('pointer-events', 'none');
        setTimeout(function () {
          $('.slick-slide a').css('pointer-events', '');
        }, 500);
 });
 
if(ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1){
    //IEの場合、タッチパネルでタッチとマウスホバーが競合するためマウスホバーを使用不可
    $(document).off('mouseenter', 'li.menu_list');
} else {
    //マウスポインターをメニューにかざすと開く
    $(document).on('mouseenter', 'li.menu_list', function () {
      // 状態が close の場合は開く
      if ($(this).hasClass('close')) {
        headerMenuClose();
        $('.menu_contents').css('pointer-events', ''); //拡大縮小のタッチでメニューが閉じられないようにする対策の解除
        $(this).addClass('active').removeClass('close').addClass('open').siblings().removeClass('open').addClass('close');
        $(this).find('.menu_contents').stop().slideDown();
      }
    });
    //マウスポインターがメニューから外れると閉じる    
    $(document).on('mouseleave', 'li.menu_list', function () {
      // 状態が open の場合は閉じる
      if ($(this).hasClass('open')) {
       headerMenuClose();       
      }
    });
}

//クリックやタップで開閉
//イベントとして 'click mouseend touchend' この3つを同時に指定する。
//PCのマウスクリック、タブレットPCのクリック&タップ、モバイルのタップの全てに対応。
//また、pointerup等は動作がおかしくなるので、pointer系は使用禁止。
$(document).on('click mouseend touchend', 'li.menu_list', function () {
  // 状態が open の場合は閉じる
  if ($(this).hasClass('open')) {
    event.preventDefault(); //動作安定に必須
    headerMenuClose();
  }
  // 状態が close の場合は開く  
  else if ($(this).hasClass('close')) {
    headerMenuClose();
    event.preventDefault(); //動作安定に必須
    if (ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1) {
      $('.menu_contents').css('pointer-events', 'auto'); //IEではメニュー内のリンクが効かなくなるため
    } else {
      $('.menu_contents').css('pointer-events', 'none'); //IE以外は余白部分の拡大縮小のタッチでメニューが閉じられないようにする
    }
    $(this).addClass('active').removeClass('close').addClass('open').siblings().removeClass('open').addClass('close');
    $(this).find('.menu_contents').stop().slideDown();
  }
});

// メガメニュー内のリンクを有効化
$('.header__mainNav a, .menu_contents a').on(clickEventType, function () {
    //※ここの内容を簡略化するとクリックの開閉がおかしくなるので注意
    $('header').find('.menu_contents').hide();
    $('header').find('li').removeClass('active');
        //タッチ時にhoverのスタイルが残ってしまうのを防ぐ
        $('#openMenu2>li.no_menu_list').css('pointer-events', 'none');
        setTimeout(function () {
          $('#openMenu2>li.no_menu_list').css('pointer-events', '');
        }, 100);
    //window.location.href = $(this).attr('href');
    let link = $(this).attr('href');
    let linktarget = $(this).attr('target');
    // target="_blank"の有無を判別
    if ( linktarget == "_blank" ) {
        window.open(link, linktarget);
    } else {
        window.location.href = link;
    }
    $(document).blur();
    //event.preventDefault();
    //event.stopPropagation();
  });
});

/*--------------------------------------------------------
スライダーの設定 slick slider
--------------------------------------------------------*/
$(document).ready(function () {
  $('.slider').slick({
    autoplay: true, //自動的に動き出すか。初期値はfalse。
    infinite: true, //スライドをループさせるかどうか。初期値はtrue。
    speed: 700, //スライドのスピード。初期値は300。
    slidesToShow: 1, //スライドを画面に3枚見せる
    slidesToScroll: 1, //1回のスクロールで1枚の写真を移動して見せる
    prevtriangle: '<div class="slick-prev"></div>', //矢印部分PreviewのHTMLを変更
    nexttriangle: '<div class="slick-next"></div>', //矢印部分NextのHTMLを変更
    centerMode: true, //要素を中央ぞろえにする
    //centerPadding: "15%", //enterMode時に前後のスライドが見える幅
    variableWidth: true, //幅の違う画像の高さを揃えて表示
    dots: true, //下部ドットナビゲーションの表示
    lazyLoad: 'progressive', //画像遅延読み込み
  });
});

/*--------------------------------------------------------
タブメニューの制御
--------------------------------------------------------*/
$(document).ready(function () {
  //任意のタブにURLからリンクするための設定
  function GethashID(hashIDName) {
    if (hashIDName) {
      //タブ設定
      $('.list_tab li').find('a').each(function () { //タブ内のaタグ全てを取得
        var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得 
        if (idName == hashIDName) { //リンク元の指定されたURLのハッシュタグ（例）http://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
          var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
          $('.list_tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
          $(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
          //表示させるエリア設定
          $(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
          $(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加 
        }
      });
    }
  }

  //タブをクリックしたら
  $('.list_tab a').on('click', function () {
    var idName = $(this).attr('href'); //タブ内のリンク名を取得  
    GethashID(idName); //設定したタブの読み込みと
    return false; //aタグを無効にする
  });
});

//上記の動きをページが読み込まれたらすぐに動かす
$(window).on('load', function () {
  $('.list_tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
  $('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
  //var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得
  //GethashID(hashName); //設定したタブの読み込み
});

/*--------------------------------------------------------
トップへ戻るボタンの制御
--------------------------------------------------------*/
$(document).ready(function () {

//下から表示させる要素を指定
let $pagetop = $('.ScrollTop');

  $(window).on('scroll', function () {
    //スクロール位置を取得
    if ($(this).scrollTop() < 400) {
      $pagetop.removeClass('isActive');
    } else {
      $pagetop.addClass('isActive');
    }
  });
    
  /* タブメニューとアンカーがバッティングするため使用を保留
  //ページ内リンクスムーススクロール
    $('a[href^="#"]').on('click', function () {
      var href = $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $("html, body").animate({scrollTop: position}, 550, "swing");
      return false;
    });*/
});