startdate is 01.01.70<br />end_date is 05.01.24<br />1Difference between two dates: 56362252 Days <br />startdate2 is 01.01.70<br />enddate2 is 04.06.21<br />2Difference between two dates: 56362143 Days <br /><meta name="viewport" content="width=device-width">







<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" nonce=""></script>



<style>

#body-id-css {
  margin: 0;
  width: 100%;
  font-size: 12.5px;
  min-height: 100%;
}
body, button, input, textarea {
  color: #43454b;
  font-family: "Open Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.618;
  text-rendering: optimizeLegibility;
  font-weight: 400;
}

#legacyplayer {
  /*
  background-color: #2b2a33;
  color: #fff;
  height: 90px;
  position: fixed;
  bottom: 0;
  width: 100%;
  visibility: visible;
  border-style: solid;
  border-width: 1px 0 0 0;
  border-color: #f0f0f0;
    z-index: 100;
*/

    background-color: #222;
    color: #fff;
    height: 100%;
    visibility: visible;
}
.showdurationn {
  float: left;
  padding: 5px;
}
.qlidecontainer, .vlidecontainer {
}
.qlider, .vlider {
  width: 280px;
  float: right;
}
input[type='range'] {
  -webkit-appearance: none;
  background-color: #2b2a33;
  height: 20px;
  overflow: hidden;
}
input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 20px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: yellow;
  border-radius: 50%;
  box-shadow: -210px 0 0 200px #3477cb;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}
input[type='range']::-moz-range-thumb {
  background: yellow;
  border-radius: 50%;
  box-shadow: -1010px 0 0 1000px #3477cb;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}
input#qrange.qlider {
  background-color: #787676;
}
input#qrange.qlider::-webkit-slider-thumb {
  box-shadow: -2010px 0 0 2000px #fff;
}
input#qrange.qlider::-moz-range-thumb {
  box-shadow: -1010px 0 0 1000px #fff;
}
input#qrange.qlider::-moz-range-progress {
  background-color: #fff;
}
input#qrange.qlider::-ms-fill-lower {
  background-color: #fff;
}
input#qrange.qlider::-moz-range-track {
  background-color: #fff;
}
input#qrange.qlider::-ms-fill-upper {
  background-color: #fff;
}
input#qrange.qlider::-moz-range-track {
  background-color: #787676;
}
input#qrange.qlider::-webkit-slider-thumb {
  background-color: #fff;
  background: #fff;
  border-radius: 0%;
}
input#qrange.qlider::-moz-range-thumb {
  background-color: #fff;
  border-radius: 0%;
}
input#qrange.qlider::-ms-thumb {
  background-color: #fff;
  border-radius: 0%;
}
input#vrange.vlider {
  background-color: #787676;
}
input#vrange.vlider::-webkit-slider-thumb {
  box-shadow: -2010px 0 0 2000px #82b5f7;
}
input#vrange.vlider::-moz-range-thumb {
  box-shadow: -1010px 0 0 1000px #82b5f7;
}
input#vrange.vlider::-moz-range-progress {
  background-color: #82b5f7;
}
input#vrange.vlider::-ms-fill-lower {
  background-color: #82b5f7;
}
input#vrange.vlider::-moz-range-track {
  background-color: #fff;
}
input#vrange.vlider::-ms-fill-upper {
  background-color: #82b5f7;
}
input#vrange.vlider::-moz-range-track {
  background-color: #787676;
}
input#vrange.vlider::-webkit-slider-thumb {
  background-color: #82b5f7;
  background: #82b5f7;
  border-radius: 0%;
}
input#vrange.vlider::-moz-range-thumb {
  background-color: #82b5f7;
  border-radius: 0%;
}
input#vrange.vlider::-ms-thumb {
  background-color: #82b5f7;
  border-radius: 0%;
}
input[type='range'] {
  height: 30px;
  border-top: 15px;
  border-bottom: 10px;
  border-color: #2b2a33;
  border-style: solid;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 30px;
  width: 5px;
}
input[type='range']::-webkit-slider-thumb, input[type='range']::-moz-range-thumb, input#qrange.qlider::-moz-range-thumb, input#qrange.qlider::-webkit-slider-thumb, input#vrange.vlider::-moz-range-thumb, input#vrange.vlider::-webkit-slider-thumb {
  height: 30px;
  width: 10px;
}

#audioplaybutton, #audiopausebutton, #loopbuttoncount_0, #loopbuttoncount_1, #loopbuttoncount_2, #loopbuttoncount_3, #loopbuttoncount_4, #mutebutton_one, #mutebutton_two, #curatedpresetsbutton, #myfavoritesbutton, #autoplay_one, #autoplay_two, #reloadtrackbutton, #threelinesbottom {
  background-size: 23px 23px;
  width: 23px;
  height: 23px;
  font-size: 1px;
  color: #2b2a33;
  cursor: pointer;
  background-repeat: no-repeat;
  display: inline-block;
}
#loopbuttoncount_0 {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-v2.png);
  float: right;
}
#loopbuttoncount_1 {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-count1.png);
  float: right;
}
#loopbuttoncount_2 {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-count2.png);
  float: right;
}
#loopbuttoncount_3 {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-count3.png);
  float: right;
}
#loopbuttoncount_4 {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-count4.png);
  float: right;
}
#mutebutton_one {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/mute-icon-10-11-21-v1.png);
  float: right;
}
#mutebutton_two {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/mute-icon-10-11-21-v2.png);
  float: right;
}
#mutebutton_one, #mutebutton_two {
  margin-right: 5px;
}
#curatedpresetsbutton {
  /*  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/nextprev-icon-10-11-21-v3.png); */
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/presets-icon-1-14-21-v3.png);
  float: right;
/*  margin-left: 11px; */
}
#myfavoritesbutton {
  /*  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/nextprev-icon-10-11-21-v4.png); */
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/favorites-icon-1-14-21-v1.png);
  float: right;
}
#autoplay_one {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/autoplayicon-11-19-21-v4.png);
  float: right;
  display: none;
}
#autoplay_two {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/autoplayicon-11-19-21-v3.png);
  float: right;
  display: none;
}

#reloadtrackbutton {
  background-image: url(https://0-eoc-images-9-25-17.s3.amazonaws.com/deepereum-images/load-track-empty.png);
  float: right;
/*  margin-left: 8px; */
/*  display: none; */
width: 20px;
height: 20px;
background-size: 20px;
margin-top: 2px;
margin-right: 3px;
}
#threelinesbottom {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/threelines-11-21-21.png);
  float: right;
  margin-top: 1px;
  margin-right: 3px;
}
#audioplaybutton {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/sound-samples/play-sample-white-v2.png);
  float: left;
}
#audiopausebutton {
  background-image: url(https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/sound-samples/pause-sample-white-v4.png);
  float: left;
}

.tooltip .tooltiptext {
  /* visibility: hidden; */
  width: auto;
  background-color: #2b2a33;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 14px;
  border-color: #fff;
  border-style: solid;
  border-width: 1px;
  position: absolute;
  z-index: 999;
  margin-top: 28px;
  display: inline-block;
}

#durationunderdiv {
  width: auto;
  height: 25px;
  padding: 3px 15px 0px 15px;
  float: left;
  display: inline-block;
}
#engulfspinner {
  background-color: #2b2a33;
  z-index: 99;
  width: 100%;
  height: 40px;
  opacity: .8;
  position: fixed;
  overflow: auto;
  outline: 0;
  margin-top: 40px;
}
#hiddenaudiocontrols {
  width: 1px;
  height: 1px;
  visibility: hidden;
  float: left;
  display: none;
}
#sidebysidevolprogress, #underbuttons {
  height: auto;
  display: inline-block;
  float: left;
  clear: both;
}

@media only screen and (min-width:0px) and (max-width: 700px) {
  .qlidecontainer {
    width: 70%;
  }
  .vlidecontainer {
    width: 29.9%;
  }
  #sidebysidevolprogress, #underbuttons {
    width: 85%;
    margin-left: 7.4%;
    margin-right: 7.4%;
  }
}
@media only screen and (min-width:701px) and (max-width: 1010px) {
  .qlidecontainer {
    width: 70%;
  }
  .vlidecontainer {
    width: 29.9%;
  }
  #sidebysidevolprogress, #underbuttons {
    width: 75%;
    margin-left: 12.4%;
    margin-right: 12.4%;
  }
}
@media only screen and (min-width:1011px) and (max-width: 9999px) {
  .qlidecontainer {
    width: 70%;
  }
  .vlidecontainer {
    width: 29.9%;
  }
  #sidebysidevolprogress, #underbuttons {
    width: 65%;
    margin-left: 17.4%;
    margin-right: 17.4%;
  }
}
.qlidecontainer, .vlidecontainer {
  height: auto;
  display: inline-block;
}
.qlidecontainer {
  float: left;
}
.vlidecontainer {
  float: right;
}
#qrange {
  width: 100%;
  /*  visibility: hidden; */
}
#vrange {
  width: 100%;
}
#sidebysidevolprogress, #underbuttons {
  height: auto;
  display: inline-block;
  float: left;
  clear: both;
}
#sidebysidevolprogress {
  margin-top: 0px;
}
#engulfspinner {
  background-color: #2b2a33;
  z-index: 99;
  width: 100%;
  height: 40px;
  opacity: .8;
  position: fixed;
  overflow: auto;
  outline: 0;
  margin-top: 40px;
}
#centerengulfspinner {
  margin-left: calc(49.8% - (20px / 2));
  margin-top: calc((35px - 20px) / 2);
}
#durationunderdiv {
  width: auto;
  height: 25px;
  padding: 3px 15px 0px 15px;
  float: left;
  display: inline-block;
}
.rightduration, .leftduration, .durationslash {
  float: left;
  display: inline-block;
}
.durationslash {
  margin-left: 5px;
  margin-right: 5px;
}
.leftduration {
  margin-left: 15px;
}
#vrange:hover, #qrange:hover {
  cursor: pointer;
  opacity: .8;
}
.rightsyde {
  margin-left: 5px;
}
.mutespace {
  margin-top: 1px;
}
body {
}
.zloader, .gloader {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  perspective: 800px;
  margin-top: 2px;
  z-index: 0;
}
.inner, .ginner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
}
.inner.one, .ginner.gone {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
  z-index: -1;
}
.inner.two, .ginner.gtwo {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
  z-index: -1;
}
.inner.three, .ginner.gthree {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
  z-index: -1;
}
.zloader, .inner, .inner.one, .inner.two, .inner.three, .zloader:active, .inner:active, .inner.one:active, .inner.two:active, .inner.three:active, .zloader:focus, .inner:focus, .inner.one:focus, .inner.two:focus, .inner.three:focus, .zloader:focus-within, .inner:focus-within, .inner.one:focus-within, .inner.two:focus-within, .inner.three:focus-within, .zloader:target, .inner:target, .inner.one:target, .inner.two:target, .inner.three:target, .zloader:hover, .inner:hover, .inner.one:hover, .inner.two:hover, .inner.three:hover, .zloader:visited, .inner:visited, .inner.one:visited, .inner.two:visited, .inner.three:visited, .zloader:focus-visible, .inner:focus-visible, .inner.one:focus-visible, .inner.two:focus-visible, .inner.three:focus-visible, input[type='range']:focus-visible, input[type='range']:focus, input[type='range']:active, input[type='range']:hover, input[type='range']:focus-within {
  outline: none;
}
@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
#spinnerorigin {
  display: none;
}
.spinnerpadding {
  padding: 22.5px 0px 0px 10px;
}

#underbuttons {
  margin-top: 17px;
}

#timemirror {
  float: left;
  margin: 7px 5px 0px 5px;
}
.covervolume {
  width: 100%;
  height: 5px;
  background-color: #787676;
  position: absolute;
  z-index: 999;
  margin-top: 14.5px;
  visibility: visible;
  border-style: solid;
  border-color: #2b2a33;
  border-width: 0px 10px 0px 0px;
  display: none;
}
</style>



<body id="body-id-css">



  <div id="legacyplayer">






    <div id="underbuttons">



      <div id="mutebutton_two" class="tooltip rightsyde mutespace" style="display: none;"><span class="tooltiptext">Mute On</span></div>
      <div id="mutebutton_one" class="tooltip rightsyde mutespace"><span class="tooltiptext">Mute Off</span></div>

      <div id="loopbuttoncount_0" data-loopcount="0" class="tooltip rightsyde" style="display: inline-block;"><span class="tooltiptext">Loop: Off</span></div>
      <div id="loopbuttoncount_1" data-loopcount="1" class="tooltip rightsyde" style="display: none;"><span class="tooltiptext">Loop 1 Time</span></div>
      <div id="loopbuttoncount_2" data-loopcount="2" class="tooltip rightsyde" style="display: none;"><span class="tooltiptext">Loop 2 Times</span></div>
      <div id="loopbuttoncount_3" data-loopcount="3" class="tooltip rightsyde" style="display: none;"><span class="tooltiptext">Loop 3 Times</span></div>
      <div id="loopbuttoncount_4" data-loopcount="4" class="tooltip rightsyde" style="display: none;"><span class="tooltiptext">Loop 4 Times</span></div>



      <div id="myfavoritesbutton" class="tooltip rightsyde"><span class="tooltiptext">My Favorites</span></div>

      <div id="curatedpresetsbutton" class="tooltip rightsyde"><span class="tooltiptext">Curated Presets</span></div>

      <div id="audioplaybutton" class="tooltip"><span class="tooltiptext">Play</span></div>
      <div id="audiopausebutton" class="tooltip" style="display: none;"><span class="tooltiptext">Pause</span></div>





      <div id="autoplay_one" class="tooltip rightsyde" style="display: none;"><span class="tooltiptext">Autoplay On</span></div>
      <div id="autoplay_two" class="tooltip rightsyde"><span class="tooltiptext">Autoplay Off</span></div>

      <div id="reloadtrackbutton" class="tooltip rightsyde" data-threedotts="na"><span class="tooltiptext">Reload Track</span></div>

      <div id="threelinesbottom" class="tooltip rightsyde"><span class="tooltiptext">Side Menu</span></div>




      <div id="durationunderdiv"><!--
        <div id="formattedtime" class="leftduration"></div><span class="durationslash">/</span><div id="showdurationbetter" class="rightduration"></div>
      -->
    </div>


  </div>




  <div id="engulfspinner" style="display: none;">
    <!--can switch later dont want track playing to be same as track loading-->
    <div id="centerengulfspinner">
      <div class="zloader">
        <div class="inner one"></div>
        <div class="inner two"></div>
        <div class="inner three"></div>
      </div>
    </div>
    <!--can switch later dont want track playing to be same as track loading-->
  </div>
  <div id="sidebysidevolprogress">
    <div class="vlidecontainer">
      <input type="range" min="0" max="1" value="1" step="0.1" class="vlider" id="vrange"><!--<span id="boosttheslider">+</span>-->
    </div>
    <div class="qlidecontainer">
      <div class="covervolume"></div>
      <input type="range" min="0" max="10" value="0" step="1" class="qlider" id="qrange">
      <div id="timemirror" style="display: none;"></div>
    </div>
  </div>

  <audio id="myAudio" data-loopcount="0">
    <source src="" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    <div id="hiddenaudiocontrols">
      <button type="button" id="playbutton">Play Audio</button>
      <button type="button" id="pausebutton">Pause Audio</button>

    </div>

  </div>





  <script>

  // https://new-demos-8-14-14-lowercase.s3.amazonaws.com/12min-NV/EquiSync-Demo-V5.mp3

  // var audiosrc = document.querySelector("#myAudio").src;
  var testrack = 'https://new-demos-8-14-14-lowercase.s3.amazonaws.com/12min-NV/EquiSync-Demo-V5.mp3';
  document.querySelector("#myAudio").src = testrack;



  function hideshowvolumemobile(){
    var thevolumebar = document.querySelectorAll(".vlidecontainer")[0];
    var thedurationbar = document.querySelectorAll(".qlidecontainer")[0];

    var covervolume = document.querySelectorAll(".covervolume")[0];

    var checkifmobile = window.screen.width;
    if(checkifmobile < 499){
      thevolumebar.style.display = 'none';
      thedurationbar.style.width = '100%';
      covervolume.style.borderWidth = '0px';
    }
    if(checkifmobile > 499){
      thevolumebar.style.display = '';
      thedurationbar.style.width = '70%';
      covervolume.style.borderWidth = '0px 10px 0px 0px';
    }
  }
  //  hideshowvolumemobile();

  function mirrordurationlines(){
    var therealduration = document.querySelector("#qrange");
    var thefakeduration = document.querySelectorAll(".covervolume")[0];

    var therightwidth = therealduration.offsetWidth;
    thefakeduration.style.width = therightwidth;
    /*
    thefakeduration.style.visibility = 'hidden';
    thefakeduration.style.display = 'none';
    therealduration.style.visibility = 'visible';
    */
  }
  /*
  mirrordurationlines();
  window.addEventListener('resize', function(event) {
  mirrordurationlines();
}, true);
*/

function toggledurationdivs(){
  var therealduration = document.querySelector("#qrange");
  var thefakeduration = document.querySelectorAll(".covervolume")[0];
  thefakeduration.style.visibility = 'hidden';
  thefakeduration.style.display = 'none';
  therealduration.style.visibility = 'visible';
}

function setVolume() {
  var audioid = document.getElementById("myAudio");
  var currentvolume = audioid.volume;
  //  console.log('currentvolume is ' + currentvolume);

  var volumerange = document.querySelector("#vrange");
  var thevolumeval = parseFloat(volumerange.value);
  //  console.log('thevolumeval is ' + thevolumeval);

  document.getElementById("myAudio").volume = thevolumeval;

  //  checkbuffertime();
  var checkmute = '-' + document.getElementById("mutebutton_two").style.display + '-';
  if (checkmute.indexOf("block") > -1) {
    document.getElementById("mutebutton_two").click();
  }
}
setVolume();


function setTime() {
  var audioid = document.getElementById("myAudio");
  //  var currenttime = audioid.currentTime;
  var currenttime = audioid.currentTime;
  //  console.log('currenttime is ' + currenttime);

  var timerange = document.querySelector("#qrange");
  var thetimeval = parseFloat(timerange.value);
  //  console.log('thetimeval is ' + thetimeval);

  //  document.getElementById("myAudio").currentTime = '' + thetimeval + '';
  document.getElementById("myAudio").currentTime = thetimeval;

  // checkbuffertime();
  checkifstillloading();
}

function mirrorTime() {
  var audioid = document.getElementById("myAudio");
  var currenttime = audioid.currentTime;
  //  console.log('currenttime is ' + currenttime);

  var timerange = document.querySelector("#qrange");
  var thetimeval = timerange.value;
  //  console.log('thetimeval is ' + thetimeval);

  document.querySelector("#qrange").value = parseFloat(currenttime);
}

var timeaudioid = document.getElementById("myAudio");
timeaudioid.addEventListener("timeupdate", mirrorTime);

var vrange = document.getElementById("vrange");
vrange.oninput = function() {
  setVolume();
}

var qrange = document.getElementById("qrange");
qrange.oninput = function() {

  setTime();
  // checkifstillloading();
}

function checkifstillloading() {
  //  setInterval(function(){
  var isitready = document.getElementById("myAudio").readyState;
  var isitpaused = document.getElementById("myAudio").paused;

  if (isitpaused == false) {
    var engulfspinner = document.getElementById("engulfspinner");
    var isitreadyparsed = parseFloat(isitready);
    if (isitreadyparsed < 3) {
      //  switchthisdiv.innerHTML = spinnerdiv;
      engulfspinner.style.display = 'block';
    }

    else {
      //  switchthisdiv.innerHTML = originaldivhtml;
      engulfspinner.style.display = 'none';
      // switchthisdiv.innerHTML = spinnerdiv;
    }
  }

}

function initiateinterval() {
  var myinterval = setInterval(checkifstillloading, 1000);
  $('#pausebutton').click(function(){clearInterval(myinterval);});
  document.getElementById("myAudio").onended = function() {clearInterval(myinterval);};
}

function endcheckifstillloading() {
  //  var myinterval = setInterval(checkifstillloading, 1000);
  clearInterval(myinterval);
}

function audioendedplaying() {
  console.log('audioplaying had ended');
  document.getElementById("audiopausebutton").style.display = 'none';
  document.getElementById("audioplaybutton").style.display = 'inline-block';
  document.getElementById("engulfspinner").style.display = 'none';
  //  };
  remainingtimecheck();
}
audioplayeronceagan = document.getElementById("myAudio");
audioplayeronceagan.addEventListener("ended", audioendedplaying);



function fullplayarray() {
  playAudio();
  initiateinterval();
  // initialduration();
  //  sendAudioSrcToTop();
  checkifmutedmobilenote();
}






function pauseaudioifmuted(){

  var pauseblock = document.querySelector("#audiopausebutton"); // only showing if audio is playing ie this is pause button not play
  var checkit = '' + pauseblock.style.display + '';
  if(checkit.indexOf("block") > -1){
    pauseblock.click();
  }
}

function switchtooltipmuteback(){
  var themessagetooltip = document.querySelector("#mutebutton_two > span");
  var currentlymuted = document.querySelector("#mutebutton_two");
  var currentlyunmuted = document.querySelector("#mutebutton_one");
  themessagetooltip.innerText = 'Mute On';

  var isitmuted = document.getElementById("myAudio").muted;
  if(isitmuted == true){
    centerthistooltip();
    currentlymuted.style.display = 'inline-block';
    currentlyunmuted.style.display = 'none';
  }
  if(isitmuted == false){
    centerthistooltip();
    currentlymuted.style.display = 'none';
    currentlyunmuted.style.display = 'inline-block';
  }
}

function checkifmutedmobilenote(){
  function shortdelaycheck(){
    var isitmuted = document.getElementById("myAudio").muted;
    var isitpaused = document.getElementById("myAudio").paused;

    var themessagetooltip = document.querySelector("#mutebutton_two > span");


    //  if((isitpaused == false) && (isitmuted == true)){ // this is NOT correct but we need to test
    if((isitpaused == true) && (isitmuted == true)){ // this is correct but we need to test
      console.log('paused and muted display unpause message');
      themessagetooltip.innerText = 'Unmute To Play';
      centerthistooltip();
      themessagetooltip.style.visibility = 'visible';

      setTimeout(function(){ switchtooltipmuteback(); }, 2000);
    }
    else {
      switchtooltipmuteback();
    }

  }
  setTimeout(function(){ shortdelaycheck(); }, 1000);
}

var mutebutton_one = document.getElementById('mutebutton_one');
mutebutton_one.addEventListener('click', function (event) {
  document.getElementById('mutebutton_two').style.display = 'inline-block';
  document.getElementById('mutebutton_one').style.display = 'none';
  document.getElementById("myAudio").muted = true;
  pauseaudioifmuted();
});

var mutebutton_two = document.getElementById('mutebutton_two');
mutebutton_two.addEventListener('click', function (event) {
  document.getElementById('mutebutton_one').style.display = 'inline-block';
  document.getElementById('mutebutton_two').style.display = 'none';
  document.getElementById("myAudio").muted = false;
});

function zerOutAllLoops() {
  document.querySelector("#loopbuttoncount_0").style.display = 'none';
  document.querySelector("#loopbuttoncount_1").style.display = 'none';
  document.querySelector("#loopbuttoncount_2").style.display = 'none';
  document.querySelector("#loopbuttoncount_3").style.display = 'none';
  document.querySelector("#loopbuttoncount_4").style.display = 'none';
}

function audioendedloopset() {
  var theauddio = document.getElementById("myAudio");
  var currentloopcount = parseFloat(theauddio.dataset.loopcount);
  console.log('currentloopcount is ' + currentloopcount);
  zerOutAllLoops();
  if (currentloopcount === 4) {
    theauddio.dataset.loopcount = 3;
    document.querySelector("#loopbuttoncount_3").style.display = 'inline-block';
  }
  if (currentloopcount === 3) {
    theauddio.dataset.loopcount = 2;
    document.querySelector("#loopbuttoncount_2").style.display = 'inline-block';
  }
  if (currentloopcount === 2) {
    theauddio.dataset.loopcount = 1;
    document.querySelector("#loopbuttoncount_1").style.display = 'inline-block';
  }
  if (currentloopcount === 1) {
    theauddio.dataset.loopcount = 0;
    document.querySelector("#loopbuttoncount_0").style.display = 'inline-block';
  }
}

function remainingtimecheck() {
  var getlooppccountt = document.getElementById("myAudio").dataset.loopcount;
  if (getlooppccountt > 0) {
    document.getElementById("myAudio").currentTime = 1;
    audioendedloopset();
    document.querySelector("#audioplaybutton").click();

  }
}

function mirrorLoopCount() {
  var loopicon0 = 'https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-v2.png';
  var loopicon1 = 'https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-count1.png';
  var loopicon2 = 'https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-count2.png';
  var loopicon3 = 'https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-count3.png';
  var loopicon4 = 'https://storage.googleapis.com/sound-testing-bucket-8-23-19/images/loop-icon-10-11-21-count4.png';

  var loopcounttis = document.getElementById('myAudio').dataset.loopcount;
  var loopcounttis2 = parseFloat(loopcounttis);

  if (loopcounttis2 === 0) {
    $('[id^="iconloop"]').css('background-image', 'url(' + loopicon0 + ')');
    $('[class^="loop_count"]').html( ' (' + loopcounttis2 + ')' );
  }
  if (loopcounttis2 === 1) {
    $('[id^="iconloop"]').css('background-image', 'url(' + loopicon1 + ')');
    $('[class^="loop_count"]').html( ' (' + loopcounttis2 + ')' );
  }
  if (loopcounttis2 === 2) {
    $('[id^="iconloop"]').css('background-image', 'url(' + loopicon2 + ')');
    $('[class^="loop_count"]').html( ' (' + loopcounttis2 + ')' );
  }
  if (loopcounttis2 === 3) {
    $('[id^="iconloop"]').css('background-image', 'url(' + loopicon3 + ')');
    $('[class^="loop_count"]').html( ' (' + loopcounttis2 + ')' );
  }
  if (loopcounttis2 === 4) {
    $('[id^="iconloop"]').css('background-image', 'url(' + loopicon4 + ')');
    $('[class^="loop_count"]').html( ' (' + loopcounttis2 + ')' );
  }
}

function resetLoopCount(clickedlooper) {
  //  var clickedidid = '' + event.target.id + '';if(clickedidid){useraccesscheck(event.target.id);}else{useraccesscheck();}
  var loopcountclick = clickedlooper;
  //  console.log('loopcountclick is ' + loopcountclick);
  var getdataloop = parseFloat(loopcountclick.dataset.loopcount);
  //  console.log('getdataloop is ' + getdataloop);
  zerOutAllLoops();
  if (getdataloop === 0) {
    document.querySelector("#loopbuttoncount_1").style.display = 'inline-block';
    document.getElementById("myAudio").dataset.loopcount = 1;
    //  document.getElementById("myAudio").loop = true;
  }
  if (getdataloop === 1) {
    document.querySelector("#loopbuttoncount_2").style.display = 'inline-block';
    document.getElementById("myAudio").dataset.loopcount = 2;
    //  document.getElementById("myAudio").loop = true;
  }
  if (getdataloop === 2) {
    document.querySelector("#loopbuttoncount_3").style.display = 'inline-block';
    document.getElementById("myAudio").dataset.loopcount = 3;
    //  document.getElementById("myAudio").loop = true;
  }
  if (getdataloop === 3) {
    document.querySelector("#loopbuttoncount_4").style.display = 'inline-block';
    document.getElementById("myAudio").dataset.loopcount = 4;
    //  document.getElementById("myAudio").loop = true;
  }
  if (getdataloop === 4) {
    document.querySelector("#loopbuttoncount_0").style.display = 'inline-block';
    document.getElementById("myAudio").dataset.loopcount = 0;
    //  document.getElementById("myAudio").loop = false;
  }
  mirrorLoopCount();
}

var loopbuttoncount_0 = document.getElementById('loopbuttoncount_0');
loopbuttoncount_0.addEventListener('click', function (event) {
  resetLoopCount(loopbuttoncount_0);
});
var loopbuttoncount_1 = document.getElementById('loopbuttoncount_1');
loopbuttoncount_1.addEventListener('click', function (event) {
  resetLoopCount(loopbuttoncount_1);
});
var loopbuttoncount_2 = document.getElementById('loopbuttoncount_2');
loopbuttoncount_2.addEventListener('click', function (event) {
  resetLoopCount(loopbuttoncount_2);
});
var loopbuttoncount_3 = document.getElementById('loopbuttoncount_3');
loopbuttoncount_3.addEventListener('click', function (event) {
  resetLoopCount(loopbuttoncount_3);
});
var loopbuttoncount_4 = document.getElementById('loopbuttoncount_4');
loopbuttoncount_4.addEventListener('click', function (event) {
  resetLoopCount(loopbuttoncount_4);
});




var sampleplayer = document.getElementById("myAudio");


function updateprogressbar() {
  //  setInterval(function(){

  var audiobarprogress = document.getElementById("qrange");

  var sampleplayer = document.getElementById("myAudio");
  var zaudiocurrentime = sampleplayer.currentTime;

  audiobarprogress.value = zaudiocurrentime;
  audiobarprogress.max = zduration;

  //  }, 3000);
}



function formatdatime(thetimmme, theinnnerdiv) {

  var convertthistime = thetimmme;
  var htmldivinsert = theinnnerdiv;

  // var time = zaudiocurrentime;
  var time = convertthistime;
  var mind = time % (60 * 60);
  var minutes = Math.floor(mind / 60);

  var secd = mind % 60;
  var seconds = Math.ceil(secd);

  var timeformatminutes = minutes;
  var timeformatseconds = seconds;

  if(timeformatseconds === 0){var timeformatseconds = '00';}
  if(timeformatseconds === 1){var timeformatseconds = '01';}
  if(timeformatseconds === 2){var timeformatseconds = '02';}
  if(timeformatseconds === 3){var timeformatseconds = '03';}
  if(timeformatseconds === 4){var timeformatseconds = '04';}
  if(timeformatseconds === 5){var timeformatseconds = '05';}
  if(timeformatseconds === 6){var timeformatseconds = '06';}
  if(timeformatseconds === 7){var timeformatseconds = '07';}
  if(timeformatseconds === 8){var timeformatseconds = '08';}
  if(timeformatseconds === 9){var timeformatseconds = '09';}

  if(timeformatseconds === 60){
    var timeformatseconds = '00';
    var rememberminute = parseFloat(timeformatminutes);
    var timeformatminutes = rememberminute + 1;
  }


  //  var formattedtime = document.getElementById("formattedtime");
  var formattedtime = htmldivinsert;
  var formattedstr = '' + timeformatminutes + ':' + timeformatseconds + '';
  formattedtime.innerHTML = formattedstr;
}

function initialduration() {
  var timemirror = document.querySelector("#timemirror");
  if(timemirror){
    document.querySelector("#timemirror").style.display = 'inline-block';
  }

}

function showcurrenttimefx() {

  var timemirror = document.querySelector("#timemirror");
  timemirror.style.display = 'none';
  timemirror.style.visibility = 'hidden';

  function mirrorduration(){

    var timemirror = document.querySelector("#timemirror");

    var sampleplayer = document.getElementById("myAudio");
    var zzduration = sampleplayer.duration;
    //  console.log('zzduration is ' + zzduration);
    var ccurrentime = sampleplayer.currentTime;
    //  console.log('ccurrentime is ' + ccurrentime);

    var minustime = zzduration - ccurrentime;

    // timemirror.innerText = Math.floor(minustime);

    function convertHMS(value) {
      const sec = parseInt(value, 10); // convert value to number if it's string
      let hours   = Math.floor(sec / 3600); // get hours
      let minutes = Math.floor((sec - (hours * 3600)) / 60); // get minutes
      let seconds = sec - (hours * 3600) - (minutes * 60); //  get seconds
      // add 0 if value < 10; Example: 2 => 02
      if (hours   < 10) {hours   = "0"+hours;}
      if (minutes < 10) {minutes = "0"+minutes;}
      if (seconds < 10) {seconds = "0"+seconds;}
      //  return hours+':'+minutes+':'+seconds; // Return is HH : MM : SS
      return '-'+minutes+':'+seconds;
    }

    var timemirror = document.querySelector("#timemirror");
    var durationunderdiv = document.querySelector("#durationunderdiv");


    var thescreenwidth = document.querySelector("#legacyplayer").offsetWidth;
    if(thescreenwidth < 370){
      var thepropertimediv = document.querySelector("#timemirror");
      var extramargins = 5;
    }
    else {
      var thepropertimediv = document.querySelector("#durationunderdiv");
      var extramargins = 1;
    }

    //  var underbuttonsheight = document.querySelector("#underbuttons").offsetHeight;
    //  console.log('underbuttonsheight is ' + underbuttonsheight);

    thepropertimediv.style.display = 'inline-block';
    thepropertimediv.style.visibility = 'visible';

    var thetimeshown1 = convertHMS(minustime);
    var thetimeshown2 = '-' + thetimeshown1 + '-';
    if(thetimeshown2.indexOf("NaN") < 0){
      thepropertimediv.innerText = thetimeshown1;

    }
    if(extramargins > 3){

      var itswidth = 50;
      //  console.log('itswidth is ' + itswidth);
      var makeminusformat = 'calc(100% - ' + (parseFloat(itswidth)) + 'px)';

      document.querySelector("#qrange").style.width = makeminusformat;
      document.querySelector("#qrange").style.float = 'left';
      document.querySelector("#qrange").style.display = 'inline-block';

      document.querySelector("#durationunderdiv").style.innerText = '';
      document.querySelector("#durationunderdiv").style.width = '';
      document.querySelector("#durationunderdiv").style.visibility = 'hidden';
      document.querySelector("#durationunderdiv").style.display = 'none';

    }
    if(extramargins < 3){
      document.querySelector("#qrange").style.width = '';
      document.querySelector("#qrange").style.float = '';
      document.querySelector("#qrange").style.display = '';

      document.querySelector("#timemirror").style.innerText = '';
      document.querySelector("#timemirror").style.width = '';
      document.querySelector("#timemirror").style.visibility = 'hidden';
      document.querySelector("#timemirror").style.display = 'none';
    }

  }
  mirrorduration();

}

var aaudioplayerr = document.getElementById("myAudio");
aaudioplayerr.ontimeupdate = function() {showcurrenttimefx();};

function playAudio() {

  //  toggledurationdivs();
  //  var dadurationdiv = document.querySelector("#durationunderdiv");
  // document.querySelector("#timemirror").style.display = 'none';

  var sampleplayer = document.getElementById("myAudio");
  // sampleplayer.play();

  var dapausebutton = document.querySelector("#audiopausebutton");
  dapausebutton.style.display = 'inline-block';
  var daplaybutton = document.querySelector("#audioplaybutton");
  daplaybutton.style.display = 'none';

  // document.getElementById("myAudio").onloadedmetadata = function() {
  // method 1
  var zduration = sampleplayer.duration;

  showcurrenttimefx();

  //  var zaudiosrc = sampleplayer.currentSrc;
  //  var zaudiocurrentime = sampleplayer.currentTime;

  //  document.getElementById("showtimecurrent").innerText = zaudiocurrentime;
  //  document.getElementById("showsrccurrent").innerText = zaudiosrc;


  //  setInterval(function(){
  var audiobarprogress = document.getElementById("qrange");
  var zaudiocurrentime = sampleplayer.currentTime;
  audiobarprogress.value = zaudiocurrentime;
  audiobarprogress.max = zduration;

  // };

  //    document.querySelector("#idlegacytrack_main").dataset.isplaying = 'playingnow';

}





function checkifplayingorpaused(){
  //  var document.querySelector("#audioplaybutton");
  function shortdelayb4checking(){
    var pauseyesno = document.querySelector("#myAudio").paused;
    if (pauseyesno == true) {
      document.querySelector("#audioplaybutton").style.display = 'inline-block';
      document.querySelector("#audiopausebutton").style.display = 'none';

    }
    if (pauseyesno == false) {
      document.querySelector("#audioplaybutton").style.display = 'none';
      document.querySelector("#audiopausebutton").style.display = 'inline-block';
    }

  }
  setTimeout(shortdelayb4checking, 50);
}

document.getElementById("myAudio").onpause = function() {
  console.log('onpause event listenererer');
  // pauseAudio();
  //  pauseAudio();
  //  endcheckifstillloading();
  //  sendAudioSrcToTop();
  checkifplayingorpaused();
};

$('#pausebutton, #audiopausebutton').click(function(){
  var sampleplayer = document.getElementById("myAudio").pause();
});
document.getElementById("audiopausebutton").click(); // pause to start



document.getElementById("myAudio").onplay = function() {
  console.log('onplay event listenererer');
  document.getElementById("myAudio").onloadedmetadata = function() {
    fullplayarray();
  };

  // for later pause play of track
  var isweready = document.getElementById("myAudio").readyState;
  console.log('isweready is ' + isweready);
  var iswereadyparsed = parseFloat(isweready);
  if (iswereadyparsed > 0) {
    // from 1 to 4 - 1 means that metadata is available which is enough here
    fullplayarray();
  }
  //  checkifmutedmobilenote();

  checkifplayingorpaused();
};


$('#playbutton, #audioplaybutton').click(function(){
  //  var clickedidid = '' + event.target.id + '';if(clickedidid){useraccesscheck(event.target.id);}else{useraccesscheck();}
  //  checkifanythingisselected();
  document.getElementById("myAudio").play();

});




function resetalltooltips(){

  $(".tooltiptext").css("visibility", "hidden");
  //  $(".tooltiptext").css("visibility", "");
  //  $(".tooltiptext").removeAttr("visibility");
  //  $(".tooltiptext").removeAttr("style");

}

/*
$(".tooltip").click(function(){
resetalltooltips();
});
*/


function centerthistooltip(){

  function makemecentered(tooltipp){

    var thistooltip = tooltipp;
    thistooltip.style.display = 'inline-block';
    // thistooltip.style.visibility = 'visible';
    thistooltip.style.marginLeft = '0px';

    var thettwidth = thistooltip.offsetWidth;
    //  console.log('thettwidth is ' + thettwidth + 'innertext is ' + thistooltip.innerText);
    var ttcalc = ((thettwidth / 2) - 10);
    thistooltip.style.marginLeft = '-' + ttcalc + 'px';


    var thettheight = thistooltip.offsetHeight;
    //  console.log('thettheight is ' + thettheight + 'innertext is ' + thistooltip.innerText);

    var parentfloatside = $( thistooltip ).parent().css( "float" );
    //  console.log('parentfloatside is ' + parentfloatside);

    var theheightlimit = 47;

    if(thettheight > theheightlimit){
      if (parentfloatside.indexOf("right") > -1){

        thistooltip.style.marginLeft = '-' + (ttcalc + 10) + 'px';
        var thettheight2 = thistooltip.offsetHeight;
        if(thettheight2 > theheightlimit){
          thistooltip.style.marginLeft = '-' + (ttcalc + 20) + 'px';
          var thettheight3 = thistooltip.offsetHeight;
          if(thettheight3 > theheightlimit){
            thistooltip.style.marginLeft = '-' + (ttcalc + 30) + 'px';
            var thettheight4 = thistooltip.offsetHeight;
            if(thettheight4 > theheightlimit){
              thistooltip.style.marginLeft = '-' + (ttcalc + 40) + 'px';
              var thettheight5 = thistooltip.offsetHeight;
              if(thettheight5 > theheightlimit){
                thistooltip.style.marginLeft = '-' + (ttcalc + 50) + 'px';
                var thettheight6 = thistooltip.offsetHeight;
                if(thettheight6 > theheightlimit){
                  thistooltip.style.marginLeft = '-' + (ttcalc + 60) + 'px';
                  var thettheight7 = thistooltip.offsetHeight;
                }
              }
            }
          }
        }


      }
    }
    if(thettheight > theheightlimit){
      if (parentfloatside.indexOf("left") > -1){

        thistooltip.style.marginLeft = '-' + (ttcalc - 10) + 'px';
        var thettheight2 = thistooltip.offsetHeight;
        if(thettheight2 > theheightlimit){
          thistooltip.style.marginLeft = '-' + (ttcalc - 20) + 'px';
          var thettheight3 = thistooltip.offsetHeight;
          if(thettheight3 > theheightlimit){
            thistooltip.style.marginLeft = '-' + (ttcalc - 30) + 'px';
            var thettheight4 = thistooltip.offsetHeight;
            if(thettheight4 > theheightlimit){
              thistooltip.style.marginLeft = '-' + (ttcalc - 40) + 'px';
              var thettheight5 = thistooltip.offsetHeight;
              if(thettheight5 > theheightlimit){
                thistooltip.style.marginLeft = '-' + (ttcalc - 50) + 'px';
                var thettheight6 = thistooltip.offsetHeight;
                if(thettheight6 > theheightlimit){
                  thistooltip.style.marginLeft = '-' + (ttcalc - 60) + 'px';
                  var thettheight7 = thistooltip.offsetHeight;
                }
              }
            }
          }
        }

      }
    }


    thistooltip.style.visibility = 'hidden';
  }


  var ttooltip = document.querySelector('#mutebutton_one > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#mutebutton_two > span');
  makemecentered(ttooltip);
  //  var ttooltip = document.querySelector('#autoplay_one > span');
  //  makemecentered(ttooltip);
  //  var ttooltip = document.querySelector('#autoplay_two > span');
  //  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#loopbuttoncount_1 > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#loopbuttoncount_2 > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#loopbuttoncount_3 > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#loopbuttoncount_4 > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#loopbuttoncount_0 > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#audiopausebutton > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#audioplaybutton > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#myfavoritesbutton > span');
  makemecentered(ttooltip);
  var ttooltip = document.querySelector('#curatedpresetsbutton > span');
  makemecentered(ttooltip);
    var ttooltip = document.querySelector('#reloadtrackbutton > span');
    makemecentered(ttooltip);
  var ttooltip = document.querySelector('#threelinesbottom > span');
  makemecentered(ttooltip);

}
centerthistooltip();



function showtooltipaftrclick(thisistheone){
  console.log('tooltip2sec');
  resetalltooltips();
  function showthisforasec(disdaone){
    //  disdaone.style.visibility = 'visible';
    setTimeout(function(){ disdaone.style.visibility = 'visible'; }, 0);
    //  console.log('disdaone.style.visibility is ' + disdaone.style.visibility);
    setTimeout(function(){ disdaone.style.visibility = 'hidden'; }, 2000);
  }
  if (thisistheone.indexOf("mutebutton_two") > -1){
    console.log('mutebutton2');
    var theonetoshoww = document.querySelector('#mutebutton_one > span');
    //  console.log('theonetoshoww.visibility is ' + theonetoshoww.style.visibility);
    showthisforasec(theonetoshoww);
  }
  if (thisistheone.indexOf("mutebutton_one") > -1){
    console.log('mutebutton1');
    var theonetoshoww = document.querySelector('#mutebutton_two > span');
    //  console.log('theonetoshoww.visibility is ' + theonetoshoww.style.visibility);
    showthisforasec(theonetoshoww);
  }
  /*
  if (thisistheone.indexOf("autoplay_two") > -1){
  var theonetoshoww = document.querySelector('#autoplay_one > span');
  showthisforasec(theonetoshoww);
}
if (thisistheone.indexOf("autoplay_one") > -1){
var theonetoshoww = document.querySelector('#autoplay_two > span');
showthisforasec(theonetoshoww);
}
*/
if (thisistheone.indexOf("loopbuttoncount_0") > -1){
  var theonetoshoww = document.querySelector('#loopbuttoncount_1 > span');
  showthisforasec(theonetoshoww);
}
if (thisistheone.indexOf("loopbuttoncount_1") > -1){
  var theonetoshoww = document.querySelector('#loopbuttoncount_2 > span');
  showthisforasec(theonetoshoww);
}
if (thisistheone.indexOf("loopbuttoncount_2") > -1){
  var theonetoshoww = document.querySelector('#loopbuttoncount_3 > span');
  showthisforasec(theonetoshoww);
}
if (thisistheone.indexOf("loopbuttoncount_3") > -1){
  var theonetoshoww = document.querySelector('#loopbuttoncount_4 > span');
  showthisforasec(theonetoshoww);
}
if (thisistheone.indexOf("loopbuttoncount_4") > -1){
  var theonetoshoww = document.querySelector('#loopbuttoncount_0 > span');
  showthisforasec(theonetoshoww);
}
if (thisistheone.indexOf("audioplaybutton") > -1){
  var theonetoshoww = document.querySelector('#audiopausebutton > span');
  showthisforasec(theonetoshoww);
}
if (thisistheone.indexOf("audiopausebutton") > -1){
  var theonetoshoww = document.querySelector('#audioplaybutton > span');
  showthisforasec(theonetoshoww);
}

if (thisistheone.indexOf("myfavoritesbutton") > -1){
  var theonetoshoww = document.querySelector('#myfavoritesbutton > span');
  showthisforasec(theonetoshoww);
}
if (thisistheone.indexOf("curatedpresetsbutton") > -1){
  var theonetoshoww = document.querySelector('#curatedpresetsbutton > span');
  showthisforasec(theonetoshoww);
}

if (thisistheone.indexOf("reloadtrackbutton") > -1){
var theonetoshoww = document.querySelector('#reloadtrackbutton > span');
showthisforasec(theonetoshoww);
}

if (thisistheone.indexOf("threelinesbottom") > -1){
  var theonetoshoww = document.querySelector('#threelinesbottom > span');
  showthisforasec(theonetoshoww);
}

centerthistooltip();
}

var mutetooltip2 = document.querySelector('#mutebutton_two');
mutetooltip2.addEventListener("click", function(){
  showtooltipaftrclick('-mutebutton_two-');
});
var mutetooltip1 = document.querySelector('#mutebutton_one');
mutetooltip1.addEventListener("click", function(){
  showtooltipaftrclick('-mutebutton_one-');
});
/*
var autoplay2 = document.querySelector('#autoplay_two');
autoplay2.addEventListener("click", function(){
showtooltipaftrclick('-autoplay_two-');
});
var autoplay1 = document.querySelector('#autoplay_one');
autoplay1.addEventListener("click", function(){
showtooltipaftrclick('-autoplay_one-');
});
*/
var loopbutton0 = document.querySelector('#loopbuttoncount_0');
loopbutton0.addEventListener("click", function(){
  showtooltipaftrclick('-loopbuttoncount_0-');
});

var loopbutton1 = document.querySelector('#loopbuttoncount_1');
loopbutton1.addEventListener("click", function(){
  showtooltipaftrclick('-loopbuttoncount_1-');
});

var loopbutton2 = document.querySelector('#loopbuttoncount_2');
loopbutton2.addEventListener("click", function(){
  showtooltipaftrclick('-loopbuttoncount_2-');
});

var loopbutton3 = document.querySelector('#loopbuttoncount_3');
loopbutton3.addEventListener("click", function(){
  showtooltipaftrclick('-loopbuttoncount_3-');
});

var loopbutton4 = document.querySelector('#loopbuttoncount_4');
loopbutton4.addEventListener("click", function(){
  showtooltipaftrclick('-loopbuttoncount_4-');
});

var nextprev_two = document.querySelector('#myfavoritesbutton');
nextprev_two.addEventListener("click", function(){
  showtooltipaftrclick('-myfavoritesbutton-');
});

var nextprev_one = document.querySelector('#curatedpresetsbutton');
nextprev_one.addEventListener("click", function(){
  showtooltipaftrclick('-curatedpresetsbutton-');
});

var downloadbtn = document.querySelector('#reloadtrackbutton');
downloadbtn.addEventListener("click", function(){
showtooltipaftrclick('-reloadtrackbutton-');
});

var threelinesundermenu = document.querySelector('#threelinesbottom');
threelinesundermenu.addEventListener("click", function(){
  showtooltipaftrclick('-threelinesbottom-');
});

var undermenuplay = document.querySelector('#audioplaybutton');
undermenuplay.addEventListener("click", function(){
  // showtooltipaftrclick('-audioplaybutton-'); // disabled as most people know play pause fx
  centerthistooltip();
});

var undermenupause = document.querySelector('#audiopausebutton');
undermenupause.addEventListener("click", function(){
  // showtooltipaftrclick('-audiopausebutton-'); // disabled as most people know play pause fx
  centerthistooltip();
});

// audioplaybutton

// audiopausebutton


$(".tooltip").hover(function(){
  $(this).children().css("visibility", "visible");
  $(this).mouseout(function(){
    resetalltooltips();
  });
  //  centerthistooltip();
});





</script>


</body>