$(document).ready(function () {
  /* Comented swiper for background gallery
  We take the approach that we discuss on the meeting.
  When you click on the side swiper it take the real index of image
  and change opacity on the background images */
  //
  // var gallery_swiper = new Swiper(".swiper.is-gallery", {
  //   slidesPerView: 1,
  //   speed: 500,
  //   effect: "fade",
  //   // effect: "coverflow",
  //   // coverflowEffect: {
  //   //   rotate: 30,
  //   //   slideShadows: false
  //   // },
  //   allowTouchMove: false
  //   // centeredSlides: true,
  //   // centeredSlidesBounds: true,
  //   // loop: true,
  //   // loopedSlides: 10
  // });

  /* Get how many images is loaded - to set up maximum 7 images in view or if there
  is less than 7 it will adjust */
  let totalSlides = $(".swiper-slide.is-side").length;
  let numOfSlides = totalSlides;

  //If window with is more than 992px then the side swiper will contain up to 7 images and when it's less then 992px it will show up to 5 images
  //We are make it on odd number because of centered images
  if ($(window).width() < 992) {
    if (totalSlides > 7) {
      totalSlides = 5;
    } else if (totalSlides % 2 == 0) {
      totalSlides = totalSlides - 1;
    }
  } else {
    if (totalSlides > 7) {
      totalSlides = 7;
    } else if (totalSlides % 2 == 0) {
      totalSlides = totalSlides - 1;
    }
  }

  //Set up the height of container plus the spaces defined in side_swiper initialization to adapt how many images will be in view
  //Height of the slide multiply by how many images are loaded
  let slide_swiper_height = 3 * totalSlides;

  //Padding between images - loaded images - 1 because of the space multiply with the margin defined in pixels
  let difference = (totalSlides - 1) * 10;

  //Set up the height of the wrapper where will be initialized the side_swiper with css calculate before
  $(".header-case_slide-gallery-wrapper").css(
    "height",
    "calc(" + slide_swiper_height + "rem + " + difference + "px)"
  );

  //Initialized of side_swiper with swiperjs
  var side_swiper = new Swiper(".swiper.is-side", {
    direction: "vertical",
    speed: 500,
    spaceBetween: 10,
    slideToClickedSlide: true,
    loop: true,
    loopedSlides: 15,
    centeredSlides: true,
    centeredSlidesBounds: true,
    initialSlide: 0,
    allowTouchMove: false,
    navigation: {
      nextEl: ".header-case_slide-gallery-next",
      prevEl: ".header-case_slide-gallery-prev"
    },
    on: {
      init: function () {
        //Settings opacity to 1 after fully loaded swiper - prevent flashing
        $(".header-case_slide-gallery").animate({ opacity: 1 }, 300);
      }
    }
  });

  //Defined how many slides will be in the view and update statement for swiperjs
  side_swiper.params.slidesPerView = totalSlides;
  side_swiper.update();

  /* This line of code make connection between
  the two swipers but in that solution the background swiper is disabled*/
  //side_swiper.controller.control = gallery_swiper;

  //Set numbers in the bottom center of the pages
  $(".header-case_content-mid-wrapper > div").text("1 — " + numOfSlides);

  //Setting to background images opacity to 0 and show only the first active one
  $(".swiper-slide.is-gallery").css("opacity", "0");
  $(".swiper-slide.is-gallery").each(function (index) {
    if (index === 0) {
      $(this).animate({ opacity: 1 }, 300);
    }
  });

  //When side_swiper function .on is called it will change the background image
  side_swiper.on("slideChange", function (e) {
    //Geting actual index
    let realIndex = side_swiper.realIndex;
    //Give opacity 1 to real index and other
    $(".swiper-slide.is-gallery").each(function (index) {
      if (index === realIndex) {
        $(this).animate({ opacity: 1 }, 300);
      } else {
        $(this).animate({ opacity: 0 }, 300);
      }
    });

    //Change numbers in the center bottom of the page
    $(".header-case_content-mid-wrapper > div").text(
      side_swiper.realIndex + 1 + " — " + numOfSlides
    );
  });
});