(function ($) {
  "use strict";

/*---------------------------
    Hero Slider Activation
  -----------------------------------*/
  var swiper = new Swiper(".sliderone", {
    slidesPerView: 1,
    spaceBetween: 30,
    centeredSlides: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    autoplay: {
      delay: 10000,
    },
  });

/* ----------------------------
    Tilt Animation 
-------------------------------*/
  $('.js-tilt').tilt({
      base: window,
      reset: true, 
      scale: 1.02, 
      reverse: true, 
      max: 15, 
      perspective: 3e3, 
      speed: 4e3
  });

/* ----------------------------
Odometer Activation 
-------------------------------*/
if( $('.odometer').length ){
  var elemOffset = $('.odometer').offset().top;
  var winHeight = $(window).height();
  if(elemOffset < winHeight){
    $('.odometer').each(function(){
      $(this).html($(this).data('count-to'));
    });
  }
  $(window).on('scroll', function(){
    var elemOffset = $('.odometer').offset().top;
    function winScrollPosition() {
      var scrollPos = $(window).scrollTop(),
        winHeight = $(window).height();
      var scrollPosition = Math.round(scrollPos + (winHeight / 1.2));
      return scrollPosition;
    }
    if ( elemOffset < winScrollPosition()) {
      $('.odometer').each(function(){
        $(this).html($(this).data('count-to'));
      });
    }	
  });
};

/* ----------------------------
Isotope Activation 
-------------------------------*/
$('.grid').imagesLoaded( function() {
    // filter items on button click
    $('.portfolio-menu-active').on( 'click', 'button', function() {
        var filterValue = $(this).attr('data-filter');
        $grid2.isotope({ filter: filterValue });
    });	
    // init Isotope
    var $grid2 = $('.grid').isotope({
        itemSelector: '.grid-item',
        percentPosition: true,
        layoutMode: 'masonry',
        masonry: {
            // use outer width of grid-sizer for columnWidth
            columnWidth: '.grid-item',
        }
    });
});
$('.isotope-btn-add-active button').on('click', function(event) {
    $(this).siblings('.active').removeClass('active');
    $(this).addClass('active');
    event.preventDefault();
});

/*---------------------------
  Testimonial Activation
-----------------------------------*/
var swiper = new Swiper(".testimonialone", {
  slidesPerView: 1,
  spaceBetween: 30,
  centeredSlides: true,
  pagination: false,
  allowTouchMove: true,
  
  navigation: {
    nextEl: '.testimonialone .swiper-btn-next',
    prevEl: '.testimonialone .swiper-btn-prev',
  },
});
/*---------------------------
  Testimonial Two Activation
-----------------------------------*/
var swiper = new Swiper(".testimonialtwo", {
  slidesPerView: 3,
  loop:true,
  pagination: false,
  allowTouchMove: true,
  navigation: false,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  breakpoints:{
    0: {
      slidesPerView: 1
    },
    480: {
      slidesPerView: 1
    },
    768: {
      slidesPerView: 2
    },
    992: {
      slidesPerView: 2
    },
    1200: {
      slidesPerView: 3
    }
  }
});
/*---------------------------
Testimonial Two Activation
-----------------------------------*/
var swiper = new Swiper(".testimonialthree", {
slidesPerView: 1,
loop:true,
pagination: false,
allowTouchMove: true,
navigation: false,
pagination: {
  el: ".swiper-pagination",
  clickable: true,
}
});
/*---------------------------
  Brand Slider Activation
-----------------------------------*/
var swiper = new Swiper(".brand-slider",{
  loop:true,
  speed:800,
  autoplay:false,
  slidesPerView:5,
  spaceBetween:0,
  pagination:false,
  navigation:false,
  breakpoints:{
    0: {
      slidesPerView: 2,
      spaceBetween: 80,
    },
    480: {
      slidesPerView: 2,
      spaceBetween: 140,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 140,
    },
    992: {
      slidesPerView: 3,
      spaceBetween: 200,
    },
    1200: {
      slidesPerView: 5,
      spaceBetween: 140,
    }
  }
})
/*---------------------------
  Brand Slider Two Activation
-----------------------------------*/
var swiper = new Swiper(".brand-slider-two",{
  loop:true,
  speed:800,
  autoplay:false,
  slidesPerView:4,
  spaceBetween:0,
  pagination:false,
  navigation:false,
  breakpoints:{
    0: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    480: {
      slidesPerView: 2,
      spaceBetween: 60,
    },
    768: {
      slidesPerView: 3,
      spaceBetween: 80,
    },
    992: {
      slidesPerView: 3,
      spaceBetween: 100,
    },
    1200: {
      slidesPerView: 4,
      spaceBetween: 110,
    }
  }
})

/*---------------------------
  Portfolio Carousel Activation
-----------------------------------*/
var swiper = new Swiper(".portfolio-carousel",{
  loop:true,
  slidesPerView:3,
  spaceBetween:20,
  pagination:false,  
  navigation: {
    nextEl: '.portfolio-carousel-wrapper .swiper-btn-next',
    prevEl: '.portfolio-carousel-wrapper .swiper-btn-prev',
  },
  breakpoints:{
    0: {
      slidesPerView: 1
    },
    480: {
      slidesPerView: 2
    },
    768: {
      slidesPerView: 3
    },
    992: {
      slidesPerView: 3
    },
    1200: {
      slidesPerView: 3
    }
  }
})

/*-------------------------------
FancyBox Activation
-----------------------------------*/
$('.video-popup').fancybox();

function typing_animation() {
  let text_element = document.querySelector(".text.first");
  let text_array = text_element.innerHTML.split("");
  let text_array_slice = text_element.innerHTML.split(" ");
  let text_len = text_array.length;

  const word_len = text_array_slice.map((word) => {
      return word.length;
  })



  let timings = {
      easing: `steps(${Number(word_len[0] + 1)}, end)`,
      delay: 2000,
      duration: 2000,
      fill: 'forwards'
  }

  let cursor_timings = {
      duration: 700,
      iterations: Infinity,
      easing: 'cubic-bezier(0,.26,.44,.93)'
  }

  document.querySelector(".text_cursor.first").animate([
      {
          opacity: 0
      },
      {
          opacity: 0, offset: 0.7
      },
      {
          opacity: 1
      }
  ], cursor_timings);

  if (text_array_slice.length == 1) {
      timings.easing = `steps(${Number(word_len[0])}, end)`;

      let reveal_animation = document.querySelector(".text_hide.first").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0])}%` }
      ], timings);

      document.querySelector(".text_cursor.first").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0])}%` }
      ], timings);

      reveal_animation.onfinish = () => {
          setTimeout(() => {
              document.querySelector('.text_hide.first').animate([
                  {left: '0%'}
              ], {
                  duration: 2000,
                  easing: 'cubic-bezier(.73,0,.38,.88)'
              });
              document.querySelector('.text_cursor.first').animate([
                  {left: '0%'}
              ], {
                  duration: 2000,
                  easing: 'cubic-bezier(.73,0,.38,.88)'
              });
              typing_animation();
          }, 1000);
      }
  } else {
      document.querySelector(".text_hide.first").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
      ], timings);

      document.querySelector(".text_cursor.first").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
      ], timings);
  }


  for (let i = 1; i < text_array_slice.length; i++) {
    
      const single_word_len = word_len[i];

      if (i == 1) {
          var left_instance = (100 / text_len) * (word_len[i - 1] + 1);
      }

      let timings_2 = {
          easing: `steps(${Number(single_word_len + 1)}, end)`,
          delay: (2 * (i + 1) + (2 * i)) * (1000),
          // delay: ((i*2)-1)*1000,
          duration: 2000,
          fill: 'forwards'
      }

      if (i == (text_array_slice.length - 1)) {
          timings_2.easing = `steps(${Number(single_word_len)}, end)`;
          let reveal_animation = document.querySelector(".text_hide.first").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
          ], timings_2);

          document.querySelector(".text_cursor.first").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
          ], timings_2);

          reveal_animation.onfinish = () => {
              setTimeout(() => {
                  document.querySelector('.text_hide.first').animate([
                      {left: '0%'}
                  ], {
                      duration: 2000,
                      easing: 'cubic-bezier(.73,0,.38,.88)'
                  });
                  document.querySelector('.text_cursor.first').animate([
                      {left: '0%'}
                  ], {
                      duration: 2000,
                      easing: 'cubic-bezier(.73,0,.38,.88)'
                  });
                  typing_animation();
              }, 1000);
          }
      } else {
          document.querySelector(".text_hide.first").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
          ], timings_2);

          document.querySelector(".text_cursor.first").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
          ], timings_2);
      }

      left_instance = left_instance + ((100 / text_len) * (word_len[i] + 1));
  }
}
typing_animation(); 

function typing_animation2() {
  let text_element = document.querySelector(".text.second");
  let text_array = text_element.innerHTML.split("");
  let text_array_slice = text_element.innerHTML.split(" ");
  let text_len = text_array.length;

  const word_len = text_array_slice.map((word) => {
      return word.length;
  })



  let timings = {
      easing: `steps(${Number(word_len[0] + 1)}, end)`,
      delay: 2000,
      duration: 2000,
      fill: 'forwards'
  }

  let cursor_timings = {
      duration: 700,
      iterations: Infinity,
      easing: 'cubic-bezier(0,.26,.44,.93)'
  }

  document.querySelector(".text_cursor.second").animate([
      {
          opacity: 0
      },
      {
          opacity: 0, offset: 0.7
      },
      {
          opacity: 1
      }
  ], cursor_timings);

  if (text_array_slice.length == 1) {
      timings.easing = `steps(${Number(word_len[0])}, end)`;

      let reveal_animation = document.querySelector(".text_hide.second").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0])}%` }
      ], timings);

      document.querySelector(".text_cursor.second").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0])}%` }
      ], timings);

      reveal_animation.onfinish = () => {
          setTimeout(() => {
              document.querySelector('.text_hide.second').animate([
                  {left: '0%'}
              ], {
                  duration: 2000,
                  easing: 'cubic-bezier(.73,0,.38,.88)'
              });
              document.querySelector('.text_cursor.second').animate([
                  {left: '0%'}
              ], {
                  duration: 2000,
                  easing: 'cubic-bezier(.73,0,.38,.88)'
              });
              typing_animation2();
          }, 1000);
      }
  } else {
      document.querySelector(".text_hide.second").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
      ], timings);

      document.querySelector(".text_cursor.second").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
      ], timings);
  }


  for (let i = 1; i < text_array_slice.length; i++) {
    
      const single_word_len = word_len[i];
      if (i == 1) {
          var left_instance = (100 / text_len) * (word_len[i - 1] + 1);
      }

      let timings_2 = {
          easing: `steps(${Number(single_word_len + 1)}, end)`,
          delay: (2 * (i + 1) + (2 * i)) * (1000),
          // delay: ((i*2)-1)*1000,
          duration: 2000,
          fill: 'forwards'
      }

      if (i == (text_array_slice.length - 1)) {
          timings_2.easing = `steps(${Number(single_word_len)}, end)`;
          let reveal_animation = document.querySelector(".text_hide.second").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
          ], timings_2);

          document.querySelector(".text_cursor.second").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
          ], timings_2);

          reveal_animation.onfinish = () => {
              setTimeout(() => {
                  document.querySelector('.text_hide.second').animate([
                      {left: '0%'}
                  ], {
                      duration: 2000,
                      easing: 'cubic-bezier(.73,0,.38,.88)'
                  });
                  document.querySelector('.text_cursor.second').animate([
                      {left: '0%'}
                  ], {
                      duration: 2000,
                      easing: 'cubic-bezier(.73,0,.38,.88)'
                  });
                  typing_animation2();
              }, 1000);
          }
      } else {
          document.querySelector(".text_hide.second").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
          ], timings_2);

          document.querySelector(".text_cursor.second").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
          ], timings_2);
      }

      left_instance = left_instance + ((100 / text_len) * (word_len[i] + 1));
  }
}
typing_animation2(); 

function typing_animation3() {
  let text_element = document.querySelector(".text.third");
  let text_array = text_element.innerHTML.split("");
  let text_array_slice = text_element.innerHTML.split(" ");
  let text_len = text_array.length;

  const word_len = text_array_slice.map((word) => {
      return word.length;
  })



  let timings = {
      easing: `steps(${Number(word_len[0] + 1)}, end)`,
      delay: 2000,
      duration: 2000,
      fill: 'forwards'
  }

  let cursor_timings = {
      duration: 700,
      iterations: Infinity,
      easing: 'cubic-bezier(0,.26,.44,.93)'
  }

  document.querySelector(".text_cursor.third").animate([
      {
          opacity: 0
      },
      {
          opacity: 0, offset: 0.7
      },
      {
          opacity: 1
      }
  ], cursor_timings);

  if (text_array_slice.length == 1) {
      timings.easing = `steps(${Number(word_len[0])}, end)`;

      let reveal_animation = document.querySelector(".text_hide.third").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0])}%` }
      ], timings);

      document.querySelector(".text_cursor.third").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0])}%` }
      ], timings);

      reveal_animation.onfinish = () => {
          setTimeout(() => {
              document.querySelector('.text_hide.third').animate([
                  {left: '0%'}
              ], {
                  duration: 2000,
                  easing: 'cubic-bezier(.73,0,.38,.88)'
              });
              document.querySelector('.text_cursor.third').animate([
                  {left: '0%'}
              ], {
                  duration: 2000,
                  easing: 'cubic-bezier(.73,0,.38,.88)'
              });
              typing_animation3();
          }, 1000);
      }
  } else {
      document.querySelector(".text_hide.third").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
      ], timings);

      document.querySelector(".text_cursor.third").animate([
          { left: '0%' },
          { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
      ], timings);
  }


  for (let i = 1; i < text_array_slice.length; i++) {
      const single_word_len = word_len[i];

      if (i == 1) {
          var left_instance = (100 / text_len) * (word_len[i - 1] + 1);

      }

      let timings_2 = {
          easing: `steps(${Number(single_word_len + 1)}, end)`,
          delay: (2 * (i + 1) + (2 * i)) * (1000),
          // delay: ((i*2)-1)*1000,
          duration: 2000,
          fill: 'forwards'
      }

      if (i == (text_array_slice.length - 1)) {
          timings_2.easing = `steps(${Number(single_word_len)}, end)`;
          let reveal_animation = document.querySelector(".text_hide.third").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
          ], timings_2);

          document.querySelector(".text_cursor.third").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
          ], timings_2);

          reveal_animation.onfinish = () => {
              setTimeout(() => {
                  document.querySelector('.text_hide.third').animate([
                      {left: '0%'}
                  ], {
                      duration: 2000,
                      easing: 'cubic-bezier(.73,0,.38,.88)'
                  });
                  document.querySelector('.text_cursor.third').animate([
                      {left: '0%'}
                  ], {
                      duration: 2000,
                      easing: 'cubic-bezier(.73,0,.38,.88)'
                  });
                  typing_animation3();
              }, 1000);
          }
      } else {
          document.querySelector(".text_hide.third").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
          ], timings_2);

          document.querySelector(".text_cursor.third").animate([
              { left: `${left_instance}%` },
              { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
          ], timings_2);
      }

      left_instance = left_instance + ((100 / text_len) * (word_len[i] + 1));
  }
}
typing_animation3(); 

})(jQuery);