$(document).ready(function () {
    /* Initialize state for mobile portfolio images */
    //Get main images wrapper where are all optimize images
    let main_images_wrapper_mobile = $(
      ".portfolio_item_main-image-wrapper-mobile"
    );
  
    //Clear thumb images wrapper
    $(".portfolio_item_thumbnails_images-wrapper-mobile").empty();
  
    //Remove empty element
    $(".w-dyn-bind-empty").remove();
  
    $(main_images_wrapper_mobile).each(function () {
      let attr_of_wrapper = $(this).attr("data-main-image-mobile");
  
      let images = $("[data-main-mobile='" + attr_of_wrapper + "']");
  
      $(images).each(function (i, el) {
        if (!$(this).hasClass("w-dyn-bind-empty") && i !== 0) {
          $(this).removeAttr("data-main-mobile");
          $(this).attr("class", "portfolio_item_thumbnails_image-mobile");
          $(this).attr("data-thumb-mobile", attr_of_wrapper);
          $("[data-thumb-images-mobile='" + 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-mobile").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-mobile");
  
      //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-mobile[data-main-mobile="' + 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);
    });
  });