//-----------------------------------------------------------------------------

var i = 0
var interval = 1000
var words  = new Array()
var sounds = new Array()
var mode = "pause"  // pause or play
var stopNext = false
var textPlay = "Click the PLAY button for automatic advance, or press the ENTER key for the next word, or click the other buttons for manual navigation."
var textPause = "Click the PAUSE button or press the ENTER key for manual advance, or click the other buttons for manual navigation."

//-----------------------------------------------------------------------------

function setSound() {
  var soundLink = document.getElementById("soundLink")
  var imgSound  = document.getElementById("imgSound")
  if (sounds[i] != null) {
    soundLink.href = sounds[i]
    soundLink.title = "Listen to the word"
    imgSound.src = "Sound.gif"
  }	
  else {
    soundLink.href = "javascript: nada();"	
    soundLink.title = "Sorry, I can't say the word"
    imgSound.src = "ClearDot.gif"
  }	
  return true  
}

//-----------------------------------------------------------------------------

function playSound() {
  mode = "pause"
  var imgPlay = document.getElementById("imgPlay")
  imgPlay.src="Play.gif"
  imgPlay.title = "Play (Automatic Advance)"
  var msgCell = document.getElementById("msgCell")
  msgCell.innerHTML = textPlay
  var nextLink = document.getElementById("nextLink")
  nextLink.focus()
  setSound()
  return true
}

//-----------------------------------------------------------------------------

function setFontSize() {
  var fs = document.getElementById("fontSize")
  var wordCell = document.getElementById("wordCell")
  for (var i = fs.options.length - 1;  i >= 0; i--) {				
	  if (fs.options[i].selected) {
      wordCell.style.fontSize = fs.options[i].value
      return
    }    
  }
  //wordCell.style.fontSize = fs.options[fs.selectedIndex].value
}

//-----------------------------------------------------------------------------

function setFontFamily() {
  var ff = document.getElementById("fontFamily")
  var wordCell = document.getElementById("wordCell")
  for (var i = ff.options.length - 1;  i >= 0; i--) {				
	  if (ff.options[i].selected) {
      wordCell.style.fontFamily = ff.options[i].value
      return
    }    
  }
  //wordCell.style.fontFamily = ff.options[ff.selectedIndex].value
}

//-----------------------------------------------------------------------------

function setIntvl() {
  var objIntvl = document.getElementById("interval")
  for (var i = objIntvl.options.length - 1;  i >= 0; i--) {				
	  if (objIntvl.options[i].selected == true) {
      interval = objIntvl.options[i].value
      return
    }    
  }
}

//-----------------------------------------------------------------------------

function display() {
  var displayCell = document.getElementById("displayCell")
  displayCell.innerHTML = "<nobr>Number " + (i + 1) + " of " + words.length + " words</nobr>"
  setSound()
}

//-----------------------------------------------------------------------------

function showDebug(str) {
  var debugCell = document.getElementById("debugCell")
  if (debugCell != null) 
    debugCell.innerHTML = str
}

//-----------------------------------------------------------------------------

function first() {
  mode = "pause"
  stopNext = true
  i = 0
  var wordCell = document.getElementById("wordCell")
  wordCell.innerHTML = words[i]
  var imgPlay = document.getElementById("imgPlay")
  imgPlay.src="Play.gif"
  imgPlay.title = "Play (Automatic Advance)"
  display()
  nextLink.focus()
}

//-----------------------------------------------------------------------------

function last() {
  mode = "pause"
  stopNext = true
  var nbrWords = words.length
  i = nbrWords -1
  var wordCell = document.getElementById("wordCell")
  wordCell.innerHTML = words[i]
  var imgPlay = document.getElementById("imgPlay")
  imgPlay.src="Play.gif"
  imgPlay.title = "Play (Automatic Advance)"
  display()
  nextLink.focus()
}

//-----------------------------------------------------------------------------

function next() {
  if (stopNext)
    return
  var nbrWords = words.length
  if (i + 1 < nbrWords)
    i++
  else {
    var repeat = document.getElementById("repeat")  
    if (repeat.checked)
      i = 0
    else {
      if (mode == "play")
        togglePlay()  
    }    
  }    
  var wordCell = document.getElementById("wordCell")
  wordCell.innerHTML = words[i]
  display()
  if (mode == "play")
    timerID = setTimeout("next()", interval)
}

//-----------------------------------------------------------------------------

function prev() {
  mode = "pause"
  stopNext = true
  var nbrWords = words.length
  if (i - 1 >= 0)
    i--
  else {
    var repeat = document.getElementById("repeat")  
    if (repeat.checked)
      i = nbrWords - 1 
  }
  var wordCell = document.getElementById("wordCell")
  wordCell.innerHTML = words[i]
  var imgPlay = document.getElementById("imgPlay")
  imgPlay.src="Play.gif"
  imgPlay.title = "Play (Automatic Advance)"
  display()
  nextLink.focus()
}

//-----------------------------------------------------------------------------

function togglePlay() {
  var imgPlay = document.getElementById("imgPlay")
  if (mode == "play") {
    mode = "pause"
    imgPlay.src="Play.gif"
    imgPlay.title = "Play (Automatic Advance)"
    var msgCell = document.getElementById("msgCell")
    msgCell.innerHTML = textPlay
    var nextLink = document.getElementById("nextLink")
    nextLink.focus()
  }
  else { 
    var nbrWords = words.length
    if (i >= nbrWords - 1) { // Currently on the last record
      i = -1
    }  
    mode = "play"
    imgPlay.src="Pause.gif"
    imgPlay.title = "Pause (Manual Advance)"
    var msgCell = document.getElementById("msgCell")
    msgCell.innerHTML = textPause
    var playLink = document.getElementById("playLink")
    playLink.focus()
    stopNext = false
    next()
  }  
}

//-----------------------------------------------------------------------------

function init() {
  drawPage()
  var msgCell = document.getElementById("msgCell")
  msgCell.innerHTML = textPlay
  first()
}

//-----------------------------------------------------------------------------

function drawPage() {
  document.write("<div align=center>");
  document.write("<table width=95% cellpadding=0 cellspacing=0 border=0>");
  document.write("  <tr>");
  document.write("    <td bgColor=black>");
  document.write("<table width=100% cellpadding=3 cellspacing=1 border=0>");
  document.write("  <tr>");
  document.write("    <td style=\"background-color:beige;\">");
  document.write("       <table width=100% cellpadding=0 cellspacing=0 border=0>");
  document.write("         <tr>");
  document.write("           <td style=\"font-weight:bold; color:blue; background-color:beige; font-size:14pt; font-family:Arial;\">");
  document.write("             FLASHER");
  document.write("           </td>");
  document.write("           <td style=\"color:blue; background-color:beige; font-size:9pt; font-family:Arial; text-align:right;\">");
  document.write("             <a style=text-decoration:none;\" href=\"javascript: alert('FLASHER by Mark L. Carson\\nCopyright 2003\\nVersion 1.0\\n\\nMark@MarkCarson.com');\">About</a>&nbsp;&nbsp;|&nbsp;&nbsp;");
  document.write("             <a style=text-decoration:none;\" target=FlasherHelp href=\"FlasherHelp.html\">Help</a>&nbsp;");
  document.write("           </td>");
  document.write("         </tr>");
  document.write("       </table>");  
  document.write("    </td>");
  document.write("  </tr>");
  document.write("  <tr>");
  document.write("    <td style=\"background-color:#dfdfdf;\">");
  document.write("       <table width=100% cellpadding=0 cellspacing=0 border=0>");
  document.write("         <tr>");
  document.write("           <td id=displayCell width=18% style=\"font-size:10pt; font-family:Arial;\">1 of 1</td>");
  document.write("           <td width=10% style=\"font-size:10pt; font-family:Arial; text-align:center\">");
  document.write("             <input type=checkbox id=repeat name=repeat checked> Repeat");
  document.write("           </td>");
  document.write("           <td width=18% style=\"text-align:center\">");
  document.write("             <select id=fontSize name=fontSize size=1 onChange=\"setFontSize();\">");
  document.write("               <option value=\"108pt\">108 points</option>");
  document.write("               <option value=\"72pt\">72 points</option>");
  document.write("               <option value=\"64pt\">64 points</option>");
  document.write("               <option value=\"48pt\"selected>48 points</option>");
  document.write("               <option value=\"36pt\">36 points</option>");
  document.write("               <option value=\"24pt\">24 points</option>");
  document.write("               <option value=\"18pt\">18 points</option>");
  document.write("               <option value=\"16pt\">16 points</option>");
  document.write("             </select>");
  document.write("           </td>");
  document.write("           <td width=18% style=\"text-align:center\">");
  document.write("             <select id=fontFamily name=fontFamily size=1 onChange=\"setFontFamily();\">");
  document.write("               <option value=\"Arial\" selected>Arial</option>");
  document.write("               <option value=\"Times\">Times</option>");
  document.write("               <option value=\"Tahoma\">Tahoma</option>");
  document.write("               <option value=\"Courier New\">Courier</option>");
  document.write("               <option value=\"Helvetica\">Helvetica</option>");
  document.write("             </select>");
  document.write("           </td>");
  document.write("           <td width=18% style=\"text-align:center\">");
  document.write("             <select id=interval name=interval size=1 onChange=\"setIntvl();\">");
  document.write("               <option value=\"500\">Half Second</option>");
  document.write("               <option value=\"1000\" selected>1 Second</option>");
  document.write("               <option value=\"1500\">1.5 Seconds</option>");
  document.write("               <option value=\"2000\">2 Seconds</option>");
  document.write("               <option value=\"2500\">2.5 Seconds</option>");
  document.write("               <option value=\"3000\">3 Seconds</option>");
  document.write("               <option value=\"4000\">4 Seconds</option>");
  document.write("               <option value=\"5000\">5 Seconds</option>");
  document.write("               <option value=\"6000\">6 Seconds</option>");
  document.write("               <option value=\"7000\">7 Seconds</option>");
  document.write("               <option value=\"8000\">8 Seconds</option>");
  document.write("               <option value=\"9000\">9 Seconds</option>");
  document.write("               <option value=\"10000\">10 Seconds</option>");
  document.write("               <option value=\"12000\">12 Seconds</option>");
  document.write("               <option value=\"14000\">14 Seconds</option>");
  document.write("               <option value=\"16000\">16 Seconds</option>");
  document.write("               <option value=\"18000\">18 Seconds</option>");
  document.write("               <option value=\"20000\">20 Seconds</option>");
  document.write("             </select>");
  document.write("           </td>");
  document.write("           <td width=18% style=\"font-size:10pt; font-family:Arial; text-align:right;\">");
  document.write("             <a id=soundLink href=\"\" onClick=\"playSound();\" title=\"Say the word\"><img id=imgSound src=\"Sound.gif\" border=0></a>");
  document.write("           </td>");
  document.write("         </tr>");
  document.write("       </table>");    
  document.write("    </td>");
  document.write("  </tr>");
  document.write("  <tr>");
  document.write("    <td style=\"text-align:center; background-color:white;\">");
  document.write("      <table width=100% cellpadding=48>");
  document.write("        <tr>");
  document.write("          <td id=wordCell style=\"text-align:center; background-color:white; font-size:48pt; font-family:Arial;\">Welcome</td>");
  document.write("        </tr>");      
  document.write("      </table>");
  document.write("    </td>");
  document.write("  </tr>");
  document.write("  <tr>");
  document.write("    <td style=\"background-color:#dfdfdf;\">");
  document.write("       <table width=100% cellpadding=0 cellspacing=0 border=0>");
  document.write("         <tr>");
  document.write("           <td width=20% style=\"text-align:center\">");
  document.write("             <a href=\"javascript: mode='pause'; first();\"><img src=First.gif border=0 title=\"Go To First Word\"></a>");
  document.write("           </td>");
  document.write("           <td width=20% style=\"text-align:center\">");
  document.write("             <a href=\"javascript: mode='pause'; prev();\"><img src=Prev.gif border=0 title=\"Go To Previous Word\"></a>");
  document.write("           </td>");
  document.write("           <td width=20% style=\"text-align:center\">");
  document.write("             <a id=playLink href=\"javascript: togglePlay();\"><img id=imgPlay src=Play.gif border=0 title=\"Play (Timed Advance)\"></a>");
  document.write("           </td>");
  document.write("           <td width=20% style=\"text-align:center\">");
  document.write("             <a id=nextLink href=\"javascript: mode='pause'; stopNext=false; next();\"><img src=Next.gif border=0 title=\"Go To Next Word\"></a>");
  document.write("           </td>");
  document.write("           <td width=20% style=\"text-align:center\">");
  document.write("             <a href=\"javascript: mode='play'; last();\"><img src=Last.gif border=0 title=\"Go To Last Word\"></a>");
  document.write("           </td>");
  document.write("         </tr>");
  document.write("       </table>");  
  document.write("    </td>");
  document.write("  </tr>");
  document.write("  <tr>");
  document.write("    <td id=msgCell style=\"color:blue; background-color:beige; text-align:center; font-size:10pt; font-family:Arial;\">");
  document.write("	    JavaScript is required. Please enable JavaScript to operate this program.");
  document.write("    </td>");
  document.write("  </tr>");
  document.write("  <!-- Enable for debugging output");
  document.write("  <tr>");
  document.write("    <td id=debugCell style=\"color:red; background-color:white; font-size:9pt; font-family:Arial;\">");
  document.write("	    Debug Information");
  document.write("    </td>");
  document.write("  </tr>");
  document.write("  -->");
  document.write("</table>");
  document.write("    </td>");
  document.write("  </tr>");
  document.write("</table>");
  document.write("</div>");
}

//-----------------------------------------------------------------------------