/*
   TEXT TO SPEECH...
   
   
   SpeechSynthesisUtterance() documentation:
      https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance
      
   speechSynthesis() documentation:
      https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis


 */

let u;
let bSpeaking = false;
const stuffToSay = [];
let nWaitBetween = 900;

function pageSetup(evt) {
  //console.log("pageSetup() run")
  
  if (!SpeechSynthesisUtterance || !speechSynthesis) {
    const speakBtnNd = document.getElementById("speakBtn");
    const warningNd = document.getElementById("warning");
    const txtFldNd = document.getElementById("txtFld");
    const lblNd = document.getElementById("lbl");
    
    warningNd.style.display = "block";
    speakBtnNd.style.display = "none";
    txtFldNd.style.display = "none";
    lblNd.style.display = "none";
    
    return;
  } // end if
  
  u = new SpeechSynthesisUtterance();
  u.addEventListener('end', doneSpeaking);
  u.addEventListener('boundary', wordChange);
  
  console.log("utterance set up")
  sayIt("Hello there, Code pen user! How are you doing?");
  sayIt("This pen demonstrates taking text, and speaking it using a built in speech synthesizer.");
  sayIt("It uses the speech Synthesis and the Speech Synthesis Utterance APIs built into this web browser.");
  sayIt("This pen was forked from another pen created by Chris Coyier.");
  sayIt("Which in turn.");
  sayIt("Was forked from a pen by Stephen, Estrella.");
  sayIt("You can type in some text into the text box on this screen.");
  sayIt("Then, simply press the Speak button, and I will read the text back to you!");
  sayIt("Isn't that really cool?");
  const speakBtnNd = document.getElementById("speakBtn");
  const txtFldNd = document.getElementById("txtFld");
  txtFldNd.addEventListener('dblclick', genRandomMsg);
  speakBtnNd.addEventListener('click', sayText);
  console.log("speak button event listener set up")
} // end of function pageSetup()



function sayIt(sText) {  
  const cmd = {};
  cmd.cmd = "say";
  cmd.text = sText;
  stuffToSay.push(cmd);
  sayIt2();
} // end of function sayIt()


function sayIt2() {  
  if (bSpeaking) return;
  
  if (stuffToSay.length === 0) {
    return;
  } // end if
  
  const cmd = stuffToSay.shift();
  
  if (cmd.cmd === "say") {
    bSpeaking = true;
    let sText = cmd.text;
    const speakBtnNd = document.getElementById("speakBtn");
    speakBtnNd.innerHTML = "Speaking...";

    u.text = sText;
    speechSynthesis.speak(u);
  } // end if
  
} // end of function sayIt()



/*  called when Speak button if pressed: */
function sayText(evt) {  
  
  const txtFldNd = document.getElementById("txtFld");
  let sText = txtFldNd.value;
  
  if (sText === "") {
    sayIt("There is no text in the text box!");
    sayIt("Type in some text into the text box above.");
    sayIt("Then.");
    sayIt("You can press the Speak Button!");    
    sayIt("Then it will work!");
  } // end if
  
  sayIt(sText);
} // end of function sayText()


function doneSpeaking(evt) {
  bSpeaking = false;
  const speakBtnNd = document.getElementById("speakBtn");
  speakBtnNd.innerHTML = "Speak";
  
  if (stuffToSay.length > 0) {
    setTimeout(sayIt2, nWaitBetween);
  } // end if
  
} // end of function doneSpeaking()

function genRandomMsg() {
  const msgs = [];
  
  //msgs.push("");
  msgs.push("I love the sound of my computer-generated voice.");
  msgs.push("She sells sea shells, down by the sea shore.");
  msgs.push("Code Pen Rocks!");
  msgs.push("I'm sorry Dave, but I'm afraid I can't do that!");
  msgs.push("I have mate in 12 moves!");
  msgs.push("Warning! Alien approaching!");
  msgs.push("Warning! Will Robinson!");
  msgs.push("What you are suggesting is not logical!");
  msgs.push("Will you Heart this pen?");
  msgs.push("Was it apartment 2-A, or 2-B? To be or not to be, that is the question!");
  msgs.push("Thank you for double clicking the text box!");
  msgs.push("Don't forget to do that thing... that thing... what was it again?");
  msgs.push("Computing! Please wait!");
  msgs.push("We should reach the planet in 37 earth, days!");
  msgs.push("Thank you for calling our no-help-whatsoever center. Dial zero, and you will not get a person, but will be dumped somewhere in the self-service call tree! Isn't that wonderful?");
  msgs.push("JavaScript is a really expressive computer language. Don't you agree?");
  msgs.push("You keep using that word. I don't think it means what you think it means!");
  msgs.push("Too bad I don't work on iOS!");
  msgs.push("Inconceivable!");
  msgs.push("Have you seen a six fingered man?");
  msgs.push("There will be blood, tonight!!");
  msgs.push("I keep getting my merds, wixed!!");
  msgs.push("I keep getting my Tang all Tongoled up!");
  msgs.push("The ROOT. of the word is greek!");
  msgs.push("Great Scott!!");
  msgs.push("I know Kung Fu!!");
  msgs.push("There is no spoon!");
  const nPick = Math.floor(Math.random() * msgs.length);
  const txtFldNd = document.getElementById("txtFld");
  txtFldNd.value = msgs[nPick];
  sayText(); // same as clicking "Speak" button!
  
} // end of function genRandomMsg()

let nTimerId = -1;

/*
   called on "boundry" event.
   See:
     https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/boundary_event
 */
function wordChange(evt) {
  if (nTimerId > -1) {
    try {
      clearTimeout(nTimerId);
    } catch(err) {
      // do nothing if there is an error
    } // end of try/catch
  } // end if
  
  const speakBtnNd = document.getElementById("speakBtn");
  speakBtnNd.style.background = "yellow";
  nTimerId = setTimeout(restoreBtnColor,50);
  
} // end of function wordChange()



function restoreBtnColor() {
  nTimerId = -1;
  const speakBtnNd = document.getElementById("speakBtn");
  speakBtnNd.style.background = "#9df";
} // end of function restoreBtnColor()


window.addEventListener('load', pageSetup);