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){
  //What is 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()
    }
  }
  })
}