// HOME v3.0

const header = document.querySelector('.header');
const scrollPoint = document.getElementById('scroll-point');
const burgerMenu = document.querySelector('.burger-menu');



// sticky settings for makeItStick
function makeItStickSettings(){
  header.style.position = 'fixed';
  header.style.width = '100%';
  header.style.top = '0';
  header.style.zIndex = '10';
}

// function to add sticky settings on the header/navigation when scrolled 0px from the top of page
function makeItStick() {
  if(document.documentElement.scrollTop > 30 && window.innerWidth > 1000) {// greater than 1000px wide
    makeItStickSettings();
    scrollPoint.style.paddingTop = '75px';// padding when 0px from the top is hit
    document.querySelector('.up-arrow').style.left = '5px';
  }
  else if(document.documentElement.scrollTop > 30 && window.innerWidth < 1000 && window.innerWidth > 700){// range from 1000px to 700px width
    makeItStickSettings();
    scrollPoint.style.paddingTop = '95px';// padding when 0px from the top is hit
    document.querySelector('.up-arrow').style.left = '5px';
  }
  else if(document.documentElement.scrollTop > 25 && window.innerWidth < 700 && window.innerWidth > 400){// range from 700px to 400px width
    makeItStickSettings();
    scrollPoint.style.paddingTop = '65px';// padding when 0px from the top is hit
    document.querySelector('.up-arrow').style.left = '5px';
  }
  else if(document.documentElement.scrollTop > 40 && window.innerWidth < 400){// less than 400px wide
    makeItStickSettings();
    scrollPoint.style.paddingTop = '60px';// padding when 0px from the top is hit
    document.querySelector('.up-arrow').style.left = '5px';
  }else{
    header.style.position = 'relative';
    scrollPoint.style.paddingTop = '0px';// padding of the scroll point when at the top of the page
    document.querySelector('.up-arrow').style.left = '-40px';
  }
}

// sticks navigation to the top of the page
window.addEventListener('scroll', makeItStick);

// toggles the links menu left and right when clicked
burgerMenu.addEventListener('click', () =>{
  document.querySelector('.links-register-container').classList.toggle('move-links-on');
  document.querySelector('#burger-bars-1').classList.toggle('burger-bars-remove');
  document.querySelector('#burger-bars-2').classList.toggle('burger-bars-rotate-clockwise');
  document.querySelector('#burger-bars-3').classList.toggle('burger-bars-rotate-counter-clockwise');
  document.querySelector('#burger-bars-4').classList.toggle('burger-bars-remove');
});