function formatTime( time ) {
  let minutes = Math.floor( time / 60 )
  let timeForSeconds = time - ( minutes * 60 ) // seconds without counted minutes
  let seconds = Math.floor( timeForSeconds )
  let miliseconds = Math.floor(( timeForSeconds * 1000 ) % 9 )
  let secondsReadable = seconds > 9 ? seconds : `0${seconds}` // To change 2:2 into 2:02
  let minutesReadable = minutes > 9 ? minutes : `00:0${minutes}` // To change 2:02 into 02:02
  return `${minutesReadable}:${secondsReadable}.${miliseconds}`
}

function playWall1() {
    document.getElementById("wallaudio1").play(), document.getElementById("playStopWall1").setAttribute("onclick", "stopWall1()"), $(".visibilityWall1").removeClass("wall-active"), $(".visibilityWall1").addClass("wall-play"), document.getElementById("timewall1").style.display = "none", document.getElementById("cur1").style.display = "block"
}

function stopWall1() {
    reloadAudioWall1()
    var l = document.getElementById("wallaudio1");
    l.pause(), document.getElementById("playStopWall1").setAttribute("onclick", "playWall1()"), $(".visibilityWall1").removeClass("wall-play"), $(".visibilityWall1").addClass("wall-active"), document.getElementById("timewall1").style.display = "block", document.getElementById("cur1").style.display = "none"
}

function playWall2() {
    document.getElementById("wallaudio2").play(), document.getElementById("playStopWall2").setAttribute("onclick", "stopWall2()"), $(".visibilityWall2").removeClass("wall-active"), $(".visibilityWall2").addClass("wall-play"), document.getElementById("timewall2").style.display = "none", document.getElementById("cur2").style.display = "block"
}

function stopWall2() {
    reloadAudioWall2()
    var l = document.getElementById("wallaudio2");
    l.pause(), document.getElementById("playStopWall2").setAttribute("onclick", "playWall2()"), $(".visibilityWall2").removeClass("wall-play"), $(".visibilityWall2").addClass("wall-active"), document.getElementById("timewall2").style.display = "block", document.getElementById("cur2").style.display = "none"
}

function playWall3() {
    document.getElementById("wallaudio3").play(), document.getElementById("playStopWall3").setAttribute("onclick", "stopWall3()"), $(".visibilityWall3").removeClass("wall-active"), $(".visibilityWall3").addClass("wall-play"), document.getElementById("timewall3").style.display = "none", document.getElementById("cur3").style.display = "block"
}

function stopWall3() {
    reloadAudioWall3()
    var l = document.getElementById("wallaudio3");
    l.pause(), document.getElementById("playStopWall3").setAttribute("onclick", "playWall3()"), $(".visibilityWall3").removeClass("wall-play"), $(".visibilityWall3").addClass("wall-active"), document.getElementById("timewall3").style.display = "block", document.getElementById("cur3").style.display = "none"
}

function playWall4() {
    document.getElementById("wallaudio4").play(), document.getElementById("playStopWall4").setAttribute("onclick", "stopWall4()"), $(".visibilityWall4").removeClass("wall-active"), $(".visibilityWall4").addClass("wall-play"), document.getElementById("timewall4").style.display = "none", document.getElementById("cur4").style.display = "block"
}

function stopWall4() {
    reloadAudioWall4()
    var l = document.getElementById("wallaudio4");
    l.pause(), document.getElementById("playStopWall4").setAttribute("onclick", "playWall4()"), $(".visibilityWall4").removeClass("wall-play"), $(".visibilityWall4").addClass("wall-active"), document.getElementById("timewall4").style.display = "block", document.getElementById("cur4").style.display = "none"
}


var music1 = document.getElementById("wallaudio1"),
    progressed1 = document.getElementById("progressed1"),
    progress_bar1 = document.getElementById("progress_bar1");
music1.ontimeupdate = function(e) {
    progressed1.style.width = Math.floor(100 * music1.currentTime / music1.duration) + "%", document.getElementById("cur1").innerHTML = "" + formatTime(this.currentTime)
}, progress_bar1.onclick = function(e) {
    music1.currentTime = e.offsetX / progress_bar1.offsetWidth * music1.duration
};
var music2 = document.getElementById("wallaudio2"),
    progressed2 = document.getElementById("progressed2"),
    progress_bar2 = document.getElementById("progress_bar2");
music2.ontimeupdate = function(e) {
    progressed2.style.width = Math.floor(100 * music2.currentTime / music2.duration) + "%", document.getElementById("cur2").innerHTML = "" + formatTime(this.currentTime)
}, progress_bar2.onclick = function(e) {
    music2.currentTime = e.offsetX / progress_bar2.offsetWidth * music2.duration
};
var music3 = document.getElementById("wallaudio3"),
    progressed3 = document.getElementById("progressed3"),
    progress_bar3 = document.getElementById("progress_bar3");
music3.ontimeupdate = function(e) {
    progressed3.style.width = Math.floor(100 * music3.currentTime / music3.duration) + "%", document.getElementById("cur3").innerHTML = "" + formatTime(this.currentTime)
}, progress_bar3.onclick = function(e) {
    music3.currentTime = e.offsetX / progress_bar3.offsetWidth * music3.duration
};
var music4 = document.getElementById("wallaudio4"),
    progressed4 = document.getElementById("progressed4"),
    progress_bar4 = document.getElementById("progress_bar4");
music4.ontimeupdate = function(e) {
    progressed4.style.width = Math.floor(100 * music4.currentTime / music4.duration) + "%", document.getElementById("cur4").innerHTML = "" + formatTime(this.currentTime)
}, progress_bar4.onclick = function(e) {
    music4.currentTime = e.offsetX / progress_bar4.offsetWidth * music4.duration
}


function endwallaudio1() {
    document.getElementById("playStopWall1").setAttribute("onclick", "playWall1()"),
    $('#titleWall1').attr('data-cd1-title-wall', '');
    $('#artistWall1').attr('data-cd1-artist-wall', '');
    $('#timewall1').attr('data-cd1-time-wall','00:00:00.0');
    $('#fullTimeWall1').attr('data-cd1-fulltime-wall', '00:00:00');
    $('#artcd1').attr('src', '');
    document.querySelector("#wallaudio1").currentTime=0;
    $('#wallaudio1').attr('src', '');
    $(".visibilityWall1").removeClass("wall-active");
    $(".visibilityWall1").removeClass("wall-play");
    $(".visibilityWall1").addClass("wall-noaudio");
    document.getElementById("timewall1").style.display = "block", document.getElementById("cur1").style.display = "none";
    $('#introWall1').attr('data-cd1-intro-wall', '00.00');
    window.top.end1();
}

function endwallaudio2() {
  document.getElementById("playStopWall2").setAttribute("onclick", "playWall2()"),
  $('#titleWall2').attr('data-cd2-title-wall', '');
  $('#artistWall2').attr('data-cd2-artist-wall', '');
  $('#timewall2').attr('data-cd2-time-wall','00:00:00.0');
  $('#fullTimeWall2').attr('data-cd2-fulltime-wall', '00:00:00');
  $('#artcd2').attr('src', '');
  document.querySelector("#wallaudio2").currentTime=0;
  $('#wallaudio2').attr('src', '');
  $(".visibilityWall2").removeClass("wall-active");
  $(".visibilityWall2").removeClass("wall-play");
  $(".visibilityWall2").addClass("wall-noaudio");
  document.getElementById("timewall2").style.display = "block", document.getElementById("cur2").style.display = "none";
  $('#introWall2').attr('data-cd2-intro-wall', '00.00');
  window.top.end2();
}

function endwallaudio3() {
  document.getElementById("playStopWall3").setAttribute("onclick", "playWall3()"),
  $('#titleWall3').attr('data-cd3-title-wall', '');
  $('#artistWall3').attr('data-cd3-artist-wall', '');
  $('#timewall3').attr('data-cd3-time-wall','00:00:00.0');
  $('#fullTimeWall3').attr('data-cd3-fulltime-wall', '00:00:00');
  $('#artcd3').attr('src', '');
  document.querySelector("#wallaudio3").currentTime=0;
  $('#wallaudio3').attr('src', '');
  $(".visibilityWall3").removeClass("wall-active");
  $(".visibilityWall3").removeClass("wall-play");
  $(".visibilityWall3").addClass("wall-noaudio");
  document.getElementById("timewall3").style.display = "block", document.getElementById("cur3").style.display = "none";
  $('#introWall3').attr('data-cd3-intro-wall', '00.00');
  window.top.end3();
}

function endwallaudio4() {
  document.getElementById("playStopWall4").setAttribute("onclick", "playWall4()"),
  $('#titleWall4').attr('data-cd4-title-wall', '');
  $('#artistWall4').attr('data-cd4-artist-wall', '');
  $('#timewall4').attr('data-cd4-time-wall','00:00:00.0');
  $('#fullTimeWall4').attr('data-cd4-fulltime-wall', '00:00:00');
  $('#artcd4').attr('src', '');
  document.querySelector("#wallaudio4").currentTime=0;
  $('#wallaudio4').attr('src', '');
  $(".visibilityWall4").removeClass("wall-active");
  $(".visibilityWall4").removeClass("wall-play");
  $(".visibilityWall4").addClass("wall-noaudio");
  document.getElementById("timewall4").style.display = "block", document.getElementById("cur4").style.display = "none";
  $('#introWall4').attr('data-cd4-intro-wall', '00.00');
  window.top.end4();
}




$(document).ready(function() {
  getAPIsongID();
  refreshAudioWall1();
  refreshAudioWall2();
  refreshAudioWall3();
  refreshAudioWall4();
});

function getAPIsongID() {
let url = apiURL;
fetch(url).then((response) =>
  response.json().then((data) => {
    console.log(data);
    document.getElementById("cdwall1ID").innerHTML = data.ID_1;
    document.getElementById("cdwall2ID").innerHTML = data.ID_2;
    document.getElementById("cdwall3ID").innerHTML = data.ID_3;
    document.getElementById("cdwall4ID").innerHTML = data.ID_4;
  })
);
}
getAPIsongID();
setInterval(getAPIsongID, msRefresh);

function refreshAudioWall1() {
  const cdwall1ID = document.getElementById('cdwall1ID');
  var audioID1 = document.getElementById('cdwall1').getAttribute('data-wall1-id');
  if (cdwall1ID.textContent === audioID1) {
  }else{
    let url = apiURL;
    fetch(url).then((response) =>
      response.json().then((data) => {
        console.log(data);
        $('#cdwall1').attr('data-wall1-id', data.ID_1);
        $('#titleWall1').attr('data-cd1-title-wall', data.title_1);
        $('#artistWall1').attr('data-cd1-artist-wall', data.artist_1);
        $('#timewall1').attr('data-cd1-time-wall', data.duration_1);
        $('#fullTimeWall1').attr('data-cd1-fulltime-wall', data.origdur_1);
        $('#artcd1').attr('src', dataArtURL+data.image_1);
        $('#introWall1').attr('data-cd1-intro-wall', data.intro_1);
        document.querySelector("#wallaudio1").currentTime=data.cue_1;
        $('#wallaudio1').attr('src', dataSongURL+data.path_1);
        $(".visibilityWall1").addClass("wall-active");
        $(".visibilityWall1").removeClass("wall-noaudio");
        if ($('#introWall1::before').is(':empty')) {
          $('#introWall1').attr('data-cd1-intro-wall', '00.00');
        }
      })
    );
  }
}
refreshAudioWall1();
setInterval(refreshAudioWall1, msRefresh);

function refreshAudioWall2() {
  const cdwall2ID = document.getElementById('cdwall2ID');
  var audioID2 = document.getElementById('cdwall2').getAttribute('data-wall2-id');
  if (cdwall2ID.textContent === audioID2) {
  }else{
    let url = apiURL;
    fetch(url).then((response) =>
      response.json().then((data) => {
        console.log(data);
        $('#cdwall2').attr('data-wall2-id', data.ID_2);
        $('#titleWall2').attr('data-cd2-title-wall', data.title_2);
        $('#artistWall2').attr('data-cd2-artist-wall', data.artist_2);
        $('#timewall2').attr('data-cd2-time-wall', data.duration_2);
        $('#fullTimeWall2').attr('data-cd2-fulltime-wall', data.origdur_2);
        $('#artcd2').attr('src', dataArtURL+data.image_2);
        $('#introWall2').attr('data-cd2-intro-wall', data.intro_2);
        document.querySelector("#wallaudio2").currentTime=data.cue_2;
        $('#wallaudio2').attr('src', dataSongURL+data.path_2);
        $(".visibilityWall2").addClass("wall-active");
        $(".visibilityWall2").removeClass("wall-noaudio");
        if ($('#introWall2::before').is(':empty')) {
          $('#introWall2').attr('data-cd2-intro-wall', '00.00');
        }
      })
    );
  }
}
refreshAudioWall2();
setInterval(refreshAudioWall2, msRefresh);

function refreshAudioWall3() {
  const cdwall3ID = document.getElementById('cdwall3ID');
  var audioID3 = document.getElementById('cdwall3').getAttribute('data-wall3-id');
  if (cdwall3ID.textContent === audioID3) {
  }else{
    let url = apiURL;
    fetch(url).then((response) =>
      response.json().then((data) => {
        console.log(data);
        $('#cdwall3').attr('data-wall3-id', data.ID_3);
        $('#titleWall3').attr('data-cd3-title-wall', data.title_3);
        $('#artistWall3').attr('data-cd3-artist-wall', data.artist_3);
        $('#timewall3').attr('data-cd3-time-wall', data.duration_3);
        $('#fullTimeWall3').attr('data-cd3-fulltime-wall', data.origdur_3);
        $('#artcd3').attr('src', dataArtURL+data.image_3);
        $('#introWall3').attr('data-cd3-intro-wall', data.intro_3);
        document.querySelector("#wallaudio3").currentTime=data.cue_3;
        $('#wallaudio3').attr('src', dataSongURL+data.path_3);
        $(".visibilityWall3").addClass("wall-active");
        $(".visibilityWall3").removeClass("wall-noaudio");
        if ($('#introWall3::before').is(':empty')) {
          $('#introWall3').attr('data-cd3-intro-wall', '00.00');
        }
      })
    );
  }
}
refreshAudioWall3();
setInterval(refreshAudioWall3, msRefresh);

function refreshAudioWall4() {
  const cdwall4ID = document.getElementById('cdwall4ID');
  var audioID4 = document.getElementById('cdwall4').getAttribute('data-wall4-id');
  if (cdwall4ID.textContent === audioID4) {
  }else{
    let url = apiURL;
    fetch(url).then((response) =>
      response.json().then((data) => {
        console.log(data);
        $('#cdwall4').attr('data-wall4-id', data.ID_4);
        $('#titleWall4').attr('data-cd4-title-wall', data.title_4);
        $('#artistWall4').attr('data-cd4-artist-wall', data.artist_4);
        $('#timewall4').attr('data-cd4-time-wall', data.duration_4);
        $('#fullTimeWall4').attr('data-cd4-fulltime-wall', data.origdur_4);
        $('#artcd4').attr('src', dataArtURL+data.image_4);
        $('#introWall4').attr('data-cd4-intro-wall', data.intro_4);
        document.querySelector("#wallaudio4").currentTime=data.cue_4;
        $('#wallaudio4').attr('src', dataSongURL+data.path_4);
        $(".visibilityWall4").addClass("wall-active");
        $(".visibilityWall4").removeClass("wall-noaudio");
        if ($('#introWall4::before').is(':empty')) {
          $('#introWall4').attr('data-cd4-intro-wall', '00.00');
        }
      })
    );
  }
}
refreshAudioWall4();
setInterval(refreshAudioWall4, msRefresh);



function reloadAudioWall1() {
  let url = apiURL;
  fetch(url).then((response) =>
    response.json().then((data) => {
      console.log(data);
      $('#cdwall1').attr('data-wall1-id', data.ID_1);
      document.querySelector("#wallaudio1").currentTime=data.cue_1;
      $(".visibilityWall1").addClass("wall-active");
      $(".visibilityWall1").removeClass("wall-noaudio");
    })
  );
}

function reloadAudioWall2() {
  let url = apiURL;
  fetch(url).then((response) =>
    response.json().then((data) => {
      console.log(data);
      $('#cdwall2').attr('data-wall2-id', data.ID_2);
      document.querySelector("#wallaudio2").currentTime=data.cue_2;
      $(".visibilityWall2").addClass("wall-active");
      $(".visibilityWall2").removeClass("wall-noaudio");
    })
  );
}

function reloadAudioWall3() {
  let url = apiURL;
  fetch(url).then((response) =>
    response.json().then((data) => {
      console.log(data);
      $('#cdwall3').attr('data-wall3-id', data.ID_3);
      document.querySelector("#wallaudio3").currentTime=data.cue_3;
      $(".visibilityWall3").addClass("wall-active");
      $(".visibilityWall3").removeClass("wall-noaudio");
    })
  );
}

function reloadAudioWall4() {
  let url = apiURL;
  fetch(url).then((response) =>
    response.json().then((data) => {
      console.log(data);
      $('#cdwall4').attr('data-wall4-id', data.ID_4);
      document.querySelector("#wallaudio4").currentTime=data.cue_4;
      $(".visibilityWall4").addClass("wall-active");
      $(".visibilityWall4").removeClass("wall-noaudio");
    })
  );
}

function setVol1() {
  var newVolume = document.getElementById("audioVol1").innerText;
  var setVolume1 = newVolume / 100;
  console.log(setVolume1);
  var audio1 = document.getElementById("wallaudio1");
  audio1.volume = setVolume1;
}

function setVol2() {
  var newVolume = document.getElementById("audioVol2").innerText;
  var setVolume2 = newVolume / 100;
  console.log(setVolume2);
  var audio2 = document.getElementById("wallaudio2");
  audio2.volume = setVolume2;
}

function setVol3() {
  var newVolume = document.getElementById("audioVol3").innerText;
  var setVolume3 = newVolume / 100;
  console.log(setVolume3);
  var audio3 = document.getElementById("wallaudio3");
  audio3.volume = setVolume3;
}

function setVol4() {
  var newVolume = document.getElementById("audioVol4").innerText;
  var setVolume4 = newVolume / 100;
  console.log(setVolume4);
  var audio4 = document.getElementById("wallaudio4");
  audio4.volume = setVolume4;
}
