//----------------------------------------------------------------------
//- Display the WHARFF Registration Form
//----------------------------------------------------------------------

//----------------------------------------------------------------------
//- Builds on tbaFormFunctions.js
//----------------------------------------------------------------------

  //--------------------------------------------------------------------
  //- tbaDefineStyles: Create the CSS tags
  //--------------------------------------------------------------------
  function tbaDefineStyles()
  {
    tbaWrite.writeln('<style type="text/css">');
    tbaWrite.writeln('<!--');
    tbaWrite.writeln(' .tbaHeaderClosed {color:#000000; background-color:#ff9999; padding:5px;}');
    tbaWrite.writeln(' .tbaHeaderOpen   {color:#000000; background-color:#ffff99; padding:5px;}');
    tbaWrite.writeln(' .tbaHilight      {color:black;   background-color:#ffff99;}');
    tbaWrite.writeln(' .tbaEvent        {color:#3399ff; font-size:large; line-height:125%;}');
    tbaWrite.writeln(' .tbaPrompt       {color:black;   font-size:x-small;}');
    tbaWrite.writeln(' .tbaPop          {color:#b8b8b8; font-size:x-small; text-align:right;}');
    tbaWrite.writeln('-->');
    tbaWrite.writeln('</style>');
  }

//   var wharffEvents = createWharffEvents();

//   tbaDisplayForm("http://www.bethami.net/cgi-bin/wharffRegistration.cgi", wharffEvents);

//----------------------------------------------------------------------
//- Functions overridden from tbaFormFunctions.js
//----------------------------------------------------------------------

  function tbaExitFormSetup(eventCollection, formAction)
  {
   tbaWrite.writeln("<div class='wharffHeader'>");
// tbaWrite.write  (" style='background-image: url(http://www.bethami.org/_storage/Pages/1455/HeaderImageFaded.jpg);");
// tbaWrite.writeln(" background-position: center; background-repeat: repeat-y;'>");
  }

  function tbaFormHeader(formAction)
  {
   //- Create the HTML form header.
   tbaWrite.writeln('<form method="POST"');
   tbaWrite.writeln('      id="tbaForm"');
   tbaWrite.writeln('      name="tbaForm"');
   tbaWrite.writeln('      action="'+formAction+'"');
   tbaWrite.writeln('      accept-charset="utf-8"');
   tbaWrite.writeln('      onsubmit="return tbaValidateForm(tbaFormEvents);">');
// tbaWrite.writeln("<table border='0' cellspacing='4' cellpadding='10'>");
   tbaWrite.writeln("<table border='0' cellspacing='0' cellpadding='0'>");
   tbaWrite.writeln(" <tr>");
   tbaWrite.writeln("  <td align='right'>");
   tbaWrite.writeln("   <b>Name:</b>");
   tbaWrite.writeln("  </td>");
   tbaWrite.writeln("  <td>");
   tbaWrite.writeln("   <input type='text' id='wharffName'  name='name' size='60'>");
   tbaWrite.writeln("  </td>");
   tbaWrite.writeln("  <td align='right'>");
   tbaWrite.writeln("   <b>Phone:</b>");
   tbaWrite.writeln("  </td>");
   tbaWrite.writeln("  <td>");
   tbaWrite.writeln("   <input type='text' id='wharffPhone' name='phone' size='20'>");
   tbaWrite.writeln("  </td>");
   tbaWrite.writeln(" </tr>");
   tbaWrite.writeln(" <tr>");
   tbaWrite.writeln("  <td align='right'>");
   tbaWrite.writeln("   <b>Email:</b>");
   tbaWrite.writeln("  </td>");
   tbaWrite.writeln("  <td colspan='3'>");
   tbaWrite.writeln("   <input type='text' id='wharffEmail' name='email' size='60'>");
   tbaWrite.writeln("  </td>");
   tbaWrite.writeln(" </tr>");
   tbaWrite.writeln("</table>");
   tbaWrite.writeln("<input type='hidden' name='action' value='wharffRegister'>");
  }

  function tbaExitFormPostSetup(eventCollection, formAction)
  {
   tbaWrite.writeln("</div>");
  }

  //--------------------------------------------------------------------
  //- tbaDisplayButtons: Show the Submit and the Reset buttons.
  //--------------------------------------------------------------------
  function tbaDisplayButtons()
  {
   tbaWrite.writeln(' <p></p>');
   tbaWrite.writeln(' <table width="100%" border="0">');
   tbaWrite.writeln(' <tr valign="top">');
   tbaWrite.writeln('  <td>');
   tbaWrite.writeln('   <input type="submit"');
   tbaWrite.writeln('          value="Register">');
   tbaWrite.writeln('  </td>');
   tbaWrite.writeln('  <td>');
   tbaWrite.writeln('   <input type="reset"');
   tbaWrite.writeln('          value="Clear Form"');
   tbaWrite.writeln('          onclick="return tbaResetForm(this);"');
   tbaWrite.writeln('          style="vertical-align:top;margin-left:20px;" />');
   tbaWrite.writeln('  </td>');
   tbaWrite.writeln('  <td align="right" width="100%" style="font-size:12pt;">');
   tbaWrite.writeln('   <a href="http://www.bethami.org/wharff/">Return to WHARFF</a>');
   tbaWrite.writeln('  </td>');
   tbaWrite.writeln(' </tr>');
   tbaWrite.writeln(' </table>');
   tbaWrite.writeln(' <p></p>');
  }

  //--------------------------------------------------------------------
  //- tbaDisplayEvent: Have each event display itself.
  //--------------------------------------------------------------------
  function tbaDisplayEvent(event)
  {
   if (!event)
    return;

   if (event.display)
    event.display();
  }

  //--------------------------------------------------------------------
  //- tbaValidateForm: Make sure at least ONE event has been selected,
  //- Name, Email, and Phone have been entered, and user had confirmed
  //- the event registration choices.
  //--------------------------------------------------------------------
  function tbaValidateForm(events)
  {
    var formEvents = document.getElementsByName("event");
    var formName   = tbaTrim(document.getElementById("wharffName" ).value);
    var formEmail  = tbaTrim(document.getElementById("wharffEmail").value);
    var formPhone  = tbaTrim(document.getElementById("wharffPhone").value);
    var choices    = "";
    var data       = [];
    var err        = "";

    // I stole these ... I did NOT write them myself!
    var emailValid = new RegExp("[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}", "i");
    var phoneValid = new RegExp("^[\\(]{0,1}([0-9]){3}[\\)-]{0,1}[ ]?([^0-1]){1}([0-9]){2}[ ]?[-]?[ ]?([0-9]){4}[ ]*((x){0,1}([0-9]){1,5}){0,1}$");

    if (formName.length < 5)
     err += "- Your name is missing.\n";

    if (formEmail.length < 7)
     err += "- Your email address is missing or invalid.\n";
    else
    {
     if (!emailValid.test(formEmail))
      err += "- Your email address is not valid.\n";
    }

    if (formPhone.length < 10)
     err += "- Your phone number is missing or less than 10-digits.\n";
    else
    {
     if (!phoneValid.test(formPhone))
      err += "- Your phone number is not valid.\n";
    }

    for (var i = 0; i<tbaFormEvents.events.length; i++)
    {
     var anEvent   = tbaFormEvents.events[i];
     var formEvent = document.getElementById(anEvent.id);

     if (!formEvent || !formEvent.checked)
      continue;

     choices = choices + anEvent.description + "\n";

     data.push(anEvent);

    }

    if (choices.length == 0)
     err += "- You have not registered for any events.\n";

    if (err.length > 0)
    {
      alert("Please correct the following errors and retry:\n\n"+err);
      return false;
    }

    var msg = "Please confirm the following information "
            + "and press 'OK' to complete your registration:\n\n"
            + "Name : " + formName  + "\n"
            + "Email: " + formEmail + "\n"
            + "Phone: " + formPhone + "\n"
            + "\nYou have selected the following events:\n\n"
            + choices
            ;

    if (!confirm(msg))
     return false;

    // Create the output records here
    var span = document.getElementById('GoogleFields');

    if (!span)
     return alert("*** CANNOT CREATE REGISTRATION DATA***\nPlease contact WHARFF!");

    span.innerHTML = '';

    for (d in data)
    {
      var anEvent = data[d];
      var field   = document.createElement('input');
      field.type  = 'hidden';
      field.id    = anEvent.id;
      field.name  = 'registration';
      field.value = anEvent.id+"|"+anEvent.subgroup+"|"+anEvent.description;

      span.appendChild(field);
    }

    return true;
  }

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

  function tbaResetForm(control)
  {
    return true;
  }


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

   function wharffDisplayEventTable(eventList)
   {
     eventList    = eventList ? eventList : createWharffEvents();
     wharffEvents = eventList;
     var columns  = eventList.getTracks();
     var i,r,c;

     // Display The Headers

     document.writeln('<tr>');
     document.writeln(' <td>&nbsp;');
     document.writeln('  <input type="hidden" name="scriptName"');
     document.writeln('         value="'+wharffEvents.script+'">');
     document.writeln(' </td>');

     for (i=0; i<columns.length ;i++)
     {
       var e = wharffEvents.getEventAt(1, i+1);

       document.writeln('<td valign="bottom" align="center" class="'+e.style+'">');
       document.writeln(' <span class="wharffFontMedium"><b>'+columns[i]+'</b></span>');
       document.writeln('</td>');
     }

     document.writeln('</tr>');

     // Display the Events
    var rows = wharffEvents.rows();
    var cols = wharffEvents.columns();

    for (r=1; r<rows; r++)
    {
     // Create the box that expands to show Bios and Descriptions
     document.writeln('<tr>');
     document.writeln(' <td></td>');
     document.writeln(' <td colspan='+(cols-1)+' id="wharffText'+r+'" ');
     document.writeln('     class="wharffBorder wharffFontPopup" style="display:none">');
     document.writeln('  <input type="hidden" id="wharffText'+r+'_id" value="">');
     document.writeln('  <div style="text-align:right">');
     document.writeln('   <font size=1>Close</font> <a href="javascript:wharffHideText(\'wharffText'+r+'\');"');
     document.writeln('    title="Close the Information Window">[X]</a>');
     document.writeln('  </div>');
     document.writeln('  <div id="wharffText'+r+'_text">');
     document.writeln('  </div>');
     document.writeln(' </td>');
     document.writeln('</tr>');
     document.writeln('<tr>');

     for (c=1; c<cols; c++)
     {
       var e = wharffEvents.getEventAt(r, c);

       if (c == 1)
       {
        document.writeln('<td valign="middle" class="wharffColumn0">');
        document.writeln(' <span class="wharffFontTime">'+e.time+'</span>');
        document.writeln('</td>');
       }

       if (!e)
       {
        document.writeln('<td>&nbsp;</td>');
        continue;
       }

       if (!e.taken)
        e.taken = 0;

       var id = 'reg_'+e.id;

       document.writeln('<td valign="top" align="center" class="'+e.style+'">');

       document.writeln(' <input type="hidden" name="eventId"        value="'+e.id+'">'       );
       document.writeln(' <input type="hidden" name="eventName"      value="'+e.eventName+'">');
       document.writeln(' <input type="hidden" name="eventTrack"     value="'+e.track+'">'    );
       document.writeln(' <input type="hidden" name="eventTime"      value="'+e.time+'">'     );
       document.writeln(' <input type="hidden" name="eventPresenter" value="'+e.presenter+'">');
       document.writeln(' <input type="hidden" name="eventTaken"     value="'+e.taken+'">'    );
       document.writeln(' <input type="hidden" name="eventRegister"  id="'+id+'" value="0">');

       if (e.isAvailable())
        document.writeln(' <input type="checkbox" onclick="wharffClick(\''+id+'\')">');
       else
        document.writeln(' [FULL]');
//      document.writeln(' [FULL]<input type="hidden" name="eventRegister" value="0">');

       var eventName = '<span class="wharffFontMedium">'+e.eventName+'</span>';
       var person    = '<span class="wharffFontSmall">'+e.presenter+'</span>';

       if (e.bio)
       {
        person  = '<a href="javascript:wharffShowText(\'wharffText'+r+'\',';
        person += 'wharffEvents.getEventAt('+r+','+c+').bio,';
        person += '\''+e.id+'-bio\');" ';
        person += 'title="Information about '+e.presenter+'" ';
        person += '><span class="wharffFontSmall">'+e.presenter+'</span></a>';
       }

       if (e.description)
       {
        eventName  = '<a href="javascript:wharffShowText(\'wharffText'+r+'\',';
        eventName += 'wharffEvents.getEventAt('+r+','+c+').description,';
        eventName += '\''+e.id+'-desc\');" ';
        eventName += 'title="Information about '+e.eventName+'" ';
        eventName += '><span class="wharffFontMedium">'+e.eventName+'</span></a>';
       }

       document.writeln(' <br>'+eventName);
       document.writeln(' <br>'+person);
       document.writeln('</td>');
     }

     document.writeln('</tr>');
    }
   }

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

  function wharffClick(id)
  {
    var field = document.getElementById(id);

//  alert("WharffRegister: id = "+id+" value = "+field.value);

    field.value = (field.value == '1') ? '0' : '1';
  }

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

  function wharffTrim(str)
  {
   return !str ? '' : String(str).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
  }

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

  function wharffValidateForm (form)
  {
   var ids        = document.getElementsByName("eventId"       );
   var registered = document.getElementsByName("eventRegister" );
   var userNames  = document.getElementsByName("registerName"  );
   var userPhones = document.getElementsByName("registerPhone" );
   var userEmails = document.getElementsByName("registerEmail" );

   var msg        = '';
   var seminars   = [];
   var emailRegex = /[0-9a-zA-Z_.]+@[0-9a-zA-Z_.]+\.[0-9a-zA-Z_]/;
   var uName      = wharffTrim(userNames [0].value);
   var uPhone     = wharffTrim(userPhones[0].value);
   var uEmail     = wharffTrim(userEmails[0].value);


   for (var i=0; i<registered.length; i++)
   {
    if (registered[i].value == '1')
    {
     seminars.push(ids[i].value);
     any = true;
    }
   }

   if (seminars.length === 0)
    msg = msg + "- At least one event must be selected.\n";

   if (uName.length === 0)
    msg = msg + "- Please provide your name.\n";

   if (uPhone.length === 0)
    msg = msg + "- Please provide your phone number.\n";

   if (uEmail.length === 0)
    msg = msg + "- Please provide your email address.\n";
   else
   {
    if (!emailRegex.test(uEmail))
     msg = msg + "- Please provide a valid email address.\n";
   }

   if (msg.length > 0)
   {
     alert("The following errors have been found:\n\n"+msg);
     return false;
   }
   msg =       'Please review and confirm the following information:\n\n';
   msg = msg + '- Your Name: '+uName+'\n';
   msg = msg + '- Your Email: '+uEmail+'\n';
   msg = msg + '- Your Phone: '+uPhone+'\n';
   msg = msg + '\nYou wish to register for the following:\n\n';

   for (var n=0; n<seminars.length; n++)
   {
    var id    = seminars[n];
    var event = wharffEvents.getEventById(id);

    msg = msg + '- '+event.eventName+' ('+event.time+')\n';
   }

   msg = msg + '\nIf the information is correct, press "Ok" to complete registration. ';
   msg = msg + 'To change any information or cancel registration, press "Cancel"\n';

   if (confirm(msg))
   {
//  form.submit();
    return true;
   }

   return false;
  }

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

 function wharffShowText(id, text, token)
 {
  var field = document.getElementById(id);
  var area  = document.getElementById(id+"_text");
  var oldT  = document.getElementById(id+"_id");
  var v     = oldT.value;

  // token: r.c-text;

  var rx    = /\d+\.(\d+)-\w+/;
  var parse = rx.exec(token);
  var c     = "wharffColumn"+parse[1];

  if (v == token)
  {
   return wharffHideText(id);
  }

  text = '<table border="0" width="100%"><tr><td width="5%" class="'+c+'"></td>' +
         '<td>'+text+'</td><td width="5%" class="'+c+'"></td></tr></table>';

//field.className       = "wharffColumn"+c;
  field.style.textAlign = "left";
  field.style.display   = "";
  area.innerHTML        = text;
  oldT.value            = token;
 }

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

 function wharffHideText(id)
 {
  var field = document.getElementById(id);
  var area  = document.getElementById(id+"_text");
  var oldT  = document.getElementById(id+"_id");

  field.style.display = "none";
  area.innerHTML      = "";
  oldT.value          = "";
 }

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

 function wharffHelp(id)
 {
  var field = document.getElementById(id);
  var text  = document.getElementById(id+"_text");

  field.style.display = (field.style.display == "") ? "none" : "";
  text.innerHTML      = (text.innerHTML == "show" ) ? "hide" : "show";
 }

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