jQuery(document).ready(function () {

////////////////プランページフォトギャラリー////////////////////
  function initializeSlick() {
      var windowWidth = window.innerWidth;
      
      // フォトスライダーの設定
      var photoSliderOptions = {
          autoplay: true,
          speed: 8000,
          autoplaySpeed: 0,
          swipe: false,
          cssEase: "linear",
          infinite: true,
          arrows: false,
          variableWidth: true,
          centerMode: false,
          pauseOnFocus: false,
          pauseOnHover: false,
          pauseOnDotsHover: false,
          centerPadding: '0px',
          responsive: [
            {
              breakpoint: 737,
              settings: {
                autoplay: true,
                speed: 1000,
                swipe: true,
                autoplaySpeed: 3000,
                cssEase: "ease",
                slidesToShow: 2,
                slidesToScroll: 1,
                infinite: true,
                arrows: false,
                variableWidth: true,
                centerMode: true,
                pauseOnFocus: true,
                pauseOnHover: true,
                centerPadding: '0px'//,
                //asNavFor: '.photo-thumbnail-list, .photo-comment-list'
              }
            }
          ]
      };

      if (windowWidth <= 737) {
          photoSliderOptions.slidesToShow = 1;
          photoSliderOptions.centerPadding = '60px';
          photoSliderOptions.asNavFor = '.photo-thumbnail-list';//, .photo-comment-list
      }

      jQuery('.photo-slider').not('.slick-initialized').slick(photoSliderOptions);

      // サムネイルスライダーの設定
      if (windowWidth <= 737 && !jQuery('.photo-thumbnail-list').hasClass('slick-initialized')) {
          jQuery('.photo-thumbnail-list').slick({
              slidesToShow: 5,
              arrows: false,
              autoplay: false,
              slidesToScroll: 1,
              speed: 1000,
              asNavFor: '.photo-slider', //, .photo-comment-list
              dots: false,
              centerMode: true,
              focusOnSelect: true,
              centerPadding: '20px'
          });
           // photo comment
          // jQuery('.photo-comment-list').slick({
          //     dots: false,
          //     infinite: true,
          //     arrows: false,
          //     speed: 1000,
          //     fade: true,
          //     autoplay: false,
          //     autoplaySpeed: 4000,
          //     slidesToShow: 1,
          //     slidesToScroll: 1,
          //     swipe: false,
          //     centerMode: true,
          //     centerPadding: '0',
          //     asNavFor: '.photo-thumbnail-list'
          // });
          // Before change event for dress thumbnail list
          jQuery('.photo-thumbnail-list').on("beforeChange", function (event, slick, currentSlide, nextSlide) {
              jQuery('.photo-thumbnail-list .slick-slide').each(function (index, el) {
                  var $this = jQuery(el),
                      slickindex = $this.attr("data-slick-index");
                  if (nextSlide == slick.slideCount - 1 && currentSlide == 0) {
                      if (slickindex == "-1") {
                          $this.addClass("is-active-next");
                      } else {
                          $this.removeClass("is-active-next");
                      }
                  } else if (nextSlide == 0) {
                      if (slickindex == slick.slideCount) {
                          $this.addClass("is-active-next");
                      } else {
                          $this.removeClass("is-active-next");
                      }
                  } else {
                      $this.removeClass("is-active-next");
                  }
              });
          });

      } else if (windowWidth > 737 && jQuery('.photo-thumbnail-list').hasClass('slick-initialized')) {
          jQuery('.photo-thumbnail-list').slick('unslick');
      }
  }

  // 初期化
  initializeSlick();

  // リサイズイベントで再初期化
  jQuery(window).resize(function() {
      initializeSlick();
  });

//////////////////////////////////////

  // 衣装ギャラリースライダー
  var slider = ".closet-slider";
  var thumbnailItem = ".thumbnail-list .thumbnail";
  
  jQuery(thumbnailItem).each(function () {
    var index = jQuery(thumbnailItem).index(this);
    jQuery(this).attr("data-index", index);
  });
  
  jQuery(slider).on('init', function (event, slick) {
    var index = jQuery(".slick-current").attr("data-slick-index");
    jQuery(thumbnailItem + '[data-index="' + index + '"]').addClass("thumbnail-current");
  });
  
  jQuery(slider).slick({
    dots: false,
    infinite: true,
    arrows: false,
    autoplay: true,
    speed: 1000,
    autoplaySpeed: 4000,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: false
  });
  
  jQuery(thumbnailItem).on('click', function () {
    var index = jQuery(this).attr("data-index");
    jQuery(slider).slick("slickGoTo", index, false);
  });
  
  jQuery(slider).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    jQuery(thumbnailItem).removeClass("thumbnail-current");
    jQuery(thumbnailItem + '[data-index="' + nextSlide + '"]').addClass("thumbnail-current");
  });

  // 衣装ギャラリー一覧
  jQuery('.select-studio li, .select-clothes li').on('click', function () {
    var parentClass = jQuery(this).parent().attr('class');
    jQuery('.' + parentClass + ' li').removeClass('is-selected');
    jQuery(this).addClass('is-selected');
  });
  
  jQuery('#studio-select, #clothes-select').on('change', function () {
    var url = jQuery(this).val();
    if (url !== "#") {
      window.location.href = url;
    }
  });

  // プランページ内インテリアボタン
  jQuery('.more-interior').on('click', function () {
    const target = jQuery(this).prev('.interior-photo-list');
    target.addClass('active');
    jQuery(this).hide();
  });

  //  QA 開閉
  jQuery('.qa-list dt').on('click', function () {
    var $dd = jQuery(this).next('dd');
    $dd.slideToggle();
  });

  // 投稿をもっと見る（wordpress側で制御する方向に移行予定
  var showInformation = 10;
  var $informationList = jQuery('.post-list li');
  var totalItems = $informationList.length;
  $informationList.hide().slice(0, showInformation).show();

  function checkMorePostVisibility() {
    if (jQuery('.more-post').hasClass('sp')) {
      if (jQuery(window).width() <= 737) {
        jQuery('.more-post').show();
      } else {
        jQuery('.more-post').hide();
      }
    } else {
      if (showInformation >= totalItems) {
        jQuery('.more-post').hide();
      } else {
        jQuery('.more-post').show();
      }
    }
  }

  checkMorePostVisibility();
  jQuery(window).resize(checkMorePostVisibility);

  jQuery('.more-post button').on('click', function () {
    var nextShowInformation = showInformation + 10;
    $informationList.slice(showInformation, nextShowInformation).fadeIn();
    showInformation = nextShowInformation;

    if (showInformation >= totalItems) {
      jQuery('.more-post').hide();
    }
  });

  // トップページ、プラウンページスライダー
  jQuery('.plan-slider, .mv-slider').slick({
    dots: false,
    infinite: true,
    arrows: false,
    autoplay: true,
    speed: 3000,
    autoplaySpeed: 4000,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
  });

  // レビュースライダー
  jQuery('.review-slider').slick({
    autoplay: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    arrows: false,
    variableWidth: true,
    centerMode: true,
  });

  // トップページおすすめ衣装タブ
  jQuery('.tabs li').click(function () {
    var $this = jQuery(this);
    if (!$this.hasClass('is-active')) {
      jQuery('.tabs li.is-active').removeClass('is-active');
      $this.addClass('is-active');
      jQuery('.tab-content.is-active').removeClass('is-active').hide();
      var index = $this.index();
      jQuery('.tab-content').eq(index).addClass('is-active').fadeIn();
    }
  });

  // セクションをまたいだ背景画像指定
  function setBgHeight(bgElementSelector, targetElementSelector) {
    var bgElement = jQuery(bgElementSelector);
    var targetElement = jQuery(targetElementSelector);

    if (bgElement.length === 0 || targetElement.length === 0) {
      return;
    }

    var bgElementHeight = bgElement.outerHeight();
    var targetElementHeight = targetElement.outerHeight();
    var totalHeight = bgElementHeight + targetElementHeight;

    var styleTagId = `bg-height-adjust-${bgElementSelector.replace(/[^a-z0-9]/gi, '-')}`;
    var styleTag = jQuery(`#${styleTagId}`);
    if (styleTag.length === 0) {
      styleTag = jQuery(`<style id="${styleTagId}"></style>`);
      jQuery('head').append(styleTag);
    }
    styleTag.html(`${bgElementSelector}::after { height: ${totalHeight}px; }`);
  }

  function updateBgHeights() {
    setBgHeight('.bg1-start', '.bg1-end');
    setBgHeight('.bg2-start', '.bg2-end');
  }

  jQuery(window).on('load resize', updateBgHeights);
  updateBgHeights();

  // フッターメニュー開閉
  jQuery('.sitemap-title').click(function () {
    jQuery('.sitemap-container').slideToggle();
  });

  // スクロールアニメーション
  jQuery(window).on('load scroll', debounce(function () {
    var windowHeight = jQuery(window).height();
    var scrollTop = jQuery(window).scrollTop();

    jQuery('.animation').each(function () {
      var elementTop = jQuery(this).offset().top;
      if (scrollTop > elementTop - windowHeight) {
        jQuery(this).addClass('is-animated');
      }
    });
  }, 10));

  function debounce(func, wait) {
    var timeout;
    return function () {
      clearTimeout(timeout);
      timeout = setTimeout(func, wait);
    };
  }

  // ヘッダー固定動作
  var lastScrollTop = 0;
  var $header = jQuery('.site-header');
  var headerHeight = $header.outerHeight();

  jQuery(window).scroll(function (event) {
    if (!jQuery('html').hasClass('is-menu-open')) {
      var st = jQuery(this).scrollTop();

      if (st > lastScrollTop && st > headerHeight) {
        $header.removeClass('fixed');
      } else if (st < lastScrollTop) {
        $header.addClass('fixed');
      }
      lastScrollTop = st;
    }
  });

  // キャンペーンスライダーの調整
  var showNum = 3;

  function initSlick() {
    jQuery('.campaign-slider').slick({
      autoplay: true,
      autoplaySpeed: 3000,
      slidesToShow: 2,
      slidesToScroll: 1,
      infinite: true,
      arrows: false,
      variableWidth: true,
      centerMode: true,
      centerPadding: '0px',
      responsive: [{
          breakpoint: 1024,
          settings: {
            autoplay: true,
            autoplaySpeed: 3000,
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            arrows: false,
            variableWidth: true,
            centerMode: true,
            centerPadding: '0px',
          }
        },
        {
          breakpoint: 737,
          settings: "unslick"
        }
      ]
    }).on('breakpoint', function (event, slick, breakpoint) {
      if (breakpoint <= 737) {
        adjustCampaignList();
        jQuery(window).on('resize', adjustCampaignList);
      }
    });

    if (jQuery(window).width() <= 737) {
      adjustCampaignList();
    } else {
      checkAndSetLeftPosition();
    }
  }

  function adjustCampaignList() {
    if (jQuery(window).width() <= 737) {
      jQuery('.campaign-list-container').each(function (index) {
        if (index < showNum) {
          jQuery(this).show();
        } else {
          jQuery(this).hide();
        }
      });

      if (jQuery('.campaign-list-container:visible').length < jQuery('.campaign-list-container').length) {
        jQuery('.more').show();
      } else {
        jQuery('.more').hide();
      }
    } else {
      jQuery('.campaign-list-container').show();
      jQuery('.more').hide();
    }
  }

  function setLeftPosition() {
    var containerWidth = jQuery('.campaign-slider .campaign-list-container').width();
    var leftPosition = -containerWidth / 2;
    jQuery('.campaign-slider .slick-track').css('left', leftPosition + 'px');
  }

  function checkAndSetLeftPosition() {
    var windowWidth = jQuery(window).width();
    if (windowWidth > 1024) {
      setLeftPosition();
    } else {
      jQuery('.campaign-slider .slick-track').css('left', '');
    }
  }

  var currentIndex = showNum;

  jQuery('.more button').on('click', function () {
    currentIndex += showNum;
    jQuery('.campaign-list-container').each(function (index) {
      if (index < currentIndex) {
        jQuery(this).show();
      }
    });

    if (currentIndex >= jQuery('.campaign-list-container').length) {
      jQuery('.more').hide();
    }
  });

  initSlick();

  jQuery(window).on('resize orientationchange', function () {
    jQuery('.campaign-slider').slick('resize');
    checkAndSetLeftPosition();
  });

  // フッターフローティングボタン
  function checkVisibility() {
    const target = jQuery('.studio-info').length ? jQuery('.studio-info') : jQuery('.footer-btn-nav');
    const floatButton = jQuery('.float-conversion-btn');

    const windowBottom = jQuery(window).scrollTop() + jQuery(window).height();
    const studioInfoBottom = target.offset().top + target.outerHeight();

    if (windowBottom >= studioInfoBottom) {
      floatButton.addClass('static');
    } else {
      floatButton.removeClass('static');
    }

    const floatButtonBottom = floatButton.offset().top + floatButton.outerHeight();

    if (floatButton.hasClass('static') && floatButtonBottom > windowBottom) {
      floatButton.removeClass('static');
    }
  }

  checkVisibility();
  jQuery(window).on('scroll', checkVisibility);
  jQuery(window).on('resize', checkVisibility);

  // ヘッダーメニュー
  const menu = {
    __isOpen: false,
    init: function () {
      this.$menuWrap = jQuery(".site-menu-wrap");
      this.$menuContent = jQuery(".site-menu");
      this.$button = jQuery(".site-header .site-menu-button");
      this.setupInitialTransforms();
      this.bindEvents();
    },
    setupInitialTransforms: function () {
      jQuery(".js--menu-child .t").css({
        transform: 'translateY(60px)',
        opacity: 0
      });
      jQuery(".js--menu").css({
        transform: 'translateY(60px)',
        opacity: 0
      });
    },
    bindEvents: function () {
      const self = this;
      this.$button.on("click", function () {
        self.__isOpen ? self.onCloseUp() : self.onOpen();
      });
    },
    onOpen: function () {
      this.__isOpen = true;
      jQuery("html").addClass("is-menu-open");
      this.$menuWrap.css({
        display: 'block',
        transform: "translateY(100%)",
        opacity: 1
      });
      this.$menuContent.css({
        transform: "translateY(-100%)"
      });
      setTimeout(() => {
        this.$menuWrap.css({
          transform: "translateY(0)",
          opacity: 1
        });
        this.$menuContent.css({
          transform: "translateY(0)"
        });
        this.animateChildrenOpen();
      }, 10);
    },
    onCloseUp: function () {
      this.closeMenu("-100%", "100%", true);
    },
    onCloseDown: function () {
      this.closeMenu("100%", "-100%", false);
    },
    closeMenu: function (wrapY, contentY, isUp) {
      jQuery("html").removeClass("is-menu-open");
      const self = this;
      this.$menuWrap.css("transform", `translateY(${wrapY})`);
      this.$menuContent.css("transform", `translateY(${contentY})`);
      this.animateChildrenClose();
      setTimeout(function () {
        if (isUp) {
          self.$menuWrap.css({
            display: 'none',
            opacity: 0
          });
        }
        self.$menuWrap.css("transform", "translateY(100%)");
        self.$menuContent.css("transform", "translateY(-100%)");
        self.__isOpen = false;
      }, 800);
    },
    animateChildrenOpen: function () {
      jQuery(".js--menu-child").each(function (menuChildIndex, menuChildElement) {
        jQuery(menuChildElement).children().each(function (childIndex, childElement) {
          const $childElement = jQuery(childElement).find(".t");
          if ($childElement.length) {
            setTimeout(function () {
              $childElement.css({
                transform: 'translateY(0)',
                opacity: 1
              });
            }, 30 * childIndex);
          }
        });
      });
      jQuery(".js--menu").each(function (menuIndex, menuElement) {
        setTimeout(function () {
          jQuery(menuElement).css({
            transform: 'translateY(0)',
            opacity: 1
          });
        }, 30 * menuIndex);
      });
    },
    animateChildrenClose: function () {
      jQuery(".js--menu-child").each(function (menuChildIndex, menuChildElement) {
        jQuery(menuChildElement).children().each(function (childIndex, childElement) {
          const $childElement = jQuery(childElement).find(".t");
          if ($childElement.length) {
            setTimeout(function () {
              $childElement.css({
                transform: 'translateY(-60px)',
                opacity: 0
              });
              setTimeout(function () {
                $childElement.css({
                  transform: 'translateY(60px)'
                });
              }, 600);
            }, 0);
          }
        });
      });
      jQuery(".js--menu").each(function (menuIndex, menuElement) {
        setTimeout(function () {
          jQuery(menuElement).css({
            transform: 'translateY(-60px)',
            opacity: 0
          });
          setTimeout(function () {
            jQuery(menuElement).css({
              transform: 'translateY(60px)'
            });
          }, 600);
        }, 0);
      });
    }
  };

  menu.init();
});