// Shrink up the spacing and change the size of the headers
u("#ingredients").attr("style", "margin-bottom: .5em;");
u("#ingredients").attr("class", "is-size-5");
u("#directions").attr("style", "margin: 0px;");
u("#directions").attr("class", "is-size-5");

// If we have ingredients subheadings, change the h4 headings
u("h4").addClass("is-size-6");
u("h4").attr("style", "margin: 0px;");

// Change the title size
u("#mainTitle").addClass("is-size-4");

// Change the lists margins
var directions = u("ol");
directions.attr("style", "margin-top: 0px; margin-bottom: 0px;");

var ingredients = u("ul");
ingredients.attr("style", "margin-top: 0px; margin-bottom: 0px;");

var listItems = u("li");
listItems.attr("style", "margin-top: 0px;");

// Remove the last <hr> if we have a footnote
var hrs = u("hr");
if (hrs.length > 2) {
  hrs.last().remove();
}

// Remove the footnote links
u(document.getElementsByClassName("footnote-backref")).remove();

// Break ingredients into column-able blocks
window.addEventListener("load", function () {
  const zutatenNode = document
    .evaluate('//*[@id="zutaten"]', document)
    .iterateNext();

  let nodeBlocks = [[]];
  let nextNode = zutatenNode.nextElementSibling;
  while (nextNode && nextNode.tagName != "H2") {
    if (nextNode.tagName == "H4") {
      nodeBlocks.push([]);
    }
    nodeBlocks[nodeBlocks.length - 1].push(nextNode);

    nextNode = nextNode.nextElementSibling;
  }

  let allIngredientsDiv = document.createElement("div");
  allIngredientsDiv.id = "allZutaten";
  allIngredientsDiv.classList.add("allZutaten");
  let nodeBlockIndex = 0;
  nodeBlocks.forEach(function (nodeArray) {
    let outerDiv = document.createElement("div");
    outerDiv.id = `wrap${nodeBlockIndex}`;

    outerDiv.classList.add("zutatenWrapper");
    allIngredientsDiv.appendChild(outerDiv);
    for (elem of nodeArray) {
      outerDiv.appendChild(elem);
    }

    nodeBlockIndex += 1;
  });
  zutatenNode.parentNode.insertBefore(
    allIngredientsDiv,
    zutatenNode.nextSibling
  );

  // space to full pages and add kirby background on every page
  const pageHeightInPx = 860;
  const docHeight = document.children[0].offsetHeight;
  const pages = Math.ceil(docHeight / pageHeightInPx);

  if ((docHeight / pageHeightInPx) % 1 != 0) {
    // need spacing
    const spacer = document
      .evaluate('//*[@id="spacer"]', document)
      .iterateNext();
    // spacer.style.border = "1px solid red";
    spacer.style.height = `${pages * pageHeightInPx}px`;
    console.log("docHeight", docHeight);
    console.log("pages", pages);
    console.log("pages * pageHeightInPx", pages * pageHeightInPx);
    console.log(
      "(docHeight/pageHeightInPx)%1",
      (docHeight / pageHeightInPx) % 1
    );
  }

  // fill all pages with kirby background
  const imageString = 'url("../../recipeskirby.svg")';
  imageArray = [imageString];
  let positionString = "background-position: 10mm 55mm";
  for (let i = 1; i < pages; i += 1) {
    positionString += `, 10mm ${230 * i + 55}mm`;
    imageArray.push(imageString);
  }

  const styleString = `#spacer { background-image: ${imageArray.join(
    ", "
  )}; ${positionString}; background-blend-mode: normal; background-repeat: no-repeat; }`;
  window.document.styleSheets[2].insertRule(styleString, 0);
});