<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Check Out Order</title>
<link href="../Content/CommonStyle.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.9.0.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../Scripts/ViewsJS/Checkout.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validationEngine.js" type="text/javascript"></script>
<link href="../Content/template.css" rel="stylesheet" type="text/css" />
<link href="../Content/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divMain">
<div id="divMenu" style="background-color: Gray; width: 100%; color:White; margin-bottom:10px;">
<table id="tblLogin">
<tr>
<td>
Customer ID :
</td>
<td>
<input type="text" id="txtUserID" />
</td>
<td>
Password :
</td>
<td>
<input type="password" id="pwdPassword" />
</td>
<td>
<a href="#" class="Login" title="Sign in">Login</a>
</td>
<td>
Not a customer <a href="#" title="Register for a new account" onclick="RegisterNewCustomer();">Register</a> here
</td>
</tr>
</table>
<table id="tblLogout" style="display: none;">
<tr>
<td>
!!! Welcome
</td>
<td>
<label id="lblName" />
</td>
<td>
!!!
</td>
<td>
<a href="Products.htm" title="Logout" onclick="ClearForm();">Logout</a>
</td>
</tr>
</table>
</div>
<form method="post" id="customerInformation" style="display: none">
<fieldset>
<legend>Customer Information :</legend>
<table style="width: 100%;">
<tr>
<td style="width: 15%;">
Customer ID
</td>
<td style="width: 15%;">
<input id="txtCustomerID" type="text" readonly="readonly" name="CustomerID" value="0" />
</td>
<td style="width: 15%;">
Password
</td>
<td style="width: 15%;">
<input id="txtPassword" class="validate[required,maxSize[50]] text-input" type="password" name="Password" />
</td>
<td style="width: 15%;">
Confirm Password
</td>
<td style="width: 15%;">
<input id="txtConfirmPassword" class="validate[required,equals[txtPassword],maxSize[50]] text-input" type="password" name="ConfirmPassword" />
</td>
</tr>
<tr>
<td>
Title
</td>
<td>
<input id="txtTitle" class="validate[optional,maxSize[8]] text-input" type="text" name="Title" />
</td>
<td>
Suffix
</td>
<td>
<input id="txtSuffix" class="validate[optional,maxSize[10]] text-input" type="text" name="Suffix" />
</td>
</tr>
<tr>
<td>
First Name
</td>
<td>
<input id="txtFirstName" class="validate[required,maxSize[50]] text-input" type="text" name="FirstName" />
</td>
<td>
Middle Name
</td>
<td>
<input id="txtMiddleName" class="validate[optional,maxSize[50]] text-input" type="text" name="MiddleName" />
</td>
<td>
Last Name
</td>
<td>
<input id="txtLastName" class="validate[required,maxSize[50]] text-input" type="text" name="LastName" />
</td>
</tr>
<tr>
<td>
Phone
</td>
<td>
<input id="txtPhone" class="validate[optional,maxSize[25]] text-input" type="text" name="Phone" />
</td>
<td>
Company Name
</td>
<td>
<input id="txtCompanyName" class="validate[optional,maxSize[128]] text-input" type="text" name="CompanyName" />
</td>
<td>
Email Address
</td>
<td>
<input id="txtEmailAddress" class="validate[optional,maxSize[50]] text-input" type="text" name="EmailAddress" />
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Billing Address :</legend>
<table style="width: 100%;">
<tr>
<td style="width: 15%;">
Address Line1
</td>
<td style="width: 15%;">
<input id="txtBAddressLine1" class="validate[required,maxSize[60]] text-input" type="text" name="BillingAddressLine1" />
</td>
<td style="width: 15%;">
Address Line2
</td>
<td style="width: 15%;">
<input id="txtBAddressLine2" class="validate[optional,maxSize[60]] text-input" type="text" name="BillingAddressLine2" />
</td>
<td style="width: 15%;">
City
</td>
<td style="width: 15%;">
<input id="txtBCity" class="validate[required,maxSize[30]] text-input" type="text" name="BillingCity" />
</td>
</tr>
<tr>
<td>
State Province
</td>
<td>
<input id="txtBStateProvince" class="validate[required,maxSize[50]] text-input" type="text" name="BillingStateProvince" />
</td>
<td>
Country Region
</td>
<td>
<input id="txtBCountryRegion" class="validate[required,maxSize[50]] text-input" type="text" name="BillingCountryRegion" />
</td>
<td>
Postal Code
</td>
<td>
<input id="txtBPostalCode" class="validate[required,maxSize[15]] text-input" type="text" name="BillingPostalCode" />
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Shipping Address :</legend>
<table style="width: 100%;">
<tr>
<td style="width: 15%;">
Address Line1
</td>
<td style="width: 15%;">
<input id="txtSAddressLine1" class="validate[required,maxSize[60]] text-input" type="text" name="ShippingAddressLine1" />
</td>
<td style="width: 15%;">
Address Line2
</td>
<td style="width: 15%;">
<input id="txtSAddressLine2" class="validate[optional,maxSize[60]] text-input" type="text" name="ShippingAddressLine2" />
</td>
<td style="width: 15%;">
City
</td>
<td style="width: 15%;">
<input id="txtSCity" class="validate[required,maxSize[30]] text-input" type="text" name="ShippingCity" />
</td>
</tr>
<tr>
<td>
State Province
</td>
<td>
<input id="txtSStateProvince" class="validate[required,maxSize[50]] text-input" type="text" name="ShippingStateProvince" />
</td>
<td>
Country Region
</td>
<td>
<input id="txtSCountryRegion" class="validate[required,maxSize[50]] text-input" type="text" name="ShippingCountryRegion" />
</td>
<td>
Postal Code
</td>
<td>
<input id="txtSPostalCode" class="validate[required,maxSize[15]] text-input" type="text" name="ShippingPostalCode" />
</td>
</tr>
</table>
</fieldset>
<input type="button" id="btnsubmitOrder" value="submit order" />
<input type="submit" id="btnRegister" value="Register" />
<input type="reset" id="btnReset" value="Reset" />
</form>
</div>
</body>
</html>