// Choose language confirmation button
document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => {
  confirm_btn.addEventListener('click', (e) => {    
    window.location.href = '/' + document.getElementById('language_select').value
  })
})

// Copy link to clipboard
document.querySelectorAll('[data-share-url]').forEach((share_btn) => {  
  share_btn.addEventListener('click', (e) => {        
    navigator.clipboard.writeText(e.currentTarget.getAttribute('data-share-url'))
    alert('URL copied to clipboard!')
  })
})

// Open all external links in ny tab
for (const link of document.links) {
  if (link.hostname.replace(/^www\./i, "") != window.location.hostname.replace(/^www\./i, "") && (link.protocol == 'https:' || link.protocol == 'http:'))
    link.target = '_blank'
}


const input_range = document.getElementsByClassName('reveal')[0]
const max_value = 200
const speed = 12

var curr_value
var raf_id

if (input_range) {
  input_range.min = 0;
  input_range.max = max_value;
}
    
function unlockStartHandler() {
  window.cancelAnimationFrame(raf_id);    
  curr_value = +this.value;
}

function unlockEndHandler() {    
  curr_value = +this.value;
    
  if (curr_value >= this.max) {
    alert('Unlocked');
    
    // reset 
    this.value = 0;
    this.closest('.reveal__container').style.setProperty('--opacity', 1);
  } else {
    raf_id = window.requestAnimationFrame(animateHandler);
  }
}

// handle range animation
function animateHandler() {
    
  input_range.value = curr_value;
  input_range.closest('.reveal__container').style.setProperty('--opacity', 1 - (input_range.value/input_range.max));
  
  // continue?
  if (curr_value > -1) {
    window.requestAnimationFrame(animateHandler);   
  }
  
  // decrement
  curr_value = curr_value - speed;
}

if (input_range) {
  input_range.addEventListener('mousedown', unlockStartHandler, false)
  input_range.addEventListener('mousestart', unlockStartHandler, false)
  input_range.addEventListener('mouseup', unlockEndHandler, false)
  input_range.addEventListener('touchend', unlockEndHandler, false)

  input_range.addEventListener("input", (e) => {
    e.currentTarget.closest('.reveal__container').style.setProperty('--opacity', 1 - (e.currentTarget.value/e.currentTarget.max))
  }) 
}