const audios = document.querySelectorAll("audio");
const articles = document.querySelectorAll("article");
const kartenContainer = document.getElementById("flex-container");
outindex = 0;
playing = false;
playcolor = "#00ff3c";
loop = true;

function onplay(id) {
  id = parseInt(id);
  if (id > 0) {
    articles[id - 1].style.filter = "grayscale(" + (id + 1) * 20 + "%)";
    articles[id - 1].style.boxShadow = "0 0 0px 0px " + playcolor;
  }
  if (articles[id].offsetWidth * id == window.innerWidth / 2) {
    console.log(articles[id].offsetWidth);
    kartenContainer.scrollWidth += articles[id].offsetWidth;
  }
  articles[id].style.filter = "grayscale(0%)";
  articles[id].style.margin = "8px";
  articles[id].style.boxShadow = "0 0 6px 1px " + playcolor;
}

function nächste(id) {
  audios[id].pause();
  id = parseInt(id) + 1;
  audios[id].play();
  onplay(id);
}

function vorherige(id) {
  audios[id].pause();
  audios[id - 1].play();
  onplay(id - 1);
}

function looptrue() {
  if (loop) {
    loop = false;
    document.querySelector("#loop").innerHTML = "Kein Loop";
    document.querySelector("#loop").style.beckground;
  } else {
    loop = true;
    document.querySelector("#loop").innerHTML = "Loop";
  }
}

function abspielendiese(id) {
  if (playing) {
    //ON PAUSE
    audios[id].pause();
    playing = false;
    articles[id].style.margin = "0px";
    articles[id].style.boxShadow = "0 0 0px 0px " + playcolor;
  } else {
    //ON PLAY
    audios[id].play();
    playing = true;
    onplay(id);
  }
}

function abspielen() {
  if (playing) {
    //ON PAUSE
    audios[outindex].pause();
    playing = false;
    articles[outindex].style.margin = "0px";
    articles[outindex].style.boxShadow = "0 0 0px 0px " + playcolor;
    document.querySelector("#play").innerHTML = "Abspielen";
  } else {
    //ON PLAY
    audios[outindex].play();
    playing = true;
    document.querySelector("#play").innerHTML = "Pausieren";
    onplay(outindex);
  }
}

for (const [index, audio] of audios.entries()) {
  audio.addEventListener("ended", (event) => {
    if (index != audios.length - 1) {
      outindex = index + 1;
      audios[outindex].play();
      onplay(index + 1);
    } else {
      //Last song ON END
      articles[index].style.filter = "grayscale(80%)";
      articles[index].style.boxShadow = "0 0 0px 0px " + playcolor;
      articles[index].style.margin = "8px";
      articles[index].style.boxShadow = "0 0 6px 1px " + playcolor;
      if (loop) {
        audios[0].play();
      }
    }
  });
}
//Audio visualising