$.getJSON("https://journals.kpu.ca/index.php/msq/libraryFiles/downloadPublic/61", function(json) {
  // const imageGrid = $("<div>");
  // imageGrid.attr("id", "grid_images");
  // imageGrid.addClass("sidebar-box");
  
  const header = $('<div>');
  header.addClass("header");
  header.append('<em>Issues 5.1 and 5.2</em>');
  
  const gridBoxes = json.infos.map((frame, index) => {
    const gridBox = $("<div>");
    gridBox.attr("id", index + 1);
    gridBox.addClass("grid-box article");
    gridBox[0].style.setProperty("--image-url", `url("https://journals.sfu.ca/msq/msq/public/journals/1/imageGrid/${frame.url}")`);  

    const articleLink = $("<a>");
    articleLink.addClass("article-link");

    let href = '';
    if (frame.url.indexOf(5.1) > -1) {
      href = `https://journals.sfu.ca/msq/msq/index.php/msq/article/view/${frame.articleNo}/pdf_1`;
    } else {
      href = `https://issuu.com/mesjournal/docs/msj_5-2-issuu/${frame.articleNo}`;
    }
    articleLink.attr(
      "href", 
      href
      );
    articleLink.text(frame.title);
  
    gridBox.append(articleLink);
    return gridBox;
  });
  
  const footer = $("<div>");
  footer.addClass("footer");
  
  const footerButton = $("<div>");
  footerButton.addClass("material-button");
  
  const footerButtonContent = $("<a>");
  footerButtonContent.addClass("material-button-content");
  footerButtonContent.attr(
    "href", 
    "https://www.lulu.com/en/us/shop/greg-chan/mise-en-scene-the-journal-of-film-visual-narration-issue-52-winter-2020/paperback/product-rw9yeg.html?page=1&pageSize=4"
  );
  footerButtonContent.text("Purchase Print Copy");
  
  footerButtonContent.appendTo(footerButton);
  footerButton.appendTo(footer);
  
  $(function() {
    $('#grid_images').empty().append(
      header,
      ...gridBoxes,
      footer
    );
  });
}).fail(err => {
  const placeholder = $("<em>Please log in to see the frames.</em>");
  $(function() {
    $('#grid_images').empty().append(
      placeholder
    );
  });
});