let messages = [
  " everyone.",
  " dog owners.",
  " the diet-conscious.",
  " workers.",
  " families."
];

//These are images that correspond with the messages array in the same location, so they have to be in sync
let images = [
  "url(https://via.placeholder.com/200x100)",
  "url(https://via.placeholder.com/400x100)",
  "url(https://via.placeholder.com/400x200)",
  "url(https://via.placeholder.com/400x300)",
  "url(https://via.placeholder.com/400x400)"

];
 
let loopDuration = 3000;

let i = 0;

function displayMessages() {

      let write = document.getElementById("message").innerText.length === 0; // initialise the state
      let char = document.getElementById("message").innerText.length; // the number of characters of the message
      console.log('write = ' + write);
  
      function typeWriter() {
        document.getElementById("message").innerText += messages[i].charAt(char++);               
      }
      function backSpacer() {
        document.getElementById("message").innerText = messages[i].substr(0, --char);
      }
      function displayImages() {
        //$('.bg').fadeTo('slow', 0.3, function() { //fade out the previous image
        //  $(this).css("background-image",images[i]); //change the image
        //}).fadeTo('slow',1); //fade into the new image
        $('.bg').css("background-image",images[i])
      }
      
      function nextStep() {
        let time = 50;
        if (write === true) { //if there is no message
          typeWriter(); //type the message out

          if (char === messages[i].length) { //if the current length has reached the full length
            write = false; // Stop running write === true stuff
            time = loopDuration - char * time * 2 - 500; // Wait x ms before erasing; wait for full duration minus the time taken to write and backspace
          }
        } else if (write === false) { //Change the state and do something else
          backSpacer(); // Backspace it


          if (char === 0) { // Once it's all deleted - there's no characters
            write = null; //Change the state and do something else
          }
        }
        setTimeout(nextStep, time); //run through the function every $time ms
      }
      
      nextStep();
      displayImages(); //move to the next image 
}


function loop() {
  //setInterval(function() {
    //reset i to start the messages again
    if(++i >= messages.length) i = 0;
    //i = Math.floor(Math.random() * 6); //randomness produces same text twice in a row which looks unprofessioanal
    displayMessages(); 
  //},loopDuration);
}



//Run the function
window.onload = function loadChanges() { //wait to see if page has loaded
  setTimeout(function() {
    setTimeout(displayMessages, 1500); //run first to delete message
    setTimeout(function run() {
      loop();
      setTimeout(run, 3300);
    }, 3000);
    //loop(); 
  }, 1000) //wait a further x ms
};