<script type="text/javascript">
// jQuery(document).ready(function() {jQuery('#avatarcarousel').jcarousel();});
jQuery(document).ready(function() {jQuery('#avatarcarousel').jcarousel({wrap: 'circular'});});
</script>

<h2>{SystemName}: {RegistrationText}</h2>
<div id="error_message" class="error">{ErrorMessage}</div>
<form id="region_form" action="{SubmitURL}" method="POST">
<table>
  <caption></caption>

  <thead>
    <tr>
      <th class="register_left"></th>
      <th class="register_right" colspan="3"></th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th class="register_left"></th>
      <th class="register_right" colspan="3"></th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td class="register_left"><p id="regname_label">{AvatarNameText}*</p></td>
      <td class="register_right" colspan="3"><input minlength="3" id="AvatarName" require="true" label="AvatarName" name="AvatarName" type="text" size="25" maxlength="30" value=""></td>
    </tr>
    <tr>
      <td class="register_left"><p id="password_label">{AvatarPasswordText}*</p></td>
      <td class="register_right" colspan="3"><input minlength="6" compare="AvatarPassword2" require="true" label="AvatarPassword" id="AvatarPassword" name="AvatarPassword" type="password" size="30" maxlength="15"></td>
    </tr>
    <tr>
      <td class="register_left"><p>{AvatarPasswordConfirmationText}*</p></td>
      <td class="register_right" colspan="3"><input minlength="6" require="true" label="AvatarPassword2" id="AvatarPassword2" name="AvatarPassword2" type="password" size="30" maxlength="15"></td>
    </tr>
{IsAdminAuthenticatedBegin}
<!-- Only admins can set scope IDs -->
    <tr>
      <td class="register_left"><p>{AvatarScopeText}*</p></td>
      <td class="register_right" colspan="3"><input minlength="6" require="true" label="AvatarScope" id="AvatarScope" name="AvatarScope" type="text" size="40" maxlength="15" value="00000000-0000-0000-0000-000000000000"></td>
    </tr>
{IsAdminAuthenticatedEnd}
    <tr>
      <td class="register_left"><p>{FirstNameText}</p></td>
      <td class="register_right" colspan="3"><input label="FirstName" id="FirstName" name="FirstName" type="text" size="25" maxlength="15" value=""></td>
    </tr>
    <tr>
      <td class="register_left"><p>{LastNameText}</p></td>
      <td class="register_right" colspan="3"><input label="LastName" id="LastName" name="LastName" type="text" size="25" maxlength="15" value=""></td>
    </tr>
    <tr>
      <td class="register_left"><p>{UserAddressText}</p></td>
      <td class="register_right" colspan="3"><input label="UserAddress" id="UserAddress" name="UserAddress" type="text" size="50" maxlength="50" value=""></td>
    </tr>
    <tr>
      <td class="register_left"><p>{UserZipText}</p></td>
      <td class="register_right" colspan="3"><input label="UserZip" id="UserZip" name="UserZip" type="text" size="25" maxlength="15" value=""></td>
    </tr>
    <tr>
      <td class="register_left"><p>{UserCityText}</p></td>
      <td class="register_right" colspan="3"><input label="UserCity" id="UserCity" name="UserCity" type="text" size="25" maxlength="15" value=""></td>
    </tr>
    <tr>
      <td class="register_left"><p>{UserDOBText}</p></td>
      <td class="register_right">
	    <select id="UserDOBMonth" require="true" name='UserDOBMonth'>
{MonthsArrayBegin}
		  <option value="{Value}">{Value}</option>
{MonthsArrayEnd}
		</select>
	  </td>
      <td class="register_right">
		<select id="UserDOBDay" require="true" name='UserDOBDay'>
{DaysArrayBegin}
		  <option value="{Value}">{Value}</option>
{DaysArrayEnd}
		</select>
	  </td>
      <td class="register_right">
		<select id="UserDOBYear" require="true" name='UserDOBYear'>
{YearsArrayBegin}
		  <option value="{Value}">{Value}</option>
{YearsArrayEnd}
		</select>
	  </td>
    </tr>
    <tr>
      <td class="register_left"><p>{UserEmailText}</p></td>
      <td class="register_right" colspan="3"><input label="UserEmail" id="UserEmail" name="UserEmail" type="text" size="40" maxlength="40" value=""></td>
    </tr>
    <tr>
      <td class="register_left" colspan="4" valign="top">
      <!--
      {AvatarArchiveArrayBegin}
	      <div class="avatar_archive_screenshot">
	        <label for="{AvatarArchiveName}">{AvatarArchiveName}</label>
		    <input type="radio" id="{AvatarArchiveName}" name="AvatarArchive" value="{AvatarArchiveName}">
		    <img src="{AvatarArchiveSnapshotURL}" />
	      </div>
      {AvatarArchiveArrayEnd}
      -->
      <center>
      <ul id="avatarcarousel" class="jcarousel-skin-aurora">
{AvatarArchiveArrayBegin}
	    <li>
		  <div class="avatar_archive_screenshot">
		    <label for="{AvatarArchiveName}" alt="{SystemName}: {AvatarArchiveName}" title="{SystemName}: {AvatarArchiveName}">{AvatarArchiveName}</label>
			<input type="radio" id="{AvatarArchiveName}" name="AvatarArchive" value="{AvatarArchiveName}" alt="{SystemName}: {AvatarArchiveName}" title="{SystemName}: {AvatarArchiveName}">
			<img src="{AvatarArchiveSnapshotURL}" alt="{SystemName}: {AvatarArchiveName}" title="{SystemName}: {AvatarArchiveName}" />
		  </div>
	    </li>
{AvatarArchiveArrayEnd}
      </ul>
      </center>
	  </td>
    </tr>
    <tr>
      <td class="register_left"><p>{TermsOfServiceText}</p></td>
      <td class="register_right" colspan="3"><textarea name="TosText" cols="90" rows="10" id="TosText">{ToSMessage}</textarea></td>
    </tr>
    <tr>
      <td class="register_left"><p>{TermsOfServiceAccept}</p></td>
      <td class="register_right" colspan="3"><input class="checkbox" id="checkbox" type="checkbox" name="ToSAccept" value="Accepted" /><label for="checkbox">{Accept}</label></td>
    </tr>
    <tr>
	  <td class="register_left"></td><input hidden type="hidden" label="Submit" id="Submit" name="Submit" value="Submit" />
      <td class="register_right" colspan="3"><input type="hidden" name="action" value="check"><button id="Submit" name="Submit" type="Submit">{Submit}</button></input></td>
    </tr>
  </tbody>
</table>
</form>
<script>
  /* attach a submit handler to the form */
  $("#region_form").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault();
    /* get some values from elements on the page: */
    var $form = $( this ),
        url = $form.attr( 'action' );
    /* Send the data using post and put the results in a div */
    $.post( url, $form.serialize(),
      function( data ) {
		$("#error_message").empty().append(data);
      }
    );
  });
</script>