function render_videos(results) {
  if (results.length < 6)
    $(window).unbind('scroll', load_more);

  if (results.length == 0)
    return;

  $('#no_videos').hide();

  for (var i = 0; i < results.length; i++) {
    var result = results[i];
    var html = '';
    var tags = '';

    for (var j = 0; j < result.tags_list.length; j++) {
      tags += '<a class="tag is-light" href="/search?q=' + result.tags_list[j] + '">';
      tags += result.tags_list[j];
      tags += '</a>'
    }

    html += '<div class="column is-half">';
    html += '<div class="card">';
    html += '<div class="card-image">';
    html += '<figure class="image is-16by9">';
    html += '<a href="/watch/' + String(result.id) + '">';
    html += '<img src="' + result.thumbnail + '">';
    html += '</a>';
    html += '</figure>';
    html += '</div>';
    html += '<div class="card-content">';
    html += '<div class="content">';
    html += '<div class="tags are-normal">' + tags + '</div>';
    html += '</div>';
    html += '<div class="media">';
    html += '<div class="media-left">';
    html += '<figure class="image is-48x48">';
    html += '<a href="/user/' + result.uploader_id + '"><img id="avatar_' + String(result.id) + '" src="/static/avatars/default/default.128.png"></a>';
    html += '</figure>';
    html += '</div>';
    html += '<div class="media-content">';
    html += '<p class="title is-5"><a id="username_' + String(result.id) + '" href="/user/' + result.uploader_id + '">the void</a></p>';
    html += '<p class="subtitle is-6"><i class="fas fa-heart"></i> ' + String(result.likes_count) + '</p>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    html += '</div>';

    $('#user_videos').append(html);      

    api('user', {user_id: result.uploader_id}, function (data, additional_data) {  
      var video_id =  additional_data[0];

      $('#avatar_' + String(video_id)).attr('src', data.avatar128);
      $('#username_' + String(video_id)).text(data.username);
    }, result.id);
  }

  if (results.length >= 6) {
    window.offset += results.length;

    $(window).bind('scroll', load_more);
  }
}

function get_user_videos() {
  api('videos', {user_id: window.user_id, offset: window.offset}, function (data) {
    $('#videos_count').text(data.videos_count);

    $('#videos_count_suffix').text(data.videos_count != 1? 's': '');
    
    render_videos(data.videos);
  });
}

function load_more() {
  if (!scrolled_down(100))
    return;

  get_user_videos();

  $(window).unbind('scroll', load_more);
}

$(function () {
  window.offset = 0;
  $('#change_avatar').hide();

  api_unchecked('user', {user_id: window.user_id}, function (data) {
    if (data.error !== undefined) {
      document.location.href = '/404';
      
      return; 
    }

    $('#avatar').attr('src', data.avatar128);
    $('#username').text(data.username);
    $('#signup_date').text(moment.unix(data.signup_ts).format('L'));
    
    get_user_videos();
  });
  
  if (window.user_id == window.my_user_id) {
    $('#change_avatar').show();
    
    $('#upload_avatar_button').click(function () {
      $('#upload_avatar_button').addClass('is-loading');
      $('#upload_avatar_button').prop('disabled', true);

      var form = new FormData();
      form.append('avatar', $('#avatar_input').prop('files')[0]);

      api_unchecked('upload/avatar', form, function (data) {
        $('#upload_avatar_button').removeClass('is-loading');
        $('#upload_avatar_button').prop('disabled', false);
        
        if (data.error !== undefined) {
          popup('danger', 'Error: ' + data.error);
          
          return;
        }
        
        popup('primary', 'Successfully updated your avatar!');

        setTimeout(function () {
          window.location.reload();
        }, 1500);
      });
    });
  } 
});