var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
  navigator.userAgent
);
var links = document.querySelectorAll(".link");
var audio,
  music = [],
  current_index = -1,
  typing = false;
var active = false;
// var comment = document.querySelector("#comment")
Array.prototype.slice.apply(links).forEach(function (url) {
  const href = url.getAttribute("href");
  if (!href) return;
  if (href.match(/\.(mp3|wav|ogg)/i)) {
    var index = music.length;
    // if (is_mobile) href = href.replace(/^https/,"http")
    music.push(url);
    url.addEventListener("click", function (e) {
      if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
      e.preventDefault();
      play(index);
    });
  } else if (href.match(/(gif|jpe?g|png|bmp)/i)) {
    // url.innerHTML = "<img src='" + href + "'>"
    // url.addEventListener("click", function(e){
    //   if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
    //   e.preventDefault()
    //   url.classList.toggle("zoomed")
    // })
  }
});
const el = document.querySelector(".player");
const title_el = el.querySelector(".title");
const icon_el = el.querySelector(".icon");
const pos_el = el.querySelector(".pos");
const track_el = el.querySelector(".track");
const dot_el = el.querySelector(".dot");
const time_el = el.querySelector(".time");
const track_width = track_el.offsetWidth;
const track_left = pos_el.offsetLeft;
if (music.length) {
  audio = document.createElement("audio");
  window.a = audio;
  audio.setAttribute("controls", true);
  audio.addEventListener("ended", next);
  audio.addEventListener("timeupdate", timeupdate);
  // audio.src = music[0].href
  // var player = document.querySelector("table")
  // player.parentNode.insertBefore(audio, player)
  document.body.addEventListener("keydown", keydown);
  // comment.addEventListener("focus", focusTextBox)
  // comment.addEventListener("blur", blurTextBox)
}
icon_el.addEventListener("click", toggle);

if (is_mobile) {
  pos_el.addEventListener("touchstart", (e) => mousedown(e.touches[0]));
  pos_el.addEventListener("touchmove", (e) => mousemove(e.touches[0]));
  window.addEventListener("touchup", mouseup);
} else {
  pos_el.addEventListener("mousedown", mousedown);
  pos_el.addEventListener("mousemove", mousemove);
  window.addEventListener("mouseup", mouseup);
}
var down = false;
var mousex = 0;
function mousedown(e) {
  e.preventDefault && e.preventDefault();
  down = true;
  mousex = (e.pageX - track_left) / track_width;
}
function mousemove(e) {
  if (!down) return;
  mousex = Math.min(Math.max(0, (e.pageX - track_left) / track_width), 1);
  dot_el.style.transform = "translateX(" + mousex * track_width + "px)";
}
function mouseup(e) {
  if (!down) return;
  down = false;
  var t = mousex * audio.duration;
  audio.currentTime = Math.round(t);
  dot_el.style.transform = "translateX(" + mousex * track_width + "px)";
}

function play(index) {
  if (!active) {
    active = true;
    el.classList.add("active");
  }
  // if (index === music.length) return stop();
  if (!icon_el.classList.contains("active")) {
    icon_el.classList.add("active");
  }
  current_index = (index + music.length) % music.length;
  const a_el = music[current_index];
  audio.src = a_el.getAttribute("href");
  audio.play();

  const header = prevUntil(a_el.parentNode, "h3");
  const title =
    index + 1 + ". <i>" + header.innerText + "</i>: " + a_el.innerText;
  title_el.innerHTML = title;
  var playing = document.querySelector(".playing");
  if (playing) playing.classList.remove("playing");
  music[current_index].classList.add("playing");
}
function prev() {
  play(current_index - 1);
}
function next() {
  play(current_index + 1);
}
function pause() {
  icon_el.classList.remove("active");
}
function stop() {
  el.classList.remove("active");
  var playing = document.querySelector(".playing");
  if (playing) playing.classList.remove("playing");
  active = false;
}
function toggle() {
  if (audio.paused) {
    icon_el.classList.add("active");
    audio.play();
  } else {
    pause();
    audio.pause();
  }
}
function timeupdate() {
  if (down) return;
  let { currentTime, duration } = audio;
  let t = currentTime / duration;
  dot_el.style.transform = "translateX(" + track_width * t + "px)";
  time_el.innerHTML = time(currentTime) + " / " + time(duration);
}
function time(n) {
  if (!n) return "0:00";
  n = Math.floor(n);
  let s = n % 60;
  if (s < 10) s = "0" + s;
  let m = Math.floor(n / 60);
  return m + ":" + s;
}
function keydown(e) {
  if (typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
  switch (e.keyCode) {
    case 37: // left
      prev();
      break;
    case 39: // right
      next();
      break;
    case 32: // spacebar
      e.preventDefault();
      toggle();
      break;
  }
}

function prevUntil(elem, selector) {
  elem = elem.previousElementSibling;
  while (elem) {
    if (elem.matches(selector)) break;
    elem = elem.previousElementSibling;
  }
  return elem;
}
// function focusTextBox (){ typing = true }
// function blurTextBox (){ typing = false }

document.querySelector(".loading").classList.remove("loading");