// designed by Angeliki Diakrousi
// scripts for tab button 


  function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}


// dropdown menu
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show2");
}

// Close the dropdown if the user clicks outside of it
window.onclick2 = function(event) {
  if (!event.target.matches('.dropbtn2')) {
    var dropdowns = document.getElementsByClassName("dropdown-content2");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show2')) {
        openDropdown.classList.remove('show2');
      }
    }
  }
};

// for thesis
// var socket = new WebSocket(`wss://hypothes.is/ws?access_token=${'6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik'}`)



// <!-- scripts for the soundwalk player-->

var a1 = document.getElementById("a1"),
  a2 = document.getElementById("a2"),
  but = document.getElementById("but");
  but.addEventListener("click", function () {
  if (a1.paused) {
    a1.play();
    a2.play();
    a3.play();
    a4.play();

  } else {
    a1.pause();
    a2.pause();
    a3.pause();
    a4.pause();
  }

})
a1.addEventListener("play", function(){
  but.innerHTML="pause"
})

a1.addEventListener("pause", function(){
  but.innerHTML="listen"
})

var links=document.querySelectorAll("div.sub a")
for (var i=0, l=links.length; i<l; i++) {
  var a = links[i];
  a.addEventListener("click", function(e) {
    console.log("CLICK", this);
    var t=parseFloat(this.getAttribute("data-start"))
    a1.currentTime=t
    a2.currentTime=t
    a3.currentTime=t
    a4.currentTime=t
    e.preventDefault()
    a1.play();
    a2.play();
    a3.play();
    a4.play();
  })

}






var b1 = document.getElementById("b1"),
  b2 = document.getElementById("b2"),
  butB = document.getElementById("butB");
butB.addEventListener("click", function () {
  if (b1.paused) {
    b1.play();
    b2.play();
    b3.play();

  } else {
    b1.pause();
    b2.pause();
    b3.pause();
  }

})
b1.addEventListener("play", function(){
  butB.innerHTML="pause"
})

b1.addEventListener("pause", function(){
  butB.innerHTML="listen"
})

var links=document.querySelectorAll("div.subB a")
for (var i=0, l=links.length; i<l; i++) {
  var b = links[i];
  b.addEventListener("click", function(e) {
    console.log("CLICK", this);
    var t=parseFloat(this.getAttribute("data-start"))
    b1.currentTime=t
    b2.currentTime=t
    b3.currentTime=t
    e.preventDefault()
    b1.play();
    b2.play();
    b3.play();
  })

}