$( document ).ready( function() {


  //! scroll header 
  let headerHeight = $('.header').innerHeight();


 
  
  $(window).scroll(function(){
  let windowHeight = $(window).scrollTop();


      if(headerHeight <= windowHeight){
          $('.header').addClass('active');
      } else {
          $('.header').removeClass('active');
      }
  });


//! volume sec05


      $(function(){
          $('.volume_collagen').hide();
          $('.volume_collagen00').show();
          $('.volume_collagen_list1 a').click(function () {
              $('.collagen_thumbnail1 > img').hide().filter(this.hash).fadeIn();
            $('.volume_collagen_list1 a').removeClass('active');
            $(this).addClass('active');
            return false;
          }).filter(':eq(0)').click();
      });
      
      $(function(){
          $('.volume_collagen').hide();
          $('.volume_collagen00').show();
          $('.volume_collagen_list2 a').click(function () {
              $('.collagen_thumbnail2 > img').hide().filter(this.hash).fadeIn();
            $('.volume_collagen_list2 a').removeClass('active');
            $(this).addClass('active');
            return false;
          }).filter(':eq(0)').click();
      });


      $(function(){
        $('.volume_collagen').hide();
        $('.volume_collagen00').show();
        $('.volume_collagen_list3 a').click(function () {
            $('.collagen_thumbnail3 > img').hide().filter(this.hash).fadeIn();
          $('.volume_collagen_list3 a').removeClass('active');
          $(this).addClass('active');
          return false;
        }).filter(':eq(0)').click();
    });
      
      $(function(){
          $('.volume_collagen').hide();
          $('.volume_collagen00').show();
          $('.volume_collagen_list4 a').click(function () {
              $('.collagen_thumbnail4 > img').hide().filter(this.hash).fadeIn();
            $('.volume_collagen_list4 a').removeClass('active');
            $(this).addClass('active');
            return false;
          }).filter(':eq(0)').click();
      });
      
     
     




  $('.toggle_content').slideUp()
  $( '.toggle_tit').click( function() {
      $(this).siblings('.toggle_content').slideToggle()
      $(this).toggleClass('show');
    } );






    $('.sec11 .faq_contant').slideUp()
  $( '.sec11 .faq_tit').click( function() {
      $(this).siblings('.faq_contant').slideToggle()
      $(this).toggleClass('show');
    } );




    
var offsetTop = 0;
if($(".his-content").is(":visible")) {
  $(window).on('scroll', function (){
    offsetTop = $(".active .his-content .his-thumb").offset().top;
  });
  $(document).ready(function(){
    $(document).bind("scroll",scrollEventListener);


    setTimeout(scrollEventListener,100);
  });


  function scrollEventListener(e){
    var _num = $(window).scrollTop()+$(window).height()-offsetTop-($(window).height()/3);
    var _onHeight = $(".his-content").height();
    if(_num<35) _num = 35;
    if(_num>$(".active .his-content").height()) _num = $(".active .his-content").height();


    TweenMax.to($(".active .his-content .his-thumb"),0.3,{height:_num, ease:Cubic.easeOut});


  }
}
$(function(){
  $('.sec06_tabcontent > div').hide();
  $('.sec06_tabnav a').click(function () {
    $('.sec06_tabcontent > div').hide().filter(this.hash).fadeIn();
    $('.sec06_tabnav a').removeClass('active');
    $(this).addClass('active');
    return false;
  }).filter(':eq(0)').click();
  });


  $('.sec10 .faq_contant').slideUp()


  $('.sec11 .faq_contant').slideUp()




    $('.face_content > div').hide();
    $('.face_nav a').click(function () {
      $('.face_content > div').hide().filter(this.hash).show();
      $('.face_nav a').removeClass('active');
      $(this).addClass('active');
      return false;
    }).filter(':eq(0)').click();



   $(function(){
      $('.program_contnent > div').hide();
      $('.program_nav a').click(function () {
        $('.program_contnent > div').hide().filter(this.hash).fadeIn();
        $('.program_nav a').removeClass('active');
        $(this).addClass('active');
        return false;
      }).filter(':eq(0)').click();
      });





    //! facesmall sec09
    $(function(){
      $('.face_program_contnent > div').hide();
      $('.face_program_nav a').click(function () {
        $('.face_program_contnent > div').hide().filter(this.hash).fadeIn();
        $('.face_program_nav a').removeClass('active');
        $(this).addClass('active');
        return false;
      }).filter(':eq(0)').click();
      });
  
  //!toggle_list 
      $('.toggle_list .faq_contant').slideUp()
      $( '.toggle_list .faq_tit').click( function() {
          $(this).siblings('.faq_contant').slideToggle()
          $(this).toggleClass('show');
        } );
          //! bodysmall sec08
        $(function(){
          $('.body_Before_contnent > div').hide();
          $('.body_Before_nav a').click(function () {
            $('.body_Before_contnent > div').hide().filter(this.hash).fadeIn();
            $('.body_Before_nav a').removeClass('active');
            $(this).addClass('active');
            return false;
          }).filter(':eq(0)').click();
          });
      
//! lefting sec04
$(function(){
    $('.lifting_program_contnent > div').hide();
    $('.lifting_program_nav a').click(function () {
      $('.lifting_program_contnent > div').hide().filter(this.hash).fadeIn();
      $('.lifting_program_nav a').removeClass('active');
      $(this).addClass('active');
      return false;
    }).filter(':eq(0)').click();
    });
  });
  
  
  //! lefting sec04
  $(function(){
    $('.silhouette_program_contnent > div').hide();
    $('.silhouette_program_nav a').click(function () {
      $('.silhouette_program_contnent > div').hide().filter(this.hash).fadeIn();
      $('.silhouette_program_nav a').removeClass('active');
      $(this).addClass('active');
      return false;
    }).filter(':eq(0)').click();
  
    
    });
  
  
  
  
    $(function(){
        $('.ulthermage_program_contnent > div').hide();
        $('.ulthermage_program_nav a').click(function () {
          $('.ulthermage_program_contnent > div').hide().filter(this.hash).fadeIn();
          $('.ulthermage_program_nav a').removeClass('active');
          $(this).addClass('active');
          return false;
        }).filter(':eq(0)').click();
    
        
        });
    
  
  //!  side bar
  $(function(){
    $('.m_menu').click(function(){
        $('.m_side').addClass('show');
    })
    $('.m_side .close').click(function(){
        $('.m_side').removeClass('show');
    })
  })
  
  
  
  $(function(){
    $('.m_side .m_nav_list li h5 + ul').slideUp();
    $('.m_side .m_nav_list li h5').click(function(){
        $('.m_side .m_nav_list li h5 + ul').slideUp();
        if($(this).hasClass('active')){
            $(this).removeClass('active');
            $(this).siblings().slideUp();
            
        } else {
            $(this).siblings().slideDown();
            $('.m_side .m_nav_list li h5').removeClass('active');
            $(this).addClass('active');
            
        }
    })
  })
  
  
  
  $(function(){
    $('.policy_tabcontent > div').hide();
    $('.policy_tabnav a').click(function () {
      $('.policy_tabcontent > div').hide().filter(this.hash).show();
      $('.policy_tabnav a').removeClass('active');
      $(this).addClass('active');
      return false;
    }).filter(':eq(0)').click();
    });
  


        document.querySelectorAll(".comparison-slider1").forEach((element) => {
          const slider = document.createElement("div");
          const resizeElement = element.getElementsByTagName("figure")[1];
          if (!resizeElement) return;
          const figcaption = {
              first: element.getElementsByTagName("figcaption")[0],
              second: element.getElementsByTagName("figcaption")[1],
          };
          const arrow = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
       
          let ticking = false;
       
          const slide = (event) => {
              if (!ticking) {
                  ticking = true;
                  requestAnimationFrame(() => {
                      ticking = false;
       
                      // sliding image
                      const clientX = event.clientX ?? event.touches[0].clientX;
                      const x = clientX - element.offsetLeft;
                      let percentage = ((x / element.offsetWidth) * 10000) / 100;
       
                      if (percentage >= 100) {
                          percentage = 100;
                      }
                      if (percentage <= 0) {
                          percentage = 0;
                      }
       
                      slider.style.left = `${percentage}%`;
                      resizeElement.style.clipPath = `polygon(${percentage}% 0, 100% 0, 100% 100%, ${percentage}% 100%)`;
       
                      // hiding figcaption
                      if (figcaption.first) {
                          if (x <= figcaption.first.offsetWidth) {
                              figcaption.first.classList.add("hide");
                          } else {
                              figcaption.first.classList.remove("hide");
                          }
                      }
       
                      if (figcaption.second) {
                          if (
                              element.offsetWidth - x <=
                              figcaption.second.offsetWidth
                          ) {
                              figcaption.second.classList.add("hide");
                          } else {
                              figcaption.second.classList.remove("hide");
                          }
                      }
                  });
              }
          };
          const dragStart = () => {
              element.addEventListener("mousemove", slide, { passive: true });
              element.addEventListener("touchmove", slide, { passive: true });
              element.classList.add("dragging");
          };
          const dragDone = () => {
              element.removeEventListener("mousemove", slide);
              element.removeEventListener("touchmove", slide);
              element.classList.remove("dragging");
          };
       
          slider.addEventListener("mousedown", dragStart, { passive: true });
          slider.addEventListener("touchstart", dragStart, { passive: true });
       
          document.addEventListener("mouseup", dragDone, { passive: true });
          document.addEventListener("touchend", dragDone, { passive: true });
          document.addEventListener("touchcancel", dragDone, { passive: true });
       
          slider.classList.add("slider");
          arrow.setAttribute("width", "20");
          arrow.setAttribute("height", "20");
          arrow.setAttribute("viewBox", "0 0 30 30");
          path.setAttribute(
              "d",
              "M1,14.9l7.8-7.6v4.2h12.3V7.3l7.9,7.6l-7.9,7.7v-4.2H8.8v4.2L1,14.9z"
          );
          arrow.append(path);
          slider.append(arrow);
       
          element.append(slider);
      });


      document.querySelectorAll(".comparison-slider2").forEach((element) => {
        const slider = document.createElement("div");
        const resizeElement = element.getElementsByTagName("figure")[1];
        if (!resizeElement) return;
        const figcaption = {
            first: element.getElementsByTagName("figcaption")[0],
            second: element.getElementsByTagName("figcaption")[1],
        };
        const arrow = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
     
        let ticking = false;
     
        const slide = (event) => {
            if (!ticking) {
                ticking = true;
                requestAnimationFrame(() => {
                    ticking = false;
     
                    // sliding image
                    const clientX = event.clientX ?? event.touches[0].clientX;
                    const x = clientX - element.offsetLeft;
                    let percentage = ((x / element.offsetWidth) * 10000) / 100;
     
                    if (percentage >= 100) {
                        percentage = 100;
                    }
                    if (percentage <= 0) {
                        percentage = 0;
                    }
     
                    slider.style.left = `${percentage}%`;
                    resizeElement.style.clipPath = `polygon(${percentage}% 0, 100% 0, 100% 100%, ${percentage}% 100%)`;
     
                    // hiding figcaption
                    if (figcaption.first) {
                        if (x <= figcaption.first.offsetWidth) {
                            figcaption.first.classList.add("hide");
                        } else {
                            figcaption.first.classList.remove("hide");
                        }
                    }
     
                    if (figcaption.second) {
                        if (
                            element.offsetWidth - x <=
                            figcaption.second.offsetWidth
                        ) {
                            figcaption.second.classList.add("hide");
                        } else {
                            figcaption.second.classList.remove("hide");
                        }
                    }
                });
            }
        };
        const dragStart = () => {
            element.addEventListener("mousemove", slide, { passive: true });
            element.addEventListener("touchmove", slide, { passive: true });
            element.classList.add("dragging");
        };
        const dragDone = () => {
            element.removeEventListener("mousemove", slide);
            element.removeEventListener("touchmove", slide);
            element.classList.remove("dragging");
        };
     
        slider.addEventListener("mousedown", dragStart, { passive: true });
        slider.addEventListener("touchstart", dragStart, { passive: true });
     
        document.addEventListener("mouseup", dragDone, { passive: true });
        document.addEventListener("touchend", dragDone, { passive: true });
        document.addEventListener("touchcancel", dragDone, { passive: true });
     
        slider.classList.add("slider");
        arrow.setAttribute("width", "20");
        arrow.setAttribute("height", "20");
        arrow.setAttribute("viewBox", "0 0 30 30");
        path.setAttribute(
            "d",
            "M1,14.9l7.8-7.6v4.2h12.3V7.3l7.9,7.6l-7.9,7.7v-4.2H8.8v4.2L1,14.9z"
        );
        arrow.append(path);
        slider.append(arrow);
     
        element.append(slider);
    });
    document.querySelectorAll(".comparison-slider3").forEach((element) => {
      const slider = document.createElement("div");
      const resizeElement = element.getElementsByTagName("figure")[1];
      if (!resizeElement) return;
      const figcaption = {
          first: element.getElementsByTagName("figcaption")[0],
          second: element.getElementsByTagName("figcaption")[1],
      };
      const arrow = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   
      let ticking = false;
   
      const slide = (event) => {
          if (!ticking) {
              ticking = true;
              requestAnimationFrame(() => {
                  ticking = false;
   
                  // sliding image
                  const clientX = event.clientX ?? event.touches[0].clientX;
                  const x = clientX - element.offsetLeft;
                  let percentage = ((x / element.offsetWidth) * 10000) / 100;
   
                  if (percentage >= 100) {
                      percentage = 100;
                  }
                  if (percentage <= 0) {
                      percentage = 0;
                  }
   
                  slider.style.left = `${percentage}%`;
                  resizeElement.style.clipPath = `polygon(${percentage}% 0, 100% 0, 100% 100%, ${percentage}% 100%)`;
   
                  // hiding figcaption
                  if (figcaption.first) {
                      if (x <= figcaption.first.offsetWidth) {
                          figcaption.first.classList.add("hide");
                      } else {
                          figcaption.first.classList.remove("hide");
                      }
                  }
   
                  if (figcaption.second) {
                      if (
                          element.offsetWidth - x <=
                          figcaption.second.offsetWidth
                      ) {
                          figcaption.second.classList.add("hide");
                      } else {
                          figcaption.second.classList.remove("hide");
                      }
                  }
              });
          }
      };
      const dragStart = () => {
          element.addEventListener("mousemove", slide, { passive: true });
          element.addEventListener("touchmove", slide, { passive: true });
          element.classList.add("dragging");
      };
      const dragDone = () => {
          element.removeEventListener("mousemove", slide);
          element.removeEventListener("touchmove", slide);
          element.classList.remove("dragging");
      };
   
      slider.addEventListener("mousedown", dragStart, { passive: true });
      slider.addEventListener("touchstart", dragStart, { passive: true });
   
      document.addEventListener("mouseup", dragDone, { passive: true });
      document.addEventListener("touchend", dragDone, { passive: true });
      document.addEventListener("touchcancel", dragDone, { passive: true });
   
      slider.classList.add("slider");
      arrow.setAttribute("width", "20");
      arrow.setAttribute("height", "20");
      arrow.setAttribute("viewBox", "0 0 30 30");
      path.setAttribute(
          "d",
          "M1,14.9l7.8-7.6v4.2h12.3V7.3l7.9,7.6l-7.9,7.7v-4.2H8.8v4.2L1,14.9z"
      );
      arrow.append(path);
      slider.append(arrow);
   
      element.append(slider);
  });