(() => {
  const { EventManager } = ShopbySkin;

  EventManager.on('PAGE_LOAD_COMPLETED', () => {
    $(document).ready(function(){
      // 스크롤과 페이지 로드 시 실행될 함수를 정의
      function adjustSideBtnsPosition() {
          var windowHeight = $(window).height(); // 창의 높이
          var scrollPosition = $(window).scrollTop(); // 현재 스크롤 위치
          var sideBtnsOriginalBottom = 68; // .side_btns 원래 bottom 위치
          var bottomLimit = 487; // 스크롤 내렸을 때 bottom 위치
          
          var sideBtnsHeight = $('.side_btns').outerHeight(); // .side_btns의 높이
          var documentHeight = $(document).height(); // 문서 전체 높이

          // 스크롤 위치에 따라 .side_btns의 위치를 조정
          if(documentHeight - windowHeight - scrollPosition <= bottomLimit) {
              // 스크롤이 아래쪽에 도달했을 때
              var translateY = bottomLimit - (documentHeight - windowHeight - scrollPosition) - sideBtnsOriginalBottom;
              $('.side_btns').css({
                  'transform': 'translateY(-' + translateY + 'px)',
                  'bottom': sideBtnsOriginalBottom + 'px'
              });
          } else {
              // 스크롤이 아래쪽에 도달하지 않았을 때
              $('.side_btns').css({
                  'transform': 'translateY(0)',
                  'bottom': sideBtnsOriginalBottom + 'px'
              });
          }
      }
      $(window).scroll(adjustSideBtnsPosition); // 스크롤할 때 함수 실행
      adjustSideBtnsPosition(); // 페이지 로드 시 함수 실행
      
    });


  });

  // Mutation Observer

  // 감시자의 설정
  let option = {
    attributes: true,
    childList: true,
    //characterData: true,
  };

  // 감시자 인스턴스 만들기
  let observer = new MutationObserver((mutations) => {
    // 노드가 변경 됐을 때의 작업
    mutations.forEach(recode => {
      recode.addedNodes.forEach(node => {
        if(node.nodeType === 1 && node.getAttribute('id') === 'ch-plugin'){
          observer.observe(document.querySelector('#ch-plugin'), option);
          $('#ch-plugin').removeAttr('style');
          $('#ch-plugin').addClass('show');
          $('.right_banner button.go_top').addClass('show');
        }
      });
      if(recode.target.getAttribute('id') == 'ch-plugin'){
        $('#ch-plugin').removeAttr('style');
        $('#ch-plugin').addClass('show');
        $('.right_banner button.go_top').addClass('show');
      }
    });
  })

  // 대상 노드에 감시자 전달
  observer.observe(document.querySelector('body'), option);
})();