var pageUrl = window.location.href;
var username = $(".path__username > a").eq(0).text();
var channelId = $(".channel > span").eq(0).attr("id").slice(16);
var channelName = $(".channel > span").eq(0).text();

// $.ajax({
//  //type: 'GET',
//  url: 'https://api.are.na/v2/channels/' + channelId + '/contents',
//  data: { get_param: 'value' },
//  dataType: 'json',
//  success: function (data) {
//    console.log(data.contents);
//    // $.each(data, function(index, element) {
//    //  console.log(element.contents.title);
//    // });
//  }
// });

var blocks = [];

var firstPage = $('<div>').addClass("page").append("<h1 id='channel'>Are.na <span class='slash'>/</span><br>" + username + " <span class='slash'>/</span><br><span id='channelName'>" + channelName + "</span></h1>\n<footer class='block__footer'><small><a href='" + pageUrl + "'>" + pageUrl + "</a></small></footer>");

$.getJSON(chrome.extension.getURL('contents.json'), function(data) {
  //console.log(data);
  var channelContents = data.contents;
  $.each(channelContents, function( index, block ) {
    var datetime = new Date(block.created_at).toLocaleDateString();
    blocks[index] = "<div class='page'>\n"
      + "<article class='block'>\n"
        + "<header class='block__header'>\n"
          + ( block.title == null ? "<h3 class='block__title'>"+ block.generated_title + "</h3>\n" : "<h3 class='block__title'>" + block.title + "</h3>\n" )
          + "<p class='block__url'><span class='block__header__label'>URL</span><a href='https://www.are.na/block/"+ block.id + "'>https://www.are.na/block/"+ block.id + "</a><br>\n"
          + "<span class='block__header__label'>User</span> <span class='block__username'>" + block.user.full_name + "</span><br>\n"
          + "<span class='block__header__label'>Date</span> <time datetime='" + block.created_at + "' class='block__date'>" + datetime + "</time></p>\n"
        + "</header>\n"
          + ( block.content_html ? "<div class='block__content'>"+ block.content_html + "</div>\n" : "" )
          + ( block.image ?  "<figure class='block__image'>\n<img src='"+ block.image.large.url + "'>\n" + ( block.description_html ? "<figcaption class='block__description'>" + block.description_html + ( block.source ? "<small class='block__source'>Source: <a href='"+ block.source.url + "'>"+ block.source.url + "</a></small>\n" : "" ) + ( block.attachment ? "<small class='block__attachment'>PDF: <a href='"+ block.attachment.url + "'>"+ block.attachment.url + "</a></small>\n" : "" ) + "</figcaption>\n" : "") + "</figure>\n" : "" )
        + "<footer class='block__footer'><small><a href='" + pageUrl + "'>" + pageUrl + "</a></small></footer>\n"
      + "</article>\n"
    + "</div>";
  });
});

//console.log(blocks);

$.get(chrome.extension.getURL('head.html'), function( head ) {
  $( "head" ).html( head );
});

$.get(chrome.extension.getURL('body.html'), function( pages ) {
  $( "body" ).html( pages );
  $( "#pages" ).append(firstPage);
  $.each(blocks, function( index, block ) {
    $( "#pages" ).append(block);
  });
});


// Print
//window.print();