var client_id = '81575b2eb472f76e6c39fc1780ad6cde';
var pageSize = 10;
var allTracks = [];

function playerTracks(tracks) {
  var $tracks = $('<table id="sounds-tracks" />')
    .attr('cellspacing',10)
    .replaceAll('#sounds')

  allTracks = tracks;

  // add paginator
  var numPages = Math.ceil(tracks.length / pageSize);
  if (numPages > 0) {
    var $paginator = $('<tr id="paginator"><td colspan="3" align="center"></td></tr>')
          .appendTo($tracks),
        $pages = $paginator.find('td');

    for (var p = 0; p < numPages; p++) {
      $('<a href="#" id="page'+p+'">'+(p+1)+'</a>')
        .data('page', p)
        .appendTo($pages)
        .after(' ')
        .click(function(ev) {
          var $this = $(this);
          ev.preventDefault();
          showTracksPage($this.data('page'));
          $this.siblings().removeClass('current-page');
          $this.addClass('current-page');
        })
    }
    $('#page0').addClass('current-page')
  }

  showTracksPage(0)
/*
  // link to 'more'
  $('<tr><td colspan="3">' +
    '<a href="http://soundcloud.com/users/henryboy_freesound/">' +
    'Get more free sounds from Henryboy</a></a></td></tr>').appendTo($tracks)
*/

}

function showTracksPage(page) {
  var offset = page * pageSize,
      tracks = allTracks.slice(offset, offset + pageSize),
      $tracks = $('#sounds-tracks'),
      $paginator = $('#paginator')

  // remove existing tracks
  $tracks.find('.sounds-track').remove();

  // add new tracks
  $.each(tracks, function(index, track) {
    var dur = [ String(Math.floor(track.duration / 1000 / 60)),
      String(Math.round(track.duration / 1000) % 60) ];
    $.each(dur, function(i,d) { if (d.length == 1) dur[i] = '0' + d });

    var $title = $('<td></td>').text(track.title).addClass('track-title'),
      $duration = $('<td></td>').text(dur.join(':')),
      $genre = $('<td></td>').text(track.genre),
      $description = $('<td></td>').text(track.description).addClass('track-description'),
      $play = $('<a href="#">Play</a>')
        .click(showSoundPlayer)
        .data('track',track)
        .wrap('<td></td>').parent(),
      $download = $('<a href="#">Download</a>')
        .attr('href', track.download_url + '?client_id=' + client_id)
        .wrap('<td></td>').parent(),
      $nodownload = $('<td>Download</td>'),
      $placeholder = $('<tr></tr>').append('<td colspan="3"></td>').css({width:$tracks.width()+'px'});

    $('<tr></tr>')
      .addClass('sounds-track')
      .appendTo($tracks)
      .append($title.add($genre).add($duration));
    $('<tr></tr>')
      .addClass('sounds-track')
      .appendTo($tracks)
      .append($description.add($play).add(track.downloadable ? $download : $nodownload));
    $placeholder
      .addClass('sounds-track')
      .addClass('sounds-player-placeholder')
      .appendTo($tracks);
  });

  // always at the bottom
  $paginator.detach().appendTo($tracks);
}

function showSoundPlayer(ev) {
  ev.preventDefault();
  var $target = $(ev.currentTarget),
      $container = $target.closest('tr').next(),
      $containerCell = $container.find('td'),
      $prevContainer = $container.siblings('.player-visible'),
      track = $target.data('track'),
      embedOptions = { auto_play: true, show_comments: false, color: '#eb2e0f' };

  // load player for the first time
  if (!$container.hasClass('player-loaded')) {
    // show placeholder
    $containerCell.empty().append('<div class="sounds-loading">Loading player...</div>');

    SC.oEmbed(track.permalink_url, embedOptions, function(embed) {
      var $embed = $(embed.html)[0];
      $containerCell.empty().append($embed);
      $container.addClass('player-loaded');
    })
  }

  // hide other player if showing
  if ($prevContainer.length) {
    $prevContainer.slideUp(function() {
      $prevContainer.removeClass('player-visible');
      $container.slideDown(function() {
        $container.addClass('player-visible');
      });
    })
  }
  else {
    $container.slideDown(function() {
      $container.addClass('player-visible');
    });
  }
}

function _buildPlayer(ev) {
  var $li = $(ev.currentTarget),
      track = $li.data('track');
  $('#sounds-player').slideUp(function() {
    $(this)
      .detach()
      .appendTo($li.parent().next().find('td'))
      .find('#sounds-waveform')
        .empty()
        .append($('<img/>').attr({src: track.waveform_url}))
        .end()
      .slideDown()
  })
}