<?php

?>
<html>
<head>
<title>shakeitmama.com</title>
<link href="website.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="facebox/facebox.js"></script>
<script language="javascript">
$(document).ready(function() {
    $('a[rel*=facebox]').facebox();
})
</script>
<style>
.styled-select select {
   background: transparent;
   width: 100px;
   padding: 3px;
   font-size: 12px;
   border: 1px solid #ccc;
   height: auto;
}
.styled-select1 select {
   background: transparent;
   width: 60px;
   padding: 3px;
   font-size: 12px;
   border: 1px solid #ccc;
   height: auto;
}
.styled-select2 select {
   background: transparent;
   width: 70px;
   padding: 3px;
   font-size: 12px;
   border: 1px solid #ccc;
   height: auto;
}
.styled-select3 select {
   background: transparent;
   width: 75px;
   padding: 3px;
   font-size: 12px;
   border: 1px solid #ccc;
   height: auto;
}
.styled-select4 select {
   background: transparent;
   width: 158px;
   padding: 3px;
   font-size: 12px;
   border: 1px solid #ccc;
   height: auto;
}
</style>
</head>
<body>

<h2>Register with shakeitmama</h2>
<p>Just complete this simple form, It take less than a minute.</p>
<table border=0 width=950>
<tr>
	<td>
<form action="signUping.php" method="POST">
<table cellpadding=8 border=0>
<tr>
	<td>First Name :</td>
	<td><input type="text" name="fname" /></td>
	<td>Last Name :</td>
	<td><input type="text" name="lname"></td>
	</tr>
<tr>
	<td>Gender :</td>
	<td><div class="styled-select">
		<select name="gender" style="width:160"onchange="vali(this.name,this.value)">
			<option>Select Gender :</option>
			<option value="male">Male</option>
			<option value="female">Female</option>
		</select>
		</div>
		</td>
	</tr>
<tr>
	<td>Date of Birth :</td>
	<td><table cellspacing=0>
			<tr><td>
			<div class="styled-select1">
			<select name="day">
			<option >Day</option>
			<?php
			for($i=1;$i<32;$i++){
					echo "<option value='$i'>$i</option>";
			}
			
			?>
			</select>
			</div>
			</td><td>
			<div class="styled-select2">
			<select name="month">
				<option >Month</option>
			<?php
			for($i=1;$i<13;$i++){
				echo "<option value=$i>$i</option>";	
			}
			?>
			</select>
			</div>
			</td><td>
			<div class="styled-select3">
			<select name="year">
			<option >Year</option>
			<?php
			for($i=1905;$i<2012;$i++){
				echo "<option value=$i>$i</option>";
			}
			?>
			</select>
			</div>
			<div id="pass1field"></div>
			</td></tr>
			</table>
		</td>
	</tr>
<tr>
	<td>Street Address :</td>
	<td colspan=3><input type="text" name="address" style="width:418" onchange="vali(this.name,this.value)"/></td>
	</tr>
<tr>
	<td>ZIP / Postal code :</td>
	<td><input type="text" name="postcode" /></td>
	<td>City / State :</td>
	<td><input type="text" name="state" /></td>
	</tr>
<tr>
	<td>Country / Region :</td>
	<td><div class="styled-select4">
	<select name="country"><?php include("country.php")?>
	</select>
	</div>
	</td>
	</tr>
<tr>
	<td>Email :</td>
	<td><input type="text" name="email" /></td>
	</tr>
<tr>
	<td>Retype Email :</td>
	<td><input type="text" name="email2" /></td>
	</tr>
<tr>
	<td>Phone Number :</td>
	<td><input type="text" name="phoneNo" /></td>
	</tr>
</table>
<h3>Create your userID</h3>
<table cellpadding=8 border=0>
<tr>
	<td>User ID :</td>
	<td><input type="text" name="userID" style="width:260" onblur="vali(this.name,this.value)"/>
		<div id="userIDfield"></div></td>
	</tr>
<tr>
	<td>Create your Password :</td>
	<td><input type="password" name="password" /></td>
	</tr>
<tr>
	<td>Re-enter Your Password :</td>
	<td><input type="password" name="password2" /></td>
	</tr>
</table>
<b>By clicking "Submit" i agree that :</b>
<ul>
	<li>I have read and accepted the <a href="">User Agreement</a> and <a href="">Privacy Policy</a>.</li>
	<li>I am at least 18 years old.</li>
	</ul>

<table width=150>
<tr>
	<td align=right>
	<input type="submit" value="Submit" style="background-color:#4f85bb;width:100;height:30;font-weight:bolder;color:#fff"/>
	</td>
	</tr>
</table>
</form>
</td>
<td valign=top align=right>
<table border=0 width=260 class="inner2" style="background-color:#EFEFEF">
<tr>
	<td height=100 valign=middle align=center class="signIn"><b>Already member?<br/>Sign in now.</b></td>
	<td valign=middle align=center>
		<li class="signIn"><div id="signIn"><a href="login.php" id="head" rel="facebox" ><b>Sign in</b></a></div></li>
			</td>
	</tr>

</table>
</td>
</tr>
</table>
<br/>
<script type="text/javascript">
function vali(name,value){
	if(value.length==0){
		document.getElementById(name+"field").innerHTML ="*Please fill in";
		myObj=document.getElementById(name+"field");
		myObj.style.color = "red";		
		return;
	}
	if(name=="userID"){
		
		if(value.length<7){
			document.getElementById(name+"field").innerHTML = "*User ID should longer than 6 character";
			myObj=document.getElementById(name+"field");
			myObj.style.color = "red";
			return
		}
	}
	
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(name+'field').innerHTML=xmlhttp.responseText;
	myObj=document.getElementById(name+"field");
	
	if(xmlhttp.responseText=="OK"){
		myObj.style.color = "green";
	}else{
		myObj.style.color = "red";
	}
    }
  }
  
xmlhttp.open('GET','valiSignUp.php?name='+name+'&value='+value,true);

xmlhttp.send();
}

</script>

</body>
</html>