var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
var links = document.querySelectorAll("a")
var audio, music = [], current_index = -1, typing = false
var active = false
// var comment = document.querySelector("#comment")
Array.prototype.slice.apply(links).forEach(function(url){
  if (url.href.match(/\.(mp3|wav|ogg)/i)) {
    var index = music.length
    if (is_mobile) url.href = url.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 (url.href.match(/(gif|jpe?g|png|bmp)/i)) {
    // url.innerHTML = "<img src='" + url.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.href
  audio.play()

  const header = prevUntil(a_el.parentNode, 'h3')
  const title = (index + 1) + '. ' + header.innerText + ': ' + 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 }