var story =
  "Παραμιλούσαμε χαζεύοντάς τους , στην άκρη του Παραδείσου εμείς και οι χαρταετοί προς την άπλα της Σαλονίκης ή τις κορυφές του Βέρμιου . Λησμονούσαμε τους κόπους μας κρατώντας γερά την καλούμα , ευχαριστημένοι για τον άθλο , άλλος ψηλότερα , άλλος χαμηλότερα , ανάλογα και με το μάκρος του σπάγκου . Οι τρελότεροι πρόσθεταν κι άλλο , κι άλλο , για να ’ναι ανίκητος στον συναγωνισμό , κι άλλοι πιο ευφάνταστοι , έστελναν « γράμμα στον Θεό » : Χαρτί , το κάτω μέρος από τα τσιγαρόκουτα τις περισσότερες φορές , το τρυπούσαμε και το περνούσαμε στον σπάγκο της καλούμας . Αυτό με το αεράκι σιγά σιγά σερνόταν προς τα πάνω κι έφτανε στο τέλος , εκεί στο κέντρο του χαρταετού – στο χέρι του Θεού . Τι του γράφαμε αλήθεια ; Δεν θυμάμαι πια . <br><br> Κάτι που οπωσδήποτε δεν μπορούσε να γίνει με τον μικρό αετό , τη φτωχική σιάικα , την ψαλίδα . Μια κόλλα χαρτί όλο κι όλο , από τα τετράδια του σκολειού μας κυρίως , την τσακίζαμε λοξά πέντε φορές , ανοίγαμε τρύπες στις άκρες , περνούσαμε τα ζύγια , άλλη μια τρύπα στο πίσω μέρος για την ελαφριά ουρά , ο σπάγκος ή κλωστή στο χέρι και τρέχοντας έτρεχε μαζί μας . Την αφήναμε να υψωθεί ως τις στέγες των σπιτιών ή τις κορφές των δέντρων , πιο πάνω απαγορεύονταν γιατί μπερδεύονταν στα ηλεκτροφόρα σύρματα και τη χάναμε αποκομμένη από το σχοινί και το παιχνίδι μας , δίκοχο του Αλβανικού πολέμου , λάφυρο της κακιάς ώρας κρεμασμένο στους στύλους ή στα χαμηλά δέντρα . <br>Να γιατί με τη σιάικα δεν στέλναμε γράμμα – σε κανέναν Θεό .";

// VARIABLES
var blockedOut = false;
var punctuation = /([—.,?!;:"'])/;

// FUNCTIONS
function displayStory(storytext) {
  var poem = "";
  var array = storytext.split(" ");
  array.forEach(function (word) {
    poem += "<span class>" + word + " </span>";
  });
  $(".story").html(poem);
}

let poemText = "";

// Common function to update the poem
function updatePoem(contentToAdd) {
  poemText += contentToAdd;
  $("div.poem").html(poemText);
}

// Function to remove word from the poem
function removeWord(wordToRemove) {
  poemText = poemText.replace(wordToRemove, "");
  if (poemText.endsWith("<br>")) {
    poemText = poemText.slice(0, -4);
  }

  $("div.poem").html(poemText);
}

// Add new line to the poem
$(".newLine").on("click", function addNewLineToPoem() {
  updatePoem("<br>");
});

// Clicking on words
$("div.story").on("click", function wordClick(evt) {
  const target = $(evt.target);
  // check if word was blocked
  if (this !== evt.target && !target.hasClass("blocked")) {
    target.toggleClass("marked");

    wordToEdit = target.text() + " ";
    // check whether the word was marked or unmarked
    if (target.hasClass("marked")) {
      // target was marked, so add word
      updatePoem(wordToEdit);
    } else {
      // target was unmarked, so remove word
      removeWord(wordToEdit);
    }
  }
});

// CLICK RESET: Remove all classes, clear poem
$(".reset").on("click", function () {
  $("span").removeClass("blocked marked");
  $(".poem").html("");
  poemText = "";
});

// Block out all words not "marked"
$(".blockOut").on("click", function () {
  if (blockedOut) {
    $("span:not('.marked')").removeClass("blocked");
    blockedOut = false;
  } else {
    $("span:not('.marked')").addClass("blocked");
    blockedOut = true;
  }
});

// Clearing the marked class on click
$(".clearMarked").on("click", function () {
  $("span").removeClass("marked");
  $(".poem").html(" ");
  poemText = "";
});

// Create a printWindow for the poem
$(".print").on("click", function () {
  const printWindow = window.open("", "", "width=800,height=800");
  printWindow.document.open();
  printWindow.document.write(`
    <html>
    <head><title>Poem</title></head>
    <body>${poemText}</body>
    </html>
  `);
  printWindow.document.close();
  printWindow.print();
  printWindow.close();
});

// Save as pdf. Using lato font for utf-8 support
$(".save").on("click", function () {
  var pdf = new jspdf.jsPDF();

  pdf.setFont("Lato-Regular");

  // Turn html to text format for pdf
  const formattedPoemText = poemText.replace(/<br>/g, "\n");
  pdf.text(formattedPoemText, 10, 10);

  pdf.save("poem.pdf");
});

// Instructions popup

// Get the modal
var modal = document.getElementById("instructionModal");

// Get the button that opens the modal
var btn = document.getElementById("instructionBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function () {
  modal.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
  modal.style.display = "none";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

// Update the story

var storyBtn = document.getElementById("uploadStory");

storyBtn.onclick = function uploadStory() {
  story = $(".customStory").val();
  $(".story").html(displayStory(story));
  $(".customStory").val("");
  return false;
};

displayStory(story);
