var playlist = WaveformPlaylist.init({
  container: document.getElementById("playlist"),
  timescale: true,
  state: 'cursor',
  samplesPerPixel: 16384,
  zoomLevels: [2048, 4096, 8192, 16384],

  controls: {
    show: true,
    width: 150,
    widgets: {
      stereoPan: false,
    }
  },
  waveHeight: 96,
});


function updateTrackInfo(guid, info) {
  var tracks = $(".playlist-tracks").children();
  for (var i = 0; i < tracks.length; i++) {
    var track = tracks[i].firstChild;
    var trackGuid = track.firstChild.getElementsByTagName('span')[0].innerText;
    var userInfoElem = track.lastChild;
    if (userInfoElem.className != 'user-info') {
      userInfoElem = document.createElement('label');
      userInfoElem.className = 'user-info';
      track.appendChild(userInfoElem);
    }
    if (guid === null || trackGuid == guid) {
      userInfoElem.innerText = info;
    }
  }
}

var ee = playlist.getEventEmitter();
var $container = $("body");
var $time = $container.find(".audio-pos");
var $time_ = $container.find(".audio-pos-2");

var audioPos = 0;

function clockFormat(seconds, decimals) {
  var hours,
      minutes,
      secs,
      result;

  hours = parseInt(seconds / 3600, 10) % 24;
  minutes = parseInt(seconds / 60, 10) % 60;
  secs = seconds % 60;
  secs = secs.toFixed(decimals);

  result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (secs < 10 ? "0" + secs : secs);

  return result;
}

function updateTime(time) {
  $time.html(clockFormat(time, 3));
  audioPos = time;

  var tick = time / g_session.tickinterval;
  var silenceTicks = 0;
  for (var i = 0; i < g_session.silence_chunks.length; i++) {
    var chunk = g_session.silence_chunks[i];
    if (tick > chunk[0]) {
      silenceTicks += chunk[1];
    } else {
      break;
    }
  }
  var tickedTime = (tick + silenceTicks) * g_session.tickinterval;
  $time_.html(clockFormat(tickedTime, 3));
}

updateTime(audioPos);

$container.on("click", ".btn-play", function() {
  ee.emit("play");
});

$container.on("click", ".btn-pause", function() {
  isLooping = false;
  ee.emit("pause");
});

$container.on("click", ".btn-stop", function() {
  isLooping = false;
  ee.emit("stop");
});

$container.on("click", ".btn-rewind", function() {
  isLooping = false;
  ee.emit("rewind");
});

$container.on("click", ".btn-fast-forward", function() {
  isLooping = false;
  ee.emit("fastforward");
});

//zoom buttons
$container.on("click", ".btn-zoom-in", function() {
  ee.emit("zoomin");
});

$container.on("click", ".btn-zoom-out", function() {
  ee.emit("zoomout");
});


$container.on("input change", ".master-gain", function(e){
  ee.emit("mastervolumechange", e.target.value);
});
$container.find(".master-gain").change();

$container.on("change", ".automatic-scroll", function(e){
  ee.emit("automaticscroll", $(e.target).is(':checked'));
});
$container.find(".automatic-scroll").change();


ee.on("timeupdate", updateTime);


function onFinishedLoading() {
  updateTrackInfo(null, "name");
}