const media = document.getElementById("video");
const sun = document.getElementById('sun')

let filter = null;

let saturation = 1;
let freq = 1000;
let gain = 0;

function showVideo() {
  sun.style.display = 'none';
  media.style.display = 'flex';
}

function hideVideo() {
  sun.style.display = 'flex';
  media.style.display = 'none';
}

function increaseValues() {
  saturation += 1;
  gain += 5;
  freq += 1000;
}

function createFilter() {
  if (filter === null) {
    const context = new AudioContext();
    const audioSource = context.createMediaElementSource(media);

    filter = context.createBiquadFilter();
    audioSource.connect(filter);

    filter.connect(context.destination);
    filter.type = "lowshelf";
  }
}

sun.addEventListener('click', (event) => {
  event.preventDefault();

  createFilter();
  filter.frequency.value = freq;
  filter.gain.value = gain;

  showVideo();
  media.play();
  media.style.filter = `saturate(${saturation})`;

  console.debug(`saturation: ${saturation} / lowFreq: ${freq} / gain: ${gain}`);
  increaseValues();
})

media.addEventListener('ended', () => {
  hideVideo();
  media.currentTime = 0;
})