function format_length(seconds) {
  var length = Math.round(seconds);
  var minutes = Math.floor(length / 60);
  var seconds = length % 60;
  return minutes + ":" + ( "0" + seconds ).slice(-2);
}

function format_track(index, title, length, bpm, notes, cue_start, cue_bkdn, cue_next, cue_last, bars_in, bars_out) {
  length = format_length(length);
  bpm = Math.round(bpm);
  cue_start = format_length(cue_start);
  cue_bkdn = format_length(cue_bkdn);
  cue_next = '-' + format_length(cue_next);
  cue_last = '-' + format_length(cue_last);
  if ( notes == null ) notes = '-';
  entry = $('<div id="track_' + index + '" class="track" onClick="current(' + index + ');">');
  entry.append($('<span class="index">' + index + '</span>'));

  tn = $('<div class="title-notes">');
  tn.append($('<span class="title" title="' + title + '">' + title.slice(0,65) + '</span><br>'));
  tn.append($('<span class="notes" title="' + notes + '">' + notes.slice(0,80) + '</span>'));
  entry.append(tn);

  if ( index > 0 ) {
    lb = $('<div class="length-bpm">');
    lb.append($('<span class="length">' + length + '</span><br>'));
    lb.append($('<span class="bpm">' + bpm + '<span>BPM</span></span>'));
    entry.append(lb);

    cues = $('<div class="cues">');
    cues.append($('<span class="next">Next: ' + cue_next + '</span><br>'));
    cues.append($('<span class="last">Last: ' + cue_last + '</span><br>'));
    cues.append($('<span class="out">(' + bars_out + ' bars)</span>'));
    entry.append(cues);

    cues = $('<div class="cues">');
    cues.append($('<span class="start">Start: ' + cue_start + '</span><br>'));
    cues.append($('<span class="bkdn">Bkdn: ' + cue_bkdn + '</span><br>'));
    cues.append($('<span class="in">(' + bars_in + ' bars)</span><br>'));
    entry.append(cues);
  }

  return entry;
}

function init() {
  for (var index in tracklist) {
    track = tracklist[index];
    entry = format_track(
      track['index'], track['title'], track['length'], track['bpm'],
      track['notes'],
      track['start'], track['bkdn'], track['next'], track['last'],
      track['in'], track['out']
    );
    $('#tracks').append(entry);
  }
}

/* Track 0 is 'no current track' */
function current(index) {
  if (index < 0 || index > maximum_index)
    return;
  current_index = index;
  $("div.track").removeClass("current");
  $("div.track > .index").off('click.commit');
  $("div#track_" + index).addClass("current");
  $("div#track_" + index + " > .index").on('click.commit', commit);
}

function updating(index) {
  if (index < 0 || index > maximum_index)
    return;
  $("div.track").removeClass("running sending");
  $("div#track_" + index).addClass("sending");
}

function running(index) {
  if (index < 0 || index > maximum_index)
    return;
  $("div.track").removeClass("running sending");
  $("div#track_" + index).addClass("running");
}

function next() {
  current(current_index + 1);
}

function prev() {
  current(current_index - 1);
}

function commit() {
  running_index = current_index;
  commit_update();

  params = {
    url: "/commit",
    type: "POST",
    data: { index: current_index }
  };

  var req = $.ajax(params)
    .done(function(data, textStatus, req) {
      commit_ready();
    })
    .fail(function(req, textStatus, errorThrown) {
      console.log("AjaxFailed:" + textStatus + " - " + errorThrown);
      commit_failed();
    });
}

function commit_ready() {
  running(running_index);
}

function commit_update() {
  updating(running_index);
}

function commit_failed() {
  current(running_index);
  $('div.track').removeClass("running sending");
}

maximum_index = tracklist.length;
current_index = 0;
running_index = 0;

$(document).ready(init);