<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">

var requiredFields = new Array()
requiredFields[0] = "loginName"
requiredFields[1] = "loginPass"
requiredFields[2] = "loginPassCon"
requiredFields[3] = "name"
requiredFields[4] = "email"

//var goodPassA = //
//var goodPassB = //


function validate_required(field,alerttxt)
{
    with (field)
    {
        if (value==null||value=="")
        {
              alert(alerttxt);
              return false
        }
  
        else {return true}
    }
}

function validate_form(thisform)
{
    with (thisform)
    {
        var fields=document.getElementById(thisform.id);
        
        for (var i=0; i<fields.length; i++)
          {
              for (var j=0; j<requiredFields.length; j++)
              {
                
              if (fields.elements[i].name == requiredFields[j])
              {
                  if (validate_required(fields.elements[i],"Required Field Blank!")==false)
                {
                    fields.elements[i].focus();
                    return false
                }
                
                if (fields.elements[i].name == "loginName" || fields.elements[i].name == "loginPass" || fields.elements[i].name == "loginPassCon")
                {
                    if (fields.elements[i].value.length < 5)
                    {
                        alert("Login and Password MUST be More Than 5 Characters");
                        fields.elements[i].focus();
                        return false
                    }
                    
                    if (fields.elements[i].name == "loginPass" || fields.elements[i].name == "loginPassCon")
                    {
                        
                        if(!((fields.elements[i].value.match(/[a-zA-Z]+/)) && (fields.elements[i].value.match(/[^a-zA-Z]+/))))
                        {
                        
                            if(!((fields.elements[i].value.match(/[a-z]+/)) && (fields.elements[i].value.match(/[A-Z]+/))))
                            {
                                alert("Password MUST have both under and lowercase characters or letter and non-letter characters!");
                                fields.elements[i].focus();
                                return false
                            }
                        
                        }
                        
                    }    
                        
                }
              }
                
            }  
          }
    }
}
</script>
<style type="text/css">
<!--


body {
    background-image: url();
    background-color: #000000;
    background-repeat: no-repeat;
    background-position:center;    
}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
<script src="SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAccordion.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style2 {
    font-size: 18px
}
.style3 {font-size: 24px}
.style4 {
    font-size: 14px
}
.style5 {
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
}
    
.style6 {color: #FF0000}
.style7 {font-size: 9px}    
    
-->
</style>
<link href="myLadderCSS.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style11 {font-size: 12px}
.style12 {
    color: #FFFFFF;
    font-weight: bold;
}
.style13 {color: #FFFFFF}
-->
</style>
</head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="../pics/BWfade.jpg" alt="top curve" width="100%" height="20"></td>
  </tr>
  <tr>
    <td bgcolor="#DCDCDC"><div align="center" class="style5">Nate's Ladder Page</div></td>
  </tr>
  <tr>
    <td><img src="../pics/BWfadeLow.jpg" alt="bottom curve" width="100%" height="20"></td>
  </tr>
</table>
<p align="center" class="style12"><a href="phps/directory.php" class="style13">Source Dir.</a></p>
<table width="500" height="0%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="../pics/white_curve.jpg" alt="top curve" width="500" height="10"></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF"><div align="center" class="style1">
      <div id="Accordion1" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab style2">
            <div align="center">Login</div>
          </div>
          
          <div class="AccordionPanelContent style3">
          
            <img src="pics/my logo.jpg" width="200">
            
            <?php 
            $error = $_POST["loginError"];
            echo "<p class='error'>$error<p>";
            ?>
            
            
            <form id="logInForm" method="post" action="checkPass.php" onSubmit="return validate_form(this)">
            <div align="center">
              <table width="253" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="109" nowrap="nowrap"><div align="left"><span class="style2">Login Name</span></div></td>
                    <td width="144"><span class="AccordionPanelContent style2">
                      <input type="text" name="loginName" id="loginName">
                    </span></td>
                  </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td nowrap="nowrap"><span class="style2">Password</span></td>
                  <td><input type="password" name="loginPass" id="loginPass"></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td colspan="2"><div align="center">
                    <input type="submit" name="submitLogin" id="submitLogin" value="Login">
                  </div></td>
                  </tr>
              </table>
            </div>
            <label></label>
            <span class="AccordionPanelContent style2">
            <label></label>
          <label></label>
          </span>
          <label></label>
          <label></label>
                        </form>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab style2">
            <div align="center">Sign Up</div>
          </div>
          <div class="AccordionPanelContent">
            <p>&nbsp;</p>
            <form id="joinForm" method="post" action="http://cs.georgefox.edu/~ngeorgeson/ladder/test.php" onSubmit="return validate_form(this)">
          <table width="298" height="177" border="0" cellpadding="1" cellspacing="0">
            <tr>
              <td><div align="left">Name<span class="style6">*</span></div></td>
              <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr>
              <td><label>
                <div align="left">Email <span class="style6">*</span>
                    </label>
                </div>                </td>
              <td><input type="text" name="email" id="email"></td>
            </tr>
            <tr>
              <td><label>
                <div align="left">Phone </div>
                  </label>                </td>
              <td><input type="text" name="phone" id="phone"></td>
            </tr>
            <tr>
              <td><div align="left"></div></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><label> 
              <div align="left"><em><strong>Username</strong></em><span class="style6">* <br>
              </span><span class="style7">(5 or more characters)</span></div>
              </label></td>
              <td><input type="text" name="loginName" id="loginName"></td>
            </tr>
            <tr>
              <td><label>
              <div align="left"><em><strong>Password</strong></em><span class="style6">*</span><br>
                <span class="style7">(5 or more characters + must contain both upper and lower case OR letters and symols)</span></div>
              </label></td>
              <td><input type="password" name="loginPass" id="loginPass"></td>
            </tr>
            <tr>
              <td><label>
              <div align="left"><em><strong>Confirm Password</strong></em><span class="style6">*</span></div>
              </label></td>
              <td><input type="password" name="loginPassCon" id="loginPassCon"></td>
            </tr>
            <tr>
              <td><div align="left"></div></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><div align="left"><span class="style6"><em>* = required</em></span></div></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2"><div align="center"><span class="style6"></span>
                  <input type="submit" name="submitJoin" id="submitJoin" value="Join">
              </div></td>
              </tr>
          </table>
          <label></label>
          <label></label>
          <p>
            <label></label>
            </p>
          <label></label>
          <label></label>
          <p></p>
          </label>
          </form>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab style2">
            <div align="center">About This Site</div>
          </div>
          <div class="AccordionPanelContent"><br>
            <table width="95%" border="0" cellpadding="0" cellspacing="0">
              
              <tr>
                <td><p align="left" class="style4"><strong>What is this?</strong></p>
                  <p align="left" class="style4">This is a one vs one RTS game ladder and community.</p>
                  <p align="left" class="style4"><strong>Who can Join?</strong></p>
                  <p align="left" class="style4">Everyone and their mom can join! Except you...</p>
                  <p align="left" class="style4"><strong>What can I do with This?</strong></p>
                  <p align="left" class="style4"> Users will: </p>
                  <div align="left">
                    <ul>
                      <li class="style11">Use a standard web-browser to access the ladder</li>
                      <li class="style11">Be able to sign up and/or leave the ladder at any time</li>
                      <li class="style11">Use encrypted passwords to access the system</li>
                      <li class="style11">View ladder information including, but not limited to current     standings, recent match results, overall statistics such as win/loss     percentage, etc.</li>
                      <li class="style11">Enter the results of scheduled matches played against others</li>
                      <li class="style11">Issue challenges to other players</li>
                      <li class="style11">Respond to challenges from other players</li>
                    </ul>
                </div></td>
              </tr>
            </table>
          </div>
      </div>
    </div></td>
  </tr>
  <tr>
    <td><img src="../pics/white_curve_bottom.jpg" alt="bottom curve" width="500" height="10"></td>
  </tr>
</table>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
  </script>
</body>
</html>