/***************************************************************************
 * Function  : alterText                                                   *
 * Parameters: (1) Text string to put in a 'prompt' popup box              *
 *             (2) The 'id' name of the element clicked on                 *
 * This is a front for either alterTextByBox or alterTextByPrompt.  I      *
 * did it this way so I could test both alterTextByBox and                 *
 * alterTextByPrompt without having to change the underlying HTML code.    *
 ***************************************************************************/
function alterText(promptText,idName)
{
  alterTextByBox(idName);
  /*   OR    */
  // alterTextByPrompt(promptText,idName);
}

/***************************************************************************
 * Function  : alterTextByBox                                              *
 * Parameter : The 'id' name of the element clicked on                     *
 * This function assumes that you have an HTML tag something like this:    *
 *     <em id="mood01" onClick="alterText(this.id)">Happy</em>             *
 * When the user clicks on the 'Happy' text, the text is changed to a      *
 * form text input box with the text 'Happy' selected.  The user can type  *
 * in a new value and hit the <ENTER> key.  The input text box will then   *
 * revert to text with the newly entered value.  Also, any other elements  *
 * of the form 'moodX' or 'moodXX' where X is a digit 0-9 will be set to   *
 * the new answer.  In this way, you can have a bunch of related text on   *
 * a page (all with the same string and 'id' alpha prefix + number suffix) *
 * and when the user clicks on any one of them to change it, all of the    *
 * others get changed as well.  Note that the user should change the value *
 * to something other than what the text was previously as the input text  *
 * box uses the "onChange" event handler.  Since the "onBlur" event        *
 * handler is also used, the input text box will revert to the old text    *
 * if it was not changed, but there is the side effect that the page       *
 * position gets reset to the top.                                         *
 *                                                                         *
 * There are actually two parts to getting a new value.  The first is      *
 * handled by this function. It changes the original "static" text to      *
 * an input text box containing that text.  The second part is handled     *
 * by inputText() below to actually extract the newly entered text from    *
 * the text box and change it back into "static" text.                     *
 *                                                                         *
 * NOTE: This function only works if the browser supports the 'innerHTML'  *
 *       property.  As this is non-standard, it might not work everywhere. *
 ***************************************************************************/
function alterTextByBox(idName)
{
  var elem = document.getElementById(idName);
  if (elem)
    { 
      var oldtext = elem.innerHTML;
      /* Change the text to an input text box ONLY if it isn't already one */
      if (oldtext.substr(0,6).toLowerCase() != '<input')
        {
          elem.innerHTML = '<input type="text" ' +
                           'name="textinput" ' +
                           'value="' + oldtext + '" ' +
                           'size="' + (oldtext.length) + '" ' +
                           'tabindex="1" ' +
                           'onchange="inputText(this,\'' + idName + '\')" ' +
                           'onblur="inputText(this,\'' + idName + '\')" ' +
                           '></input>';
          document.mainbody.textinput.focus();
          document.mainbody.textinput.select();
        }
    }
}

/***************************************************************************
 * Function  : inputText                                                   *
 * Parameter : (1) The object pointer of the input text field              *
 *             (2) The 'id' name of the original element clicked on        *
 * This is the second part of the "alterText()" function above.  It is     *
 * called when the user changes the value of the input text box.  It does  *
 * the hard work of extracting the new value from the input text box and   *
 * changing all elements with a similar alpha prefix to the new value.     *
 * See alterText above for more information.                               *
 ***************************************************************************/
function inputText(inputObj,idName)
{
  var elem = document.getElementById(idName);
  if (elem) 
    { 
      /* Get the alpha prefix of the id (i.e. minus trailing digit(s)) */
      var prefixIdName = elem.id.replace(/\d+$/,"");
      var numIdName;
      var i;
      var newValue = inputObj.value;

      /* If empty input, then make it 'unknown' */
      if (newValue.length == 0)
        newValue = "unknown";

      /* First, look for ids named something like 'mood3' , 0-9 */
      for (i = 0; i <= 9; i++)
        {
          numIdName = prefixIdName + i; 
          elem = document.getElementById(numIdName);
          if (elem)
            elem.innerHTML = newValue;
        }
      /* Then, look for ids named something like 'mood03' , 00 - 99 */
      for (i = 0; i <= 99; i++)
        {
          numIdName = prefixIdName + ((i <= 9)?"0":"") + i;
          elem = document.getElementById(numIdName);
          if (elem)
            elem.innerHTML = newValue;
        }
    }
}

/***************************************************************************
 * Function  : alterTextByPrompt                                           *
 * Parameters: (1) Text string to put in a 'prompt' popup box              *
 *             (2) The 'id' name of the element clicked on                 *
 * This function assumes that you have an HTML tag something like this:    *
 *                                                                         *
 *   <em id="mood01"                                                       *
 *       onClick="alterTextByPrompt('How are you?',this.id)">Happy</em>    *
 *                                                                         *
 * When the user clicks on the 'Happy' text, he will be shown a popup      *
 * 'prompt' box with the prompt text 'How are you?'.  The current value    *
 * 'Happy' will be in the text entry field.  He can alter this value, hit  *
 * the <ENTER> key, and his new answer will be reflected in the HTML       *
 * document.  Also, any other elements of the form 'moodX' or 'moodXX'     *
 * where X is a digit 0-9 will be set to the new answer.  In this way,     *
 * you can have a bunch of related text on a page (all with the same       *
 * string and 'id' alpha prefix + number suffix) and when the user clicks  *
 * on any one of them to change it, all of the others get changed as well. *
 *                                                                         *
 * NOTE: This function only works if the browser supports the 'innerHTML'  *
 *       property.  As this is non-standard, it might not work everywhere. *
 ***************************************************************************/
function alterTextByPrompt(promptText,idName)
{
  var elem = document.getElementById(idName);
  if (elem)
    { /* Make sure the idName passed in actually exists */
      /* If so, pop up a 'prompt' box with the prompt text and current HTML */
      var answer = prompt(promptText,elem.innerHTML);
      if (answer)
        { /* Make sure there was some text entered */
          /* Get the alpha prefix of the id (i.e. minus trailing digit(s)) */
          var prefixIdName = elem.id.replace(/\d+$/,"");
          var numIdName;
          var i;

          /* First, look for ids named something like 'mood3' , 0-9 */
          for (i = 0; i <= 9; i++)
            {
              numIdName = prefixIdName + i; 
              elem = document.getElementById(numIdName);
              if (elem)
                elem.innerHTML = answer;
            }
          /* Then, look for ids named something like 'mood03' , 00 - 99 */
          for (i = 0; i <= 99; i++)
            {
              numIdName = prefixIdName + ((i <= 9)?"0":"") + i;
              elem = document.getElementById(numIdName);
              if (elem)
                elem.innerHTML = answer;
            }
        }
    }
}

/***************************************************************************
 * Function  : preventEnterSubmit                                          *
 * This function needs to be called in your <body onLoad="..."> tag.  For  *
 * all <input> elements within the <form> named "mainbody", the <ENTER>    *
 * key is remapped to a <TAB> key.  This is useful to prevent the          *
 * <ENTER> key from causing a <form> submission.  In effect, when the      *
 * user presses <ENTER> in the <form>, the focus is tabbed to the next     *
 * input field.                                                            *
 ***************************************************************************/
function preventEnterSubmit()
{
  // Get the element of the <form> named 'mainbody'
  var frmRequest = document.getElementById('mainbody');  
  if (frmRequest)
    if (window.event)
      frmRequest.onkeydown = frmRequest_KeyDown;
}

/***************************************************************************
 * Function  : frmRequest_KeyDown                                          *
 * Parameter : The event that was generated (onkeydown)                    *
 * This function is the new onkeydown event handler when the above         *
 * preventEnterSubmit function is called in the onLoad method of the       *
 * <body> tag.  It is from http://www.bigbold.com/snippets/posts/show/2272 *
 * and adapted for my purposes.  It basically turns all <ENTER> key        *
 * presses within an <input> checkbox, radio button, or text field into    *
 * <TAB> key presses (which moves the focus to the next <input>).          *
 * Note that this is only useful for MS Internet Explorer.                 *
 ***************************************************************************/
function frmRequest_KeyDown( e )
{
  var numCharCode;
  var elTarget;
  var strType;

  // Get event if not passed
  if (!e) var e = window.event;

  // Get character code of key pressed
  if (e.keyCode) numCharCode = e.keyCode;
  else if (e.which) numCharCode = e.which; 

  // Get target
  if (e.target) elTarget = e.target;
  else if (e.srcElement) elTarget = e.srcElement;
  
  if (elTarget.tagName.toLowerCase() == 'input')
    { // Is this a form input field?
      // And if so, what type of input?
      strType = elTarget.getAttribute('type').toLowerCase();

      switch ( strType )
        { // Only care about checkboxes, radio buttons, and text inputs
           case 'checkbox' :
           case 'radio' :
           case 'text' :
             if ( numCharCode == 13 )
               { // If this is a return - change it to a tab
                 if (e.keyCode) e.keyCode = 9;
                 else if (e.which) e.which = 9;
               }
             break;
        }
    }

  return true;  // process default action
}