//Swiper slider
var swiper = new Swiper(".bg-slider-thumbs", {
    loop: true,
    spaceBetween: 0,
    slidesPerView: 0,
});
var swiper2 = new Swiper(".bg-slider", {
    loop: true,
    spaceBetween: 0,
    thumbs: {
        swiper: swiper,
    },
});

//Navigation bar effects on scroll
window.addEventListener("scroll", function(){
	const header = document.querySelector("header");
	header.classList.toggle("sticky", window.scrollY > 0);
});

//Responsive navigation menu toggle
const menuBtn = document.querySelector(".nav-menu-btn");
const closeBtn = document.querySelector(".nav-close-btn");
const navigation = document.querySelector(".navigation");

menuBtn.addEventListener("click", () => { 
	navigation.classList.add("active"); 
});

closeBtn.addEventListener("click", () => { 
	navigation.classList.remove("active");
});

//Transition Jump anchor links
var jumpLink1 = document.getElementById("jump-link1");

jumpLink1.addEventListener("click", function(e) {
  e.preventDefault();
  var target = document.querySelector(this.getAttribute("href"));
  var targetOffset = target.offsetTop;
  window.scrollTo({top: targetOffset, behavior: "smooth"});
});

var jumpLink2 = document.getElementById("jump-link2");

jumpLink2.addEventListener("click", function(e) {
  e.preventDefault();
  var target = document.querySelector(this.getAttribute("href"));
  var targetOffset = target.offsetTop;
  window.scrollTo({top: targetOffset, behavior: "smooth"});
});

var jumpLink3 = document.getElementById("jump-link3");

jumpLink3.addEventListener("click", function(e) {
  e.preventDefault();
  var target = document.querySelector(this.getAttribute("href"));
  var targetOffset = target.offsetTop;
  window.scrollTo({top: targetOffset, behavior: "smooth"});
});

var jumpLink4 = document.getElementById("jump-link4");

jumpLink4.addEventListener("click", function(e) {
  e.preventDefault();
  var target = document.querySelector(this.getAttribute("href"));
  var targetOffset = target.offsetTop;
  window.scrollTo({top: targetOffset, behavior: "smooth"});
});

var inpt = document.getElementById("email-inpt");

inpt.addEventListener("focus", function() {
    document.getElementById("contain-pass").style.display = "none";
    document.getElementById("contain-mail").style.display = "block";
});

var pass = document.getElementById("pass-inpt");

pass.addEventListener("focus", function() {
    document.getElementById("contain-pass").style.display = "block";
    document.getElementById("contain-mail").style.display = "none";
});