$(function () {
  const topSlider = $("#js-topSlider").slick({
    centerMode: true,
    variableWidth: true,
    autoplay: true,
    dots: false,
    prevArrow: $('#jsTopSliderPrev'),
    nextArrow: $('#jsTopSliderNext'),
    responsive: [
      {
        breakpoint: 768,
        settings: {
          centerMode: false,
          variableWidth: false,
        },
      },
    ],
  });

  topSlider
  .on('beforeChange',function ( event, slick, currentSlide){
      $(".js-topSliderNavButton").eq(currentSlide).removeClass('-active');
  })
  .on('afterChange',function ( event, slick, currentSlide){
      $(".js-topSliderNavButton").eq(currentSlide).addClass('-active');
  })
  $(".js-topSliderNavButton").on('click touchend',function(){
    const btn = $(this);
    const idx = btn.index();
    btn.addClass('-active');
    topSlider.slick( 'slickGoTo', idx, false );
  })

  $('#js-exampleSlider').slick({
    variableWidth: true,
    autoplay: true,
    speed: 10000,
    autoplaySpeed: 0,
    cssEase: 'linear',
  })

});

//bp
getBp =function() {
  let ret = false;
  const cur = $(window).width();
  const bp = [0, 544, 768, 992, 1280];
  for (var i = 0; i < bp.length; i++) {
    if (cur < bp[i] && !ret){
      ret = i;
    }
  }
  if(!ret){
    ret = bp.length;
  }
  return ret;
}



//spメニュー
const initSpNav = function () {
  $("#js-hamburger").on("click", function () {
    return toggleSpNav();
  });
  $(".js-navparent").on("click touchstart mousedown", function (event) {
    event.preventDefault;
  });
  $(".js-navparent").on(" mouseup", function(){
    event.preventDefault;
    const bp = getBp();
    if(bp<3) {
      return false;
    }
    return accordionMenuToggle(event);
  })
  $(".js-navparent").on("touchend", function (event) {
    event.preventDefault;
    return accordionMenuToggle(event);
  });
  $(".js-navparent").on("mouseenter", function (event) {
    const bp = getBp();
    if (bp<3) {
      return false
    }
    return accordionMenuOpen(event);
  });
  // $(".js-navchildren").on("mouseleave", function(event) {
  //   const bp = getBp();
  //   if (bp<3) {
  //     return false
  //   }
  //   return accordionMenuClose(event);
  // })
  $(".js-navchildren").on("mouseenter", function (event) {
    const bp = getBp();
    if (bp<3) {
      return false
    }
    return accordionMenuOpen(event);
  });
  $(".js-navchildren").parent().on("mouseleave", function(event) {
    const bp = getBp();
    if (bp<3) {
      return false
    }
    return accordionMenuClose(event);
  })
};
initSpNav();

const toggleSpNav = function () {
  let btn = $("#js-hamburger");
  let stat = btn.attr("aria-expanded");
  if (stat === "false") {
    return openSpNav();
  } else {
    return closeSpNav();
  }
};

const accordionMenuToggle = function (event) {
  event.preventDefault();
  const btn = $(event.target);
  btn.parent().siblings().find('.js-navchildren').stop().slideUp();
  btn.next(".js-navchildren").slideToggle();
}
const accordionMenuOpen = function(event) {
  event.preventDefault();
  const btn = $(event.target);
  btn.parent().siblings().find('.js-navchildren').stop().slideUp();
  btn.next(".js-navchildren").slideDown();
}
const accordionMenuClose = function(event) {
  // event.preventDefault();
  // $target = $(event.target);
  // const child = $target.hasClass('Gnav__childLink')?$target.closest(".js-navchildren"):$target.parent().find(".js-navchildren");
  // console.log($target);
  // child.stop().slideUp();
  event.preventDefault();
  // console.log($(event.target));
  const child = $(event.target).closest(".Gnav__item").find('.js-navchildren');
  child.stop().slideUp();
}




const openSpNav = function () {
  let btn = $("#js-hamburger");
  let nav = $("#js-gnav");
  btn.addClass("-open");
  nav.addClass("-open");
  btn.attr("aria-expanded", "true");
};
const closeSpNav = function () {
  let btn = $("#js-hamburger");
  let nav = $("#js-gnav");
  btn.removeClass("-open");
  nav.removeClass("-open");
  btn.attr("aria-expanded", "false");
};

const loadingView = function() {
  const $window = $(window);
  const $overlay = $('#js-loading-overlay');
  const $wrapper = $('#js-wrapper');
  const _fadeOut = function() {
    $overlay.fadeOut(500);
  }
  const _wrapperFadeIn = function() {
    if($wrapper.hasClass('-wait')) {
      $wrapper.fadeIn(700);
    }
  }
  $window.on('load', function() {
    setTimeout(function(){
      _fadeOut();
      _wrapperFadeIn();
      scrollAnim(1);
      userParam.navTop = $('#js-pageAnchor').length?$('#js-pageAnchor').offset().top:0;
    }, 1000);
  })
}
loadingView();

const scrollAnim = function(arg) {
  /**
   * @param arg window初回読み込み時のみ1
   */
  const obj = document.querySelectorAll('.js-scroll');
  const scrollFunc = function(){
    for(let i = 0; i<obj.length; i++) {
      const elm = obj[i];
      const top = elm.getBoundingClientRect().top;
      const scroll = window.pageYOffset || document.documentElement.scrollTop;
      const offset = top + scroll;
      const windowHeight = window.innerHeight;
      if( scroll > offset - windowHeight + 200 ) {
        elm.classList.add('-scrolled');
      }
    }
  }
  if(arg) {
    return scrollFunc();
  }
  window.addEventListener('load', function() {
    // scrollFunc();
  });
  window.addEventListener('scroll', function() {
    scrollFunc();
  });
  window.addEventListener('resize', function() {
    setTimeout(function(){
      scrollFunc();
    }, 300 );
  })
}
scrollAnim();

const commonHeading = function() {
  const obj = $('.CommonHeading');
  if (!obj) {
    return;
  }
  obj.each(function(){
    const $elm = $(this);
    const text = $elm.text();
    const dotDelay = 0.5;
    $elm.html('');
    $ttl = $('<span class="CommonHeading__text"></span>');
    for(let i =0;i<text.length;i++){
      let char = $('<span class="CommonHeading__char"></span>').text(text.charAt(i)).css('animation-delay',(i/10)+'s');
      $ttl.append(char);
    }
    $ttl.appendTo($elm);
    for(let i=0; i<5; i++) {
      $('<span class="CommonHeading__dot"></span>').css('animation-delay',( dotDelay)+'s').appendTo($elm);
    }
  });
}
$(function(){
  commonHeading();
})


const userParam = {
  scrollPointer : 0,
  navTop: 0,
  marginTop: 50,
  headerHeight: 120,
  pageMainTop: 0,
}
const initPageAnchor = function() {
  const $anchor = $('#js-pageAnchor');
  if ( $anchor.length < 1 ) {
      return false;
  }
  const $content = $('#js-pageMain');
  if($content.length < 1 ) {
      return false;
  }
  const $heading = $content.find('h2');
  if($heading.length < 1 ) {
      return false;
  }
  let cnt = 1;
  $heading.each( function(){
      const $this = $(this);
      const target = 'page-'+cnt;
      $this.attr('id',target);
      const $item = $('<li>').addClass('PageAnchor__item');
      const $link = $('<a>').addClass('PageAnchor__link')
      .attr('href','#'+target)
      .text($this.text());
      $item.append($link).appendTo($anchor);
      cnt++;
  });
  const pageTitle = $('#js-pageTitle').text();
  const $link01 = $('<a>').addClass('PageAnchor__link')
      .attr('href','#js-pageTop')
      .text(pageTitle);
  const $item01 = $('<li>').addClass('PageAnchor__item -current').append($link01).prependTo($anchor);
  userParam.navTop = $('#js-pageAnchor').offset().top;
  const _upDate = function(scroll,scrollPointer) {
      const $_anchorItems = $('.PageAnchor__item');
      let pos = [0];
      let pointer = 0;
      for(let i=0; i<$heading.length; i++) {
          pos[i] = $heading[i].offsetTop - userParam.marginTop - userParam.headerHeight;
          if ( pos[i-1] < scroll && scroll < pos[i] ) {
              pointer = i;
          } else if ( scroll >= pos[i] ) {
              pointer = i + 1;
          }
      }
      if ( pointer != scrollPointer ) {
          $_anchorItems.removeClass('-current');
          $_anchorItems.eq(pointer).addClass('-current');
      }
      userParam.scrollPointer = pointer;
  }

  const _navControl = function(scroll) {
      // const navTop = userParam.navTop;
      const navLeft = $anchor.parent().offset().left;
      const navHeight = $anchor.height();
      const contentBottom = $('#js-footerLink').offset().top;
      // const topPos = Math.min( userParam.marginTop + userParam.headerHeight, contentBottom - scroll - navHeight - userParam.marginTop);
      // userParam.navTop = topPos;
      let topPos = 0;
      if ( scroll < userParam.pageMainTop - userParam.headerHeight - userParam.marginTop ) {
        $anchor.css({
          'position': 'static',
        }); 
        return;
      } else {
        topPos = Math.min(userParam.headerHeight + userParam.marginTop, contentBottom - userParam.marginTop - navHeight - scroll);
        $anchor.css({
          'position': 'fixed',
          'left':navLeft + 'px',
          'top': topPos+ 'px',
        }); 
      }
}
const _updatePosParam = function() {
  userParam.pageMainTop = $('#js-pageMain').offset().top;
  userParam.headerHeight = $('#js-header').height();
}
$(window).on('scroll', function(){
      _updatePosParam();
      const scroll = window.pageYOffset || document.documentElement.scrollTop;
      _upDate(scroll,userParam.scrollPointer);
      _navControl(scroll);
  })
  $(window).on('load', function(){
      _updatePosParam();
      const scroll = window.pageYOffset || document.documentElement.scrollTop;
      _upDate(scroll,userParam.scrollPointer);
      _navControl(scroll);
  })
  $(window).on('resize', function(){
      _updatePosParam();
      const scroll = window.pageYOffset || document.documentElement.scrollTop;
      _upDate(scroll,userParam.scrollPointer);
      _navControl(scroll);
  })
}
$(function(){
  if($('#js-pageAnchor').length > 0 ) {
    initPageAnchor()
  }
})


//スムーススクロール
$(function () {
  $('a[href^="#"]').click(function (event) {
    const $target = $($(this).attr("href"));
    const space = ($target.attr('id')=='js-wrapper')?0:userParam.headerHeight+userParam.marginTop;
    $("html,body").animate(
      {
        scrollTop: $($(this).attr("href")).offset().top - space,
      },
      1000,
      "swing"
    );
    return false;
  });
});