$(document).ready(function () {
    /* Initialize state for portfolio images */
    //Get main images wrapper where are all optimize images
    let main_images_wrapper = $(".portfolio_item_main-image-wrapper");
  
    //Clear thumb images wrapper
    $(".portfolio_item_thumbnails_images-wrapper").empty();
  
    //Remove empty element
    $(".w-dyn-bind-empty").remove();
  
    //Go through every wrapper with optimized images
    $(main_images_wrapper).each(function () {
      //Get attr of actual wrapper
      let attr_of_wrapper = $(this).attr("data-main-image");
  
      //Get images in the wrapper
      let images = $("[data-main='" + attr_of_wrapper + "']");
  
      //Go through all images
      $(images).each(function (i, el) {
        //When image don't contain class empty and image == main image before add
        if (!$(this).hasClass("w-dyn-bind-empty") && i !== 0) {
          //Remove attribute main because it will be thumb
          $(this).removeAttr("data-main");
          //Change class because of styling
          $(this).attr("class", "portfolio_item_thumbnails_image");
          //Add attribute for thumb image
          $(this).attr("data-thumb", attr_of_wrapper);
          //Add image as thumb
          $("[data-thumb-images='" + attr_of_wrapper + "']").append($(this));
        }
      });
    });
  
    //
    //
    //
    /* CLICK AND CHANGE IMAGE IN PORTFOLIO ON DESKTOP */
    //Variable for preventing multiple clicks on thumbnail
    let ongoing = false;
  
    //When user click on thumbnail
    $(".portfolio_item_thumbnails_image").click(function () {
      //If statement - if click is while image is changing nothing will happen
      if (ongoing === true) {
        return false;
      }
  
      //Changing variable to prevent multiple clicks
      ongoing = true;
  
      //Get element of clicked thumbnail image
      let thumb_element_clicked = $(this);
  
      //Get attribute of clicked thumbnail image
      let thumb_attr = $(thumb_element_clicked).attr("data-thumb");
  
      //Opacity element of thumbnail image
      $(thumb_element_clicked).animate({ opacity: 0 }, 200);
  
      //Get thumbnail src image & srcset
      let thumb_img_clicked_attr = $(thumb_element_clicked).attr("src");
      let thumb_img_clicked_attr_srcset = $(thumb_element_clicked).attr("srcset");
  
      //Get Main image
      let main_img = $(
        '.portfolio_item_main-image[data-main="' + thumb_attr + '"]'
      );
  
      //Get Main src & srcset
      let main_img_attr = main_img.attr("src");
      let main_img_attr_srcset = main_img.attr("srcset");
  
      //Opacity of main image
      $(main_img).animate({ opacity: 0 }, 200);
  
      //Change src img between them and give the opacity back
      setTimeout(function () {
        $(thumb_element_clicked).attr("src", main_img_attr);
        $(thumb_element_clicked).attr("srcset", main_img_attr_srcset);
        $(thumb_element_clicked).animate({ opacity: 1 }, 200);
  
        $(main_img).attr("src", thumb_img_clicked_attr);
        $(main_img).attr("srcset", thumb_img_clicked_attr_srcset);
        $(main_img).animate({ opacity: 1 }, 200);
      }, 200);
  
      //Timeout for changing variable to prevent clicks
      setTimeout(function () {
        ongoing = false;
      }, 500);
    });
  
    //
    //
    //
    /* Macy.js for portfolio layout */
    //Created element
    let padding =
      '<div style="display: block; padding-top: 12.6rem; width: 100%; height: auto;"></div>';
  
    //Get items
    let portfolio_item = $(".portfolio_item_wrapper");
  
    //If items length is more than 1 than add the gap element
    if ($(window).width() > 1250) {
      if ($(portfolio_item).length > 0) {
        $(padding).insertBefore(portfolio_item[1]);
      }
    }
  
    //Initialization of Macy.js
    var macy = Macy({
      container: "#macy-container",
      trueOrder: false,
      waitForImages: false,
      margin: 64,
      columns: 1,
      mobileFirst: true,
      breakAt: {
        1250: {
          columns: 2
        },
        2250: {
          columns: 3
        }
      }
    });
  
    macy.recalculate();
  
    //After loading images opacity will change to 1 for better loading experience
    macy.runOnImageLoad(function () {
      macy.recalculate(true, true);
      $(".portfolio_wrapper").css("opacity", "1");
    });
  
    //
    //
    //
    /* Swiper portfolio - mobile */
    var swiper_portfolio = new Swiper(".portfolio_content-wrapper.swiper", {
      speed: 500,
      followFinger: false,
      freeMode: false,
      centeredSlides: true,
      centeredSlidesBounds: true,
      slidesPerView: 1.1,
      spaceBetween: 16,
      direction: "horizontal",
      breakpoints: {
        // when window width is >= 600px
        600: {
          slidesPerView: 1.5,
          spaceBetween: 32
        },
        768: {
          slidesPerView: 1.7
        }
      },
      navigation: {
        nextEl: ".portfolio_arrow-wrapper-next",
        prevEl: ".portfolio_arrow-wrapper-prev"
      }
    });
  
    //
    //
    //
    /* Swiper for testimonials */
    var swiper_testimonials = new Swiper(".swiper.is-testimonials", {
      direction: "horizontal",
      speed: 400,
      loop: true,
      loopedSlides: 5,
      allowTouchMove: false,
      navigation: {
        nextEl: ".swiper-testimonials_swiper-arrow-next",
        prevEl: ".swiper-testimonials_swiper-arrow-prev"
      },
      breakpoints: {
        320: {
          slidesPerView: 1.1,
          spaceBetween: 20,
          centeredSlides: true,
          allowTouchMove: true
        },
        480: {
          slidesPerView: 1.2,
          spaceBetween: 40,
          centeredSlides: false,
          allowTouchMove: true
        },
        768: {
          slidesPerView: 1.5,
          spaceBetween: 40,
          allowTouchMove: true
        },
        992: {
          slidesPerView: 2.99,
          spaceBetween: 68,
          allowTouchMove: false
        },
        // when window width is >= 2250px
        2250: {
          slidesPerView: 2.99,
          spaceBetween: 76
        },
        3000: {
          slidesPerView: 3.99,
          spaceBetween: 82
        }
      }
    });
  
    //
    //
    //
    /* Library for split text in element */
    let typeSplit = new SplitType("[text-split]", {
      types: "lines, words, chars",
      tagName: "span"
    });
  
    //
    //
    //
    /* About us section - text fade in */
    //Credit: https://www.timothyricks.com/
    $("[scrub-each-word]").each(function (index) {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top 20%",
          end: "bottom 0%",
          scrub: true
        }
      });
      tl.from($(this).find(".word"), {
        opacity: 0.3,
        duration: 2.5,
        ease: "power4.out",
        stagger: { each: 0.3 }
      });
    });
  
    //
    //
    //
    /* Portfolio section - text fade in */
    //Credit: https://www.timothyricks.com/
    $("[scrub-each-word-portfolio]").each(function (index) {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top 90%",
          end: "bottom 40%",
          scrub: true
        }
      });
      tl.from($(this).find(".word"), {
        opacity: 0.3,
        duration: 2.5,
        ease: "power4.out",
        stagger: { each: 0.3 }
      });
    });
  
    //
    //
    //
    /* Portfolio section - text fade in */
    //Credit: https://www.timothyricks.com/
    $("[scrub-each-word-design]").each(function (index) {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top 90%",
          end: "bottom 40%",
          scrub: true
        }
      });
      tl.from($(this).find(".word"), {
        opacity: 0.3,
        duration: 2.5,
        ease: "power4.out",
        stagger: { each: 0.3 }
      });
    });
  
    // Avoid flash of unstyled content
    gsap.set("[text-split]", { opacity: 1 });
  
    //
    //
    //
    /* Portfolio animation on item */
    $("[portfolio-item-animation]").each(function (index) {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top 90%"
        }
      });
      tl.from($(this), {
        opacity: 0,
        duration: 0.5,
        ease: "power1.out",
        y: "20%"
      });
    });
  
    //
    //
    //
    /* Showcase - click function */
    $(".showcase_slide-wrapper").click(function () {
      let el_wrapper = $(this);
      let el_wrapper_attr = el_wrapper.attr("showcase-slide");
  
      $(".showcase_slide-wrapper").css({ opacity: 0.2 });
      el_wrapper.css({ opacity: 1 });
  
      $(
        ".showcase_lottie-number1, .showcase_lottie-number2, .showcase_lottie-number3"
      ).css({ opacity: 0 });
      $(".showcase_lottie-number" + el_wrapper_attr + "").css({ opacity: 1 });
    });
  });