function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  /*execute a function when someone moves the magnifier glass over the image:*/
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  /*and also for touch screens:*/
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /*prevent the magnifier glass from being positioned outside the image:*/
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}
    /*set the position of the magnifier glass:*/
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    /*display what the magnifier glass "sees":*/
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}



jQuery(document).ready(function($) {

    var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    var viewportHeight = window.innerHeight || document.documentElement.clientHeight;


    $(window).load(function() {

        $('body').addClass('page-loaded');

        // setTimeout(function() {

        //     anime.timeline({loop: true})
        //     .add({
        //         targets: '.ml2 .letter',
        //         scale: [4,1],
        //         opacity: [0,1],
        //         translateZ: 0,
        //         easing: "easeOutExpo",
        //         duration: 950,
        //         delay: (el, i) => 300*i
        //     }).add({
        //         targets: '.ml2',
        //         opacity: 0,
        //         duration: 1000,
        //         easing: "easeOutExpo",
        //         delay: 9000
        //     });

        // }, 100);

    });


    // $('#hero .copy').tilt({
    //     reset: true
    //     // scale: 1.2
    // });


    // $('#hero .fighting_guy .img_wrapper').tilt({
    //     reset: true
    //     // scale: 1.2
    // });


    // setTimeout(function() {

    //     $('.count-up-inview.active').countTo({
    //         onComplete: (
    //             $(this).find('.count-up-inview.active').removeClass('active')
    //         // setTimeout(function() {
    //         //     module_parent.find('.badge_counter .circle').addClass('animated tada');
    //         // }, counter_completion)
    //         )
    //     });

    // }, 5000);



    // $('.count-up-inview.active').each(function(){
    //     var module_parent = $(this);
    //     var count_up_item = $(this);

    //     new Waypoint.Inview({
    //         element: count_up_item,
    //         entered: function(down) {

    //             setTimeout(function() {
    //                 $('.count-up-inview.active').countTo({
    //                     onComplete: (
    //                         count_up_item.removeClass('active')
    //                     )
    //                 });
    //             }, 300);

    //         }
    //     });

    // });



    // remove class from product page hero graphics to animate in
    $(window).load(function() {

        // $('#hero .hero_graphic_item').each(function(i){
        //     var hero_item = $(this);
            
        //     setTimeout(function() {
        //         hero_item.removeClass('not_active');
        //     }, 200*i);

        //     setTimeout(function() {
        //         hero_item.removeClass('hero_graphic_item');
        //     }, 5000);

        // });



        // // show get 2 dollars back popup on page load
        // setTimeout(function() {
            // $('body, html').addClass('popup-open');
            // $('#popup-get_2_back.popup-overlay').addClass('popup-open');
        // }, 300);

    });





    // sort retailer list alphabeticallys
    var select2_alphabetical_sorter = function(data) {
       return data.sort(function(a,b){
           a = a.text.toLowerCase();
           b = b.text.toLowerCase();
           if(a > b) {
               return 1;
           } else if (a < b) {
               return -1;
           }
           return 0;
       });
    };



    // initialize select dropdown search
    $('.retailer_dropdown').select2({
        sorter: select2_alphabetical_sorter,
        placeholder: "*Enter Store Name",
        allowClear: true,
        selectOnClose: false,
        dropdownCssClass: "select2_retailer_dropdown",
        maximumSelectionLength: 1,
    });

    

    // open store locator / maps search on submit
    $('form.retailer_form input[type="submit"]').click(function (e) {
        e.preventDefault();

        var link_url = $(this).closest('.retailer_form').find('.retailer_dropdown').attr('data-store-url');
        var option_value = $(this).closest('.retailer_form').find('.retailer_dropdown').find(':selected').val();
        var search_query = option_value.replace('\'', '').replace(' ', '+');
        var search_query = 'https://maps.google.com/?q='+search_query+'';

        window.open(search_query, '_blank');

        // if(link_url && link_url.length > 0) {
        //     window.open(link_url, '_blank');
        // } else {
        //     alert('This retailer does not have a website');
        // }
        
    });



    function YouTubeGetID(url){
      var ID = '';
      url = url.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
      if(url[2] !== undefined) {
        ID = url[2].split(/[^0-9a-z_\-]/i);
        ID = ID[0];
        }
        else {
            ID = url;
        }
        return ID;
    }



       // add html for youtube videos
    $('#videos .video_youtube').each(function(){

        var youtube_id = $(this).attr('data-youtube-url');

        if (youtube_id.length > 0) {

            $(this).html('\
                <div class="poster_thumbnail" style="background-image:url(https://img.youtube.com/vi/'+youtube_id+'/maxresdefault.jpg);">\
                <div class="icon_play"><span></span></div>\
                </div>\
                <iframe width="560" height="315" src="https://www.youtube.com/embed/'+youtube_id+'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>\
            ');

        }        

    });





    // // play video with custom icon
    // $('a.play_video').click(function(e){
    //     e.preventDefault();

    //     if ($(this).closest('.responsive_video_wrapper.hosted_self').length > 0) {
    //         $(this).hide();
    //         $(this).closest('.responsive_video_wrapper.hosted_self').find('video').get(0).play();
    //     }
    // });


    // // hide video play icon on video controls click
    // $('video').click(function() {
    //   if ($(this).get(0).paused) {
    //       // this.pause();
    //       $(this).closest('.responsive_video_wrapper').find('a.play_video').hide();
    //       // alert('video playing');
    //   }
    // });



    // hide poster image on click for youtube video
    $('#watch_video .video_youtube .poster_thumbnail').click(function(e){
        e.preventDefault();
        var youtube_id = $(this).closest('.video_youtube').attr('data-youtube-url');

        // youtube video play
        if (youtube_id.length > 0) {
            $(this).hide();
            var youtube_id = YouTubeGetID($(this).closest('.video_youtube').attr('data-youtube-url'));
            // // $(this).closest('.video_youtube').find('iframe').attr('src', 'https://www.youtube.com/embed/'+youtube_id+'?vq=hd1080&amp;modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;controls=1&amp;autoplay=1&amp;rel=0enablejsapi=1&amp;html5=1')
            // // $(this).after('<div class="hytPlayerWrapOuter"><div class="hytPlayerWrap"><iframe width="560" height="315" src="https://www.youtube.com/embed/'+youtube_id+'?vq=hd1080&amp;modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;controls=1&amp;autoplay=1&amp;rel=0enablejsapi=1&amp;html5=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>')
            $(this).after('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+youtube_id+'?vq=hd1080&amp;modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;controls=1&amp;autoplay=1&amp;rel=0enablejsapi=1&amp;html5=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
        } 

        // raw video play
        else { 
            $(this).hide();
            $(this).closest('.responsive_video_wrapper.hosted_self').find('video').get(0).play();
        }


    });



    // // carousel before after photos
    // var carousel_before_after = $(".carousel_before_after");
    // carousel_before_after.owlCarousel({
    //     loop:true,
    //     margin:24,
    //     nav:true,
    //     dots:true,
    //     items: 2,
    //     slideBy: 1,
    //     mouseDrag: true,
    //     autoHeight: true,
    //     touchDrag: true,
    //     freeDrag: false,
    //     autoplay:true,
    //     URLhashListener:false,
    //     autoplayTimeout:4500,
    //     smartSpeed: 3000,
    //     autoplayHoverPause: false,
    //     responsiveClass:true,
    //     responsive:{
    //         0:{
    //             items:1,
    //         },
    //         520:{
    //             items:1,
    //         },
    //         768:{
    //             items:2,
    //         }
    //     }
    // });


    // carousel videos
    var carousel_videos = $(".carousel_videos");
    carousel_videos.owlCarousel({
        loop:false,
        margin:0,
        nav:true,
        dots:true,
        items: 1,
        slideBy: 1,
        mouseDrag: true,
        autoHeight: false,
        touchDrag: false,
        freeDrag: false,
        autoplay:false,
        URLhashListener:false,
        autoplayTimeout:6000,
        smartSpeed: 700,
        autoplayHoverPause: false
    });




    // carousel videos
    var carousel_reviews = $(".carousel_reviews");
    carousel_reviews.owlCarousel({
        loop:true,
        margin:5,
        nav:false,
        dots:true,
        items: 1,
        slideBy: 1,
        mouseDrag: true,
        autoHeight: false,
        touchDrag: true,
        freeDrag: false,
        responsive:{
            0:{
                items:1
            },
            768:{
                items:1
            }
        },
        autoplay:true,
        URLhashListener:false,
        autoplayTimeout:10000,
        // autoplayTimeout:2000,
        smartSpeed: 1300,
        autoplayHoverPause: false
    });




    // carousel videos
    var carousel_products = $(".carousel_products");
    carousel_products.owlCarousel({
        loop:true,
        margin:15,
        nav:true,
        dots:true,
        items: 3,
        slideBy: 1,
        mouseDrag: true,
        autoHeight: true,
        touchDrag: true,
        freeDrag: false,
        autoplay:true,
        URLhashListener:false,
        // autoplayTimeout:12000,
        autoplayTimeout:2500,
        smartSpeed: 1500,
        autoplayHoverPause: false,
        rewind: true,
        // afterMove: moved,
        responsive:{
            0:{
                items:1
            },
            
            768:{
                items:2
            },

            1199:{
                items:3
            }
        }
    });


    // function moved() {
    //     var owl_moved = $(".carousel_products").data('owl.carousel')
    //     if (owl_moved.currentItem + 1 === owl_moved.itemsAmount) {
    //         alert('THE END');
    //         $('.carousel_products').trigger('to.owl.carousel', [0, 100]);
    //     }
    // }





    // autoplay carousel when user scrolls to section
    // $('#products').each(function(){
    //     var this_item = $(this);

    //     var appear_item_start = $('#products .carousel_wrapper');

    //     new Waypoint.Inview({
    //         element: appear_item_start,
    //         enter: function(direction) {

    //             $('.carousel_products').data('owl.carousel').options.autoplay = true;
    //             $('.carousel_products').data('owl.carousel').options.autoplayTimeout = 10000;
    //             $('.carousel_products').trigger( 'refresh.owl.carousel' );
    //             // alert('enter carousel');

    //         },

    //         exit: function(direction) {
    //            $('.carousel_products').trigger('to.owl.carousel', [0, 100]);
    //            $('.carousel_products').data('owl.carousel').options.autoplayTimeout = 10000;
    //            $('.carousel_products').data('owl.carousel').options.autoplay = false;
    //         }
         
    //     });

    // });





    // owl.owlcarousel2_filter( '.blue' );

    $( '#products .filter_wrapper .filter_inner' ).on( 'click', '.btn', function(e) {

        e.preventDefault();

        var $item = $(this);
        var filter = $item.data( 'owl-filter' );

        $item.addClass( 'active' ).siblings().removeClass( 'active' );


        if (!$(this).hasClass('btn-all')) {
            $(this).closest('.carousel_wrapper').addClass('hide-clones');
            // $(this).closest('.carousel_wrapper').find('.owl-item.cloned').remove();

            // carousel_products.trigger('change.owl.carousel', {
            //   loop: false
            // });

            // carousel_products.trigger('refresh.owl.carousel');

        } else {
            $(this).closest('.carousel_wrapper').removeClass('hide-clones');
            // $(this).closest('.carousel_wrapper').find('.owl-item.cloned').remove();

            // carousel_products.trigger('change.owl.carousel', {
            //   loop: false
            // });
            // carousel_products.trigger('refresh.owl.carousel');

            
        }

        // setTimeout(function() {
            carousel_products.owlcarousel2_filter( filter );
        // }, 300);




    });



    // carousel product mobile
    var carousel_product_mobile = $(".carousel_product_mobile");
    carousel_product_mobile.owlCarousel({
        loop:true,
        margin:0,
        nav:true,
        dots:true,
        items: 1,
        slideBy: 1,
        mouseDrag: true,
        autoHeight: false,
        touchDrag: false,
        freeDrag: false,
        autoplay:true,
        URLhashListener:false,
        autoplayTimeout:6000,
        smartSpeed: 700,
        autoplayHoverPause: false
    });






    var howtouse_carousel = $("#how_to_use .steps_wrapper");

    if (viewportWidth <= 767) {
        start_howtouse_carousel();
    }

    $(window).on('resize', function(){
      var win = $(this); //this = window

      if (win.width() <= 767) {
        start_howtouse_carousel();
    } else {
        stop_howtouse_carousel();
    }

});


    function start_howtouse_carousel(){

        var howtouse_carousel = $("#how_to_use .steps_wrapper");
        howtouse_carousel.owlCarousel({
          loop:false,
            margin:0,
            nav:true,
            dots:true,
            items: 1,
            slideBy: 1,
            mouseDrag: true,
            autoHeight: false,
            touchDrag: true,
            freeDrag: false,
            autoplay:false,
            URLhashListener:false,
            autoplayTimeout:6000,
            smartSpeed: 700,
            autoplayHoverPause: false
      });

    }

    function stop_howtouse_carousel() {
        var howtouse_carousel = $("#how_to_use .steps_wrapper");
        howtouse_carousel.trigger('destroy.owl.carousel');
        howtouse_carousel.addClass('off');
    }



    // faq section question / answer accordion toggle
    $('.global_accordion_wrapper ul li .accordion_title').click(function (e) {
        e.preventDefault();
        // $(this).closest('ul').find('li .answer').toggle();

        current_tab_clicked = $(this).closest('li');

        if ( $(this).closest('.global_accordion_wrapper').hasClass('selfcaretips_wrapper') ) {

            if ($(this).closest('li').hasClass('open')) {
                $(this).closest('.global_accordion_wrapper').find('.accordion_content').slideUp(300);
                $(this).closest('.global_accordion_wrapper').find('li').removeClass('open');
            } else {
                $(this).closest('.global_accordion_wrapper').find('.accordion_content').slideUp(300);
                $(this).closest('.global_accordion_wrapper').find('li').removeClass('open');
                $(this).closest('li').find('> .accordion_content').slideDown(300);
                $(this).closest('li').addClass('open');


                setTimeout(function() {
                    // $('html, body').animate({
                    //     scrollTop: current_tab_clicked.offset().top - 20
                    // }, 300);
                }, 300);

                
            }


            

        } else {

            $(this).closest('li').find('> .accordion_content').slideToggle(300);
            $(this).closest('li').toggleClass('open');

        }

    });



    // popup overlay trigger on link click
    $('.popup_link_trigger').click(function(e) {
        e.preventDefault();

        var link_id = $(this).attr('href')
        var link_id = link_id.replace('#', '')

        $('body, html').addClass('popup-open');
        $('.popup-overlay--video#'+link_id+'').addClass('popup-open');

    });


    // close popup window
    $('.popup-overlay .close-button').click(function(e) {
        e.preventDefault();

        var target = $(e.target);

        $('body, html').removeClass('popup-open');
        $('.popup-overlay').removeClass('popup-open');
    });




    // scroll to anchor link on click
    $('a.link_scrollto[href^="#"]').click(function(e){
        e.preventDefault();

        var link_anchor = $(this).attr('href');

        // scroll to anchor link if section ID is visible and exists
        if($(''+link_anchor+':visible').length > 0) {
            $('html, body').animate({
                scrollTop: $(''+link_anchor+'').offset().top + 0
                // scrollTop: $(''+link_anchor+'').offset().top + 800 // add 800 due to duration on scrollmagic hero animation set to 800
            }, 300);
        }


        // scroll to anchor link tab wrapper if hidden
        else {

            var current_tab = $(''+link_anchor+'').closest('.tab_wrapper');

            // close all other tabs
            $('.tab_wrapper').removeClass('open');
            $('.tab_wrapper .tab_content').slideUp(300);

            current_tab.addClass('open');
            current_tab.find('.tab_content').slideDown(300);

            setTimeout(function() {
                $('html, body').animate({
                    scrollTop: current_tab.offset().top - 10
                    // scrollTop: current_tab.offset().top + 790
                }, 300);
            }, 300);

        }


    });





    function scrollmagic_hero_animation() {

        // gsap.registerPlugin(ScrollTrigger);

        // let masks = gsap.utils.toArray(".img-mask");

        //     gsap.to(masks[1], {
        //       height: "0%",
        //       ease: "none",
        //       scrollTrigger: {
        //         trigger: ".intro_revealer",
        //         start: "center center",
        //         pin: true,
        //         end: "+=100%",
        //         scrub: .5
        //     }
        // });



        var controller = new ScrollMagic.Controller();

        var scrollHorizontal = new TimelineLite()
        .add(TweenMax.to("#hero .fighting_guy", 1, {y:'0', ease: Linear.easeNone,}), "first")
        .add(TweenMax.to("#hero .monster", 1, {x:'0', ease: Linear.easeNone}), "first");
        // https://stackoverflow.com/questions/59601512/how-to-delay-gsap-animation-with-scroll-magic-plugin
        // .setTween(gsap.to('.container img', {duration: 1, y: '-20vh', ease: 'power3.in'}))

        // .add(TweenMax.to("#hero .fighting_group", 1, {x:'0', ease: Linear.easeNone}), "first");

        var horizontalScroll = new ScrollMagic.Scene({
          // triggerElement: "#page_inner",
          // triggerElement: "#hero_header_pin_wrapper",
          triggerElement: "#page_inner",
          triggerHook: 'onLeave',
          duration: 800,
          // pushFollowers: false,
          // triggerHook: 'onEnter',
      }).setTween(scrollHorizontal).setPin("#page_inner").addTo(controller);


    }


    $(window).on("resize", function() {

        // scrollmagic_hero_animation();

    });



    $(function() {

        // scrollmagic_hero_animation();

    });



    // waypoints scroll inview for sticky shop now button
    $('#hero .sticky_shop_now').each(function(){
        var this_item = $(this);

        var appear_item_start = $('#intro');
        // var appear_item_start = $('#when_to_use');
       
        
        // // var appear_item_end = $('body.home .module-6');

        new Waypoint.Inview({
            element: appear_item_start,
            entered: function(direction) {
                this_item.addClass('entered')
            },
            // exited: function(direction) {
            //     if (direction == 'up') {
            //         this_item.removeClass('entered')
            //     }
            // }
        });




        // var retailers_section = $('#retailers');

        // new Waypoint.Inview({
        //     element: retailers_section,
        //     enter: function(down) {

        //         this_item.removeClass('entered')


        //     },
        //     exited: function(direction) {
        //         // if (direction == 'up') {
        //             this_item.addClass('entered')
        //         // }
        //     }
        // });


        var footer_section = $('#contact');

        new Waypoint.Inview({
            element: footer_section,
            entered: function(down) {

                this_item.removeClass('entered')


            },
            exit: function(direction) {
                if (direction == 'up') {
                    this_item.addClass('entered')
                }
            }
        });



        var hero_scroll_up = $('#hero');

        new Waypoint.Inview({
            element: hero_scroll_up,
            entered: function(down) {

                this_item.removeClass('entered')


            },
            // exit: function(direction) {
            //     if (direction == 'up') {
            //         this_item.addClass('entered')
            //     }
            // }
        });

    });


    // // waypoints scroll inview for sticky shop now button
    // $('#hero .sticky_shop_now').click(function(){
    //     var this_item = $(this);
    //     $('#hero .sticky_shop_now').removeClass('entered');
    // });




    // Devices without touch events

    $('html.no-touchevents .tile').hover(function() {
        $(this).addClass('hover');

    }, function() {
        $(this).removeClass('hover');
    }
    );




    $('html.no-touchevents #product_before_after .photo_column .photo_column_inner').hover(function(e) {

        e.stopPropagation();
        // e.preventDefault();

        // $(this).toggleClass('hover');

        if ($(this).hasClass('hover')) {
            $(this).removeClass('hover');
        } else {
            $(this).addClass('hover');
        }
        
    });



    // Devices with touch events
    $('html.touchevents #product_before_after .photo_column .photo_column_inner').click(function(e) {
        e.stopPropagation();
        // e.preventDefault();

        // $(this).toggleClass('hover');

        if ($(this).hasClass('hover')) {
            $(this).removeClass('hover');
        } else {
            $(this).addClass('hover');
        }

    });


    $(window).on('load', function(){
        var site_header_height = $('#site_header').height();
        $('#page_product').css({'padding-top':''+site_header_height+'px'});
    });

    

    $(window).on('resize', function(){
      var win = $(this); //this = window

      var site_header_height = $('#site_header').height();
        

      $('#page_product').css({'padding-top':''+site_header_height+'px'});

        // if (win.width() <= 767) {
        //   start_product_carousel();
        // } else {
        //   stop_product_carousel();
        // }

      });





    // add detailed title to each logo link
    $('.tab_headline h3').each(function(){
        var headline_copy = $(this).text();
        $(this).closest('.tab_headline').attr('data-detailed-title', 'Tab - '+headline_copy+'')
    });    


    // add detailed title to each logo link
    $('.logo_column img').each(function(){
        var logo_retailer_name = $(this).attr('alt');
        $(this).closest('.logo_wrapper').attr('data-detailed-title', 'Shop - '+logo_retailer_name+'')
        $(this).wrap('<figure></figure>');
        $(this).after('<figcaption>'+logo_retailer_name+'</figcaption>');
    });


    // add selected retailer to search button as detailed title
    $('.retailer_dropdown').on('select2:select', function (e) {
        var retailer_value = $(this).val();
        var retailer_text = $(this).closest('.retailer_form').find('option:selected').text();
        $(this).closest('.retailer_form').find('input[type="submit"]').attr('data-detailed-title', 'Shop - '+retailer_text+'')
    
        // alert(retailer_text);

    });




 






    // mobile accordion tabs
    $('.tab_wrapper .tab_headline').click(function (e) {
        e.preventDefault();

        var current_tab = $(this).closest('.tab_wrapper');
       

        if ($(this).closest('.tab_wrapper').hasClass('open')) {
            $(this).closest('.tab_wrapper').removeClass('open');
            // $(this).closest('.tab_wrapper').toggleClass('open');
            $(this).closest('.tab_wrapper').find('.tab_content').slideUp(300);
        } else {
            
            // close all other tabs
            $('.tab_wrapper').removeClass('open');
            $('.tab_wrapper .tab_content').slideUp(300);

            $(this).closest('.tab_wrapper').addClass('open');
            // $(this).closest('.tab_wrapper').toggleClass('open');
            $(this).closest('.tab_wrapper').find('.tab_content').slideDown(300);

            setTimeout(function() {
                $('html, body').animate({
                    scrollTop: current_tab.offset().top - 10
                }, 300);
            }, 300);



        }


    });



    // $(window).on('resize', function(){
    //   var win = $(this); //this = window
        
    //     if (win.width() <= 767) {
         
    //     } else {
          
    //     }

    //   });



    
    // add classes to all shop links for tracking
    $('\
        a.logo_wrapper, \
        #site_header .col_buttons .btn, \
        .sticky_shop_now, \
        .retailer_form input[type="submit"], \
        .link_scrollto, \
        .tab_headline, \
        .cta_wrapper .btn, \
        .btn_wrapper .btn, \
        .logo_column .logo_wrapper, \
        .product_wrapper a.btn \
        ').each(function () {

            $(this).addClass('tracking_shop_link');

    });





    // trigger pricespider popup from one single button with ps-widget class and ps-sku attribute (any link/button with ps_popup_link class)
    $(function () {

        const ps_popuplinkelements = document.getElementsByClassName("cs_popup_link")
        for (let index = 0; index < ps_popuplinkelements.length; index++) {
            const ele = ps_popuplinkelements [index]

            ele.onclick = (e) => {
                e.stopImmediatePropagation(); 
                e.preventDefault(); 
                // document.getElementsByClassName("ps-widget")[0].click()
                document.getElementsByClassName("cswidget")[0].click()
            }

        }

    });


    // if($('#hero').length > 0) {

    //     $('#hero').paroller({
    //         // factorXs: 0.1,
    //         // factorSm: 0.1,
    //         // factorMd: -0.4,
    //         // factorLg: -0.5,
    //         // factorXl: -0.6,
    //         factor: -.1,
    //         // factor: -.4,
    //         type: 'background',
    //         direction: 'horizontal',
    //         // transition: 'transform .3s ease-out'
    //     });

    // }



    if($('#when_to_use').length > 0) {

        // $('#when_to_use .cloud_1').paroller({
        //     // factorXs: 0.1,
        //     // factorSm: 0.1,
        //     // factorMd: -0.4,
        //     // factorLg: -0.5,
        //     // factorXl: -0.6,
        //     factor: -.5,
        //     // factor: -.4,
        //     type: 'foreground',
        //     direction: 'horizontal',
        //     // transition: 'transform .3s ease-out'
        // });


        // $('#when_to_use .cloud_2').paroller({
        //     // factorXs: 0.1,
        //     // factorSm: 0.1,
        //     // factorMd: -0.4,
        //     // factorLg: -0.5,
        //     // factorXl: -0.6,
        //     factor: .5,
        //     // factor: -.4,
        //     type: 'foreground',
        //     direction: 'horizontal',
        //     // transition: 'transform .3s ease-out'
        // });

    }



    if($('#when_to_use').length > 0) {

        $('#when_to_use #monster_animated_1').paroller({
            factorXs: 0.1,
            factorSm: 0.1,
            factorMd: .1,
            factorLg: .3,
            // factorXl: -0.6,
            factor: .5,
            // factor: -.4,
            type: 'foreground',
            direction: 'horizontal',
            // transition: 'transform .3s ease-out'
        });


    }



    // if($('#hero .fighting_group_2').length > 0) {

    //     $('#hero .fighting_group_2').paroller({
    //         // factorXs: -0.1,
    //         // factorSm: -0.1,
    //         // factorMd: -.1,
    //         // factorLg: -.3,
    //         // factorXl: -0.6,
    //         factor: -.9,
    //         // factor: -.4,
    //         type: 'background',
    //         direction: 'horizontal',
    //         // transition: 'transform .3s ease-out'
    //     });


    // }




    // manual scroll animation for hero
    $( window ).on('scroll', function(){

        var scrollTop = $(this).scrollTop();
        $( '#hero .fighting_group_2' ).css({
            // transform: 'translateX('+  ( +2 * scrollTop ) +'px)',
            left: ''+  ( +.3 * scrollTop ) +'px',
        });

    });


    // if($('#self_care_tips').length > 0) {

    //     $('#self_care_tips .fighting_guy_2').paroller({
    //         // factorXs: 0.1,
    //         // factorSm: 0.1,
    //         // factorMd: -0.4,
    //         // factorLg: -0.5,
    //         // factorXl: -0.6,
    //         factor: .5,
    //         // factor: -.4,
    //         type: 'foreground',
    //         direction: 'horizontal',
    //         // transition: 'transform .3s ease-out'
    //     });


    //     $('#self_care_tips .dragon_tail').paroller({
    //         // factorXs: 0.1,
    //         // factorSm: 0.1,
    //         // factorMd: -0.4,
    //         // factorLg: -0.5,
    //         // factorXl: -0.6,
    //         factor: .5,
    //         // factor: -.4,
    //         type: 'foreground',
    //         direction: 'horizontal',
    //         // transition: 'transform .3s ease-out'
    //     });


    // }


    // wait for element to exist function using MutationObserver
    // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
    // function waitForElm(selector) {
    //     return new Promise(resolve => {
    //         if (document.querySelector(selector)) {
    //             return resolve(document.querySelector(selector));
    //         }

    //         const observer = new MutationObserver(mutations => {
    //             if (document.querySelector(selector)) {
    //                 resolve(document.querySelector(selector));
    //                 observer.disconnect();
    //             }
    //         });

    //         observer.observe(document.body, {
    //             childList: true,
    //             subtree: true
    //         });
    //     });
    // }



    // waitForElm('.ps-sku-selector').then((elm) => {
    //     // console.log('Element is ready');
    //     // console.log(elm.textContent);

    //     $('.ps-sku-selector').val('1640015').prop('selected', true).trigger('change');

    // });


    // $('#when_to_use .monster').ripples({
    //     resolution: 512,
    //     dropRadius: 20,
    //     perturbance: 0.04,
    // });

    // $('#when_to_use .monster').ripples('play');


    // $('#monster_animated_1').ripples({
    //     resolution: 128,
    //         dropRadius: 10, //px
    //         perturbance: 0.04,
    //         interactive: false
    // });

    // // Automatic drops
    // setInterval(function() {
    //     var $el = $('#monster_animated_1');
    //     var x = Math.random() * $el.outerWidth();
    //     var y = Math.random() * $el.outerHeight();
    //     var dropRadius = 30;
    //     var strength = 0.04 + Math.random() * 0.04;

    //     $el.ripples('drop', x, y, dropRadius, strength);
    // }, 400);






    $(function() {


        // // Wrap every letter in a span
        // var textWrapper = document.querySelector('.ml9 .letters');
        // textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");



        // // $('.ml9 .letters').html(function (i, html) {
        // //     return html.replace(/(\d)/g, '<span class="letter">$1</span>');
        // // });

        // anime.timeline({loop: true})
        // .add({
        //     targets: '.ml9 .letter',
        //     scale: [0, 1],
        //     duration: 1500,
        //     elasticity: 600,
        //     delay: (el, i) => 45 * (i+1)
        // }).add({
        //     targets: '.ml9',
        //     opacity: 0,
        //     duration: 1000,
        //     easing: "easeOutExpo",
        //     delay: 1000
        // });






    });
    


    $(function() {

        // Wrap every letter in a span
        // var textWrapper = document.querySelector('.ml2');
        // textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

        


            

  });



    $(function() {
        var currentYear = (new Date).getFullYear();
        $('.copyright .current_year').text(currentYear);
    });

    






    $(function () {

        const wrapperOuter  =  document.getElementById("col_graphic_inner");
        const wrapperPercent  =  document.getElementById("ingredients_col_left");
        const outer = document.getElementById("ingredients_col_left");
        // const night = document.getElementById("night");

        let width = document.body.clientWidth;
        let imageWrapperPercent;

        wrapperOuter.addEventListener('mousemove', mouseMove );

        function mouseMove(e) {

          var x = e.clientX;
          console.log(x);

          var outerTracker = outer.getBoundingClientRect();
          let mousePointerPos;

          mousePointerPos = x - outerTracker.left;
          console.log(mousePointerPos);

          //wrapperPercent.style.width = x + "px"; // wrapper width using clientX
          wrapperPercent.style.width = mousePointerPos + "px"; // wrapper width using mouse postion in the box

          // convert to a %
          //imageWrapper =  mousePointerPos/10;
          //wrapperPercent.style.width = imageWrapper + "%";

          // Night Image Show and Hide
          /*if(mousePointerPos < 0) {
            night.style.opacity = "100"
          }
          if(mousePointerPos > 0) {
            night.style.opacity = "0"
        }*/

    }

    $('#prompt_relief').mouseleave(function() {
      $( '#ingredients_col_left' ).css( "width", "50%" );
  });

});






$(function () {

        const wrapperOuter  =  document.getElementById("col_graphic_inner_mobile");
        const wrapperPercent  =  document.getElementById("ingredients_col_left_mobile");
        const outer = document.getElementById("ingredients_col_left_mobile");
        // const night = document.getElementById("night");

        let width = document.body.clientWidth;
        let imageWrapperPercent;

        wrapperOuter.addEventListener('mousemove', mouseMove );

        function mouseMove(e) {

          var x = e.clientX;
          console.log(x);

          var outerTracker = outer.getBoundingClientRect();
          let mousePointerPos;

          mousePointerPos = x - outerTracker.left;
          console.log(mousePointerPos);

          //wrapperPercent.style.width = x + "px"; // wrapper width using clientX
          wrapperPercent.style.width = mousePointerPos + "px"; // wrapper width using mouse postion in the box

          // convert to a %
          //imageWrapper =  mousePointerPos/10;
          //wrapperPercent.style.width = imageWrapper + "%";

          // Night Image Show and Hide
          /*if(mousePointerPos < 0) {
            night.style.opacity = "100"
          }
          if(mousePointerPos > 0) {
            night.style.opacity = "0"
        }*/

    }

    $('#prompt_relief').mouseleave(function() {
      $( '#ingredients_col_left_mobile' ).css( "width", "50%" );
  });

});    
    







    // magnify("intro_revealer_wrapper", 1.7);

    



});