// designed by Angeliki Diakrousi
// draggable

$(document).ready(function() {
    var a = 3;
    $('.draggable').draggable({
   start: function(event, ui) { $(this).css("z-index", a++); }
});
//     $('#resize').resizable({handles: 'se'}).draggable({
//    start: function(event, ui) { $(this).css("z-index", a++); }
// });;

  // font size relative to div draggable/resizable size
  var $wrapper = $(".scaleable-wrapper");
  $wrapper.each(function (d) {
    var $this = $(this);
    // var $el = $("#very-specific-design");
    var elHeight = $this.outerHeight();
    var elWidth = $this.outerWidth();

    $this.resizable({
      resize: doResize
    });

    function doResize(event, ui) {
      
      var scale, origin;
        
      scale = Math.min(
        ui.size.width / elWidth,    
        ui.size.height / elHeight
      );
      // scale=1.0;
      // scale=2*scale

      $this.css({
        transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
      });
      
    }

    var starterData = { 
        size: {
          width: $this.width(),
          height: $this.height()
        }
    }
    // console.log("starterData", starterData, this);
    doResize(null, starterData);
 

  });








// 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";
}


// <!-- 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 interrupt = document.getElementById("interrupt");
butI = document.getElementById("butI");
butI.addEventListener("click", function () {
  if (interrupt.paused) {
    b1.pause();
    b2.pause();
    b3.pause();
    a1.pause();
    a2.pause();
    a3.pause();
    a4.pause();
    interrupt.play();

  } else {
    interrupt.pause();
    a1.play();
    a2.play();
    a3.play();
    a4.play();
    b1.play();
    b2.play();
    b3.play();
  }

})
interrupt.addEventListener("play", function(){
  butI.innerHTML="stop interrupt"
})

interrupt.addEventListener("pause", function(){
  butI.innerHTML="interrupt"
})



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();
  })

}

var dialogueTimings = [0,8,16,28,33,50,77,120,136],
        dialogues = document.querySelectorAll('#transcript>div'),
        transcriptWrapper = document.querySelector('#transcriptWrapper'),
        audio = document.querySelector('#a2'),
        previousDialogueTime = -1;   

     function playTranscript() {

        var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));

        if(previousDialogueTime !== currentDialogueTime) {
            previousDialogueTime = currentDialogueTime;
            var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];
            transcriptWrapper.scrollTop  = currentDialogue.offsetTop - 50;  
            var previousDialogue = document.getElementsByClassName('speaking')[0];
            if(previousDialogue !== undefined)
                previousDialogue.className = previousDialogue.className.replace('speaking','');
            currentDialogue.className +=' speaking';
        }
    }
;

var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
        dialogues3 = document.querySelectorAll('#transcript3>div'),
        transcriptWrapper3 = document.querySelector('#transcriptWrapper3'),
        audio = document.querySelector('#a3'),
        previousDialogueTime = -1;   

     function playTranscript3() {

        var currentDialogueTime = Math.max.apply(Math, dialogueTimings3.filter(function(v){return v <= audio.currentTime}));

        if(previousDialogueTime !== currentDialogueTime) {
            previousDialogueTime = currentDialogueTime;
            var currentDialogue = dialogues3[dialogueTimings3.indexOf(currentDialogueTime)];
            transcriptWrapper3.scrollTop  = currentDialogue.offsetTop - 50;  
            var previousDialogue = document.getElementsByClassName('speaking3')[0];
            if(previousDialogue !== undefined)
                previousDialogue.className = previousDialogue.className.replace('speaking3','');
            currentDialogue.className +=' speaking3';
        }
    }
;

// 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'}`)

});