
/*---------------Page Loder ----------------*/

setTimeout(function () {
  var loder = document.querySelector('.loader-bg');
  document.body.removeChild(loder);
}, 1500);

/*----X-------------Page Loder --------X------*/

/*--------cta button ripple animation ------*/
$(function () {

  //creating a style object for the ripple effect
  function RippleStyle(width, height, posX, posY) {
    this.width = (width <= height) ? height : width;
    this.height = (width <= height) ? height : width;
    this.top = posY - (this.height * 0.5);
    this.left = posX - (this.width * 0.5);
  }

  $('.cta-btn').on('mousedown', function (e) {
    e.preventDefault();
    //appending an element with a class name "btn-ripple"
    var rippleEl = $('<span class="btn-ripple"></span>').appendTo(this);

    //getting the button's offset position
    var pos = $(this).offset();

    //get the button's width and height
    var width = $(this).outerWidth();
    var height = $(this).outerHeight();

    //get the cursor's x and y position within the button
    var posX = e.pageX - pos.left;
    var posY = e.pageY - pos.top;

    //adding a css style to the ripple effect
    var rippleStyle = new RippleStyle(width, height, posX, posY);
    rippleEl.css(rippleStyle);
  });

  //this event listener will be triggered once the ripple animation is done
  $('.cta-btn').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', '.btn-ripple', function () {
    $(this).remove();
  });
});
/*----X----cta button ripple animation ---X---*/
/*--------cta button click ---------*/
var ctaBtn = document.querySelector('.cta-btn');


ctaBtn.addEventListener('click' , gotoContact);

function gotoContact(){
  location.href = '#contact';
  
}




/*---X-----cta button click ----X-----*/


/*-------Type Writing Animation ------*/

const TypeWriter = function (txtElement, words, wait = 3000) {
  this.txtElement = txtElement;
  this.words = words;
  this.txt = '';
  this.wordIndex = 0;
  this.wait = parseInt(wait, 7);
  this.type();
  this.isDeleting = false;
}

//type method
TypeWriter.prototype.type = function () {
  //current index of word
  const current = this.wordIndex % this.words.length;
  // get full text of current word
  const fullTxt = this.words[current];


  // check if deleting
  if (this.isDeleting) {
    // remove char
    this.txt = fullTxt.substring(0, this.txt.length - 1);


  } else {
    //add char
    this.txt = fullTxt.substring(0, this.txt.length + 1);


  }
  // insert txt into element
  this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

  //type speed
  let typeSpeed = 100;
  if (this.isDeleting) {
    typeSpeed /= 2;
  }
  // check if word complete
  if (!this.isDeleting && this.txt === fullTxt) {
    //make pause at end
    typeSpeed = this.wait;
    //set delete to true
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    // move to next word
    this.wordIndex++;
    //pause  before start typing
    typeSpeed = 300;
  }
  setTimeout(() => this.type(), typeSpeed);
}
// init on DOM load
document.addEventListener('DOMContentLoaded', init);

// Init app
function init() {
  const txtElement = document.querySelector('.txt-type');
  const words = JSON.parse(txtElement.getAttribute('data-words'));
  const wait = txtElement.getAttribute('data-wait');

  //init Typewriter
  new TypeWriter(txtElement, words, wait);
}

/*---X----Type Writing Animation --------X----*/




/*---------Toggle Menu  (hamburger using jquery)------------- */
$(document).ready(function () {
  $('.icon, a').click(function () {
    $('.icon').toggleClass('active');
    $('nav ul').toggleClass('action');

  });

});


/*----X-----Toggle Menu(hamburger)-------X------ */


/*-------------navbar related animation(using gsap)--------*/


TweenMax.staggerFrom(" .logo , nav ul li", 0.5, { opacity: 0, y: 200, delay: 1.5 }, 0.2);
TweenMax.staggerFrom("#home h2 , #home h1 , #home button", 1.5, { opacity: 0, y: 200, delay: 3 }, 1.2);

/*-----X--------navbar related animation(using gsap)----X----*/

/*----------------Full page Scrolling Animation---------*/
window.sr = ScrollReveal();
sr.reveal('.left-col', {
  duration: 400,
  origin:'left',
  viewFactor: 0.2,
   distance:'0px'
});
sr.reveal('#about .about-title', {
  delay: 410,
  duration: 450,
  origin:'bottom',
  viewFactor: 0.2,
   distance:'50px'
});
sr.reveal('.slogan-text', {
  delay: 800,
  duration: 500,
  origin:'bottom',
  viewFactor: 0.2,
   distance:'50px'
});


sr.reveal('.cover', {
  delay: 710,
  duration: 500,
  opacity:0.1,
  viewFactor: 0.2,
   distance:'0px'
});
sr.reveal('.right-col', {
  delay: 1000,
  duration: 500,
  opacity:0.2,
  viewFactor: 0.2,
  
});
sr.reveal('.upper', {
  delay: 1100,
  duration: 500,
  opacity:0.2,
  viewFactor: 0.2,
 
});
sr.reveal('.bottom', {
  delay: 1200,
  duration: 400,
  opacity:0.2,
  viewFactor: 0.2,
  
});
sr.reveal(' * .section-title', {
  delay: 400,
  duration: 800,
  origin:'bottom',
  viewFactor: 0.2,
   distance:'50px'
});


sr.reveal('#services  .service-box', {
  
  delay: 800,
  duration: 500,
  opacity:0.2,
  viewFactor: 0.2,
   distance:'0px'
});

sr.reveal('#services  .sevice-icon-holder, .service-title, .service-decription ', {
  delay: 1000,
  duration: 1000,
  origin:'bottom',
  viewFactor: 0.2,
   distance:'50px'
});
sr.reveal('.button-group', {
  delay: 600,
  duration: 1000,
  origin:'bottom',
  viewFactor: 0.2,
   distance:'50px'
});
sr.reveal('.our-project', {
  delay: 600,
  duration: 1000,
  opacity:0,
  viewFactor: 0.2,
   distance:'50px'
});
sr.reveal('.contact-form', {
  delay: 100,
  duration: 300,
  opacity:0,
  viewFactor: 0.2,
   distance:'50px'
});
sr.reveal('.social-network', {
  delay: 300,
  duration: 1000,
  opacity:0,
  viewFactor: 0.2,
   distance:'50px'
});
sr.reveal('.footer-text', {
  delay: 400,
  duration: 1100,
  opacity:0,
  viewFactor: 0.2,
   distance:'50px'
});
sr.reveal('#contact', {
  delay: 400,
  duration: 600,
  opacity:0,
  viewFactor: 0.2,
   distance:'50px'
});

/*----X-----------Full page Scrolling Animation----X--*/


/*-------navbar color change on scroll -----*/
var nav = document.querySelector('nav');
var a = document.querySelectorAll('nav ul li a');
document.addEventListener('scroll', navBgChange);
function navBgChange() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
    nav.className = "navbarChange";

    a.forEach(function (link) {
      link.className = "navColChange";
    });
  } else {
    nav.className = "";
    a.forEach(function (link) {
      link.className = "";
    });
  }
}

/*---X----navbar color change on scroll ---X--*/

/*------------About page section -----------*/
// 



/*-----X-------About page section -----X------*/

/*---------Service Section ----------------*/



/*----X-----Service Section --------X--------*/

/*----------Portfolio Section ------------*/

$(document).ready(function () {


  let $btns = $('.project-area .button-group button');


  $btns.click(function (e) {

    $('.project-area .button-group button').removeClass('active');
    e.target.classList.add('active');

    let selector = $(e.target).attr('data-filter');
    $('.project-area .grid').isotope({
      filter: selector
    });

    return false;
  })

  $('.project-area .button-group #btn1').trigger('click');

});
 

/*-------------------project info----------------------------*/
var projects = document.querySelectorAll('.project-area .grid .our-project .img');
var projectTitle = document.querySelector('.project-area .grid .our-project .img .project-title');
var infoWrappers = document.querySelectorAll('.info-wrapper');
var imgs = document.querySelectorAll('.projectimg');
var closeBtns = document.querySelectorAll('.close-btn');
var viewDemo = document.querySelectorAll('.view-demo');

imgs.forEach(img => {

  img.onclick = function () {

    this.children[1].classList.toggle('displayToggle');

  }

});

var demos = [...viewDemo];
demos.map(demo => demo.addEventListener('click' , function(e) {
   e.stopPropagation();
}));


/*-------X------------project info---------------X-------------*/
/*----X------Portfolio Section --------X----*/







