{include file="_header.tpl" meta_title="Checkout: Step One"}

{literal}
<script>
function checkForm(frm)
{
	if ( !requireField(frm.FirstName,'First Name is required') ) {return false;}
	if ( !requireField(frm.LastName,'Last Name is required') ) {return false;}
	if ( !requireField(frm.Address1,'Address 1 is required') ) {return false;}
	if ( !requireField(frm.City,'City is required') ) {return false;}
	if ( !requireField(frm.State,'State is required') ) {return false;}
	if ( !requireField(frm.Zip,'Zip is required') ) {return false;}
	if ( !requireField(frm.Phone1, 'Phone Number is required') ) {return false;}
	if ( !requireField(frm.Email,'Email is required') ) {return false;}

	return true;
}

function requireField(fld,msg)
{
	if (fld.value == '')
	{
		alert(msg);
		fld.focus();
		return false;
	}
	return true;
}

</script>
{/literal}

<table border="0" cellpadding="0" cellspacing="0" width="550">
                          <tr>
                            <td width="550"><img border="0" src="{$URL_SKIN}/images/box1.jpg" width="550" height="104"></td>
                          </tr>
                          <tr>
                            <td width="550"><img border="0" src="{$URL_SKIN}/images/line_cart.gif" width="550" height="23"></td>
                          </tr>
                          <tr>
                            <td width="550" background="{$URL_SKIN}/images/td_bg2.gif">
                              <table border="0" cellpadding="0" cellspacing="0" width="550">
                                <tr>
                                  <td><p>&nbsp;</p>

<p style="margin-left:10px" class="bold">Checkout: Step One<br />
&nbsp;</p>

<table style="margin-left:10px; margin-right: 5px" width="520">
<tr valign="top">

<td>

	<p class="bold">Existing customers:</p>
	<p>If you already have an account, please login to continue:</p>

	<form action="{$LOGIN_URL}" method="post">
	<input type="hidden" name="login" value="1" />
	<input type="hidden" name="redirect" value="calculate_shipping.php" />
	
	<table border="0" style="margin-right: 10px">
		<tr>
		<th align="right" class="lightbg">Email:</th>
		<td><input name="username" class="login" size="15"></td>
		</tr>
		<tr>
		<th align="right" class="lightbg">Password:</th>
		<td><input name="password" type="password" class="login" size="15"></td>
		</tr>
		<tr>
		<td colspan="2"><input type="submit" class="button" value="login..."  onmouseout="this.className='button';" onmouseover="this.className='button_hover';"></td>
		</tr>
	</table>
	
	<p><a href="forgotten_password.php">Forgot your password?</p>
	</form>

</td>

<td bgcolor="#f7f7f7" width="60%">
	<p class="bold">New Customers:</p>
	
	{if $error}<p class="error">{$error}</p>{/if}

	<p>If you have not previously shopped with us, please complete the
	following information to continue.  The address information you
	provide below should be your primary SHIPPING address.  (Your
	billing information will be requested later):<br />
	Note: fields marked with an asterisk (*) are required</p>
	
	<form action="create_account.php" method="post" onsubmit="return checkForm(this);">
	
	{* ### if this is updated, also update login.tpl ### *}
	
	<table border="0">
		<tr>
		<th align="right" class="lightbg">First, Last Name:</th>
		<td><input type="text" name="FirstName" size="10" value="{$profile->FirstName}">&nbsp;<input type="text" name="LastName" size="12" value="{$profile->LastName}">&nbsp;*</td>
		</tr>
		
		<tr>
		<th align="right" class="lightbg">Company:</th>
		<td><input type="text" name="Company" size="27" value="{$profile->Company}"></td>
		</tr>
		
		<tr>
		<th align="right" class="lightbg">Address 1:</th>
		<td><input type="text" name="Address1" size="27" value="{$profile->Address1}">&nbsp;*</td>
		</tr>
		
		<tr>
		<th align="right" class="lightbg">Address 2:</th>
		<td><input type="text" name="Address2" size="27" value="{$profile->Address2}"></td>
		</tr>

		<tr>
		<th align="right" class="lightbg">City:</th>
		<td><input type="text" name="City" size="27" value="{$profile->City}">&nbsp;*</td>
		</tr>
		
		<tr>
		<th align="right" class="lightbg">State:</th>
		<td><select name="State">
		<option value="">Select One...</option>
		{section name=id loop=$statecodes}
			{if $profile->State == $statecodes[id]->Code}
				<option value="{$statecodes[id]->Code}" selected="selected">{$statecodes[id]->Code} ({$statecodes[id]->FullName})</option>
			{else}
				<option value="{$statecodes[id]->Code}">{$statecodes[id]->Code} ({$statecodes[id]->FullName})</option>
			{/if}
		{/section}
		</select>&nbsp;*</td>
		</tr>
		
		<tr>
		<th align="right" class="lightbg">Zip:</th>
		<td><input type="text" name="Zip" size="10" value="{$profile->Zip}">&nbsp;*</td>
		</tr>

		<tr>
		<th align="right" class="lightbg">Residential Address?</th>
		<td><input type="radio" name="Notes" value="Residential" {if $profile->Notes=='Residential'}checked{/if}>Yes 
		<input type="radio" name="Notes" value="" {if $profile->Notes!='Residential'}checked{/if}>No </td>
		</tr>

		<tr>
		<th align="right" class="lightbg">Phone:</th>
		<td><input type="text" name="Phone1" size="27" value="{$profile->Phone1}">&nbsp;*</td>
		</tr>

		<tr>
		<th align="right" class="lightbg">Fax:</th>
		<td><input type="text" name="Fax" size="27" value="{$profile->Fax}"></td>
		</tr>

		<tr>
		<th align="right" class="lightbg">Email:</th>
		<td><input type="text" name="Email" size="27" value="{$profile->Email1}">&nbsp;*</td>
		</tr>

		<tr>
		<th align="right" class="lightbg">Website:</th>
		<td><input type="text" name="HomePageUrl" size="27" value="{$profile->HomePageUrl}"></td>
		</tr>

		<tr>
		<td colspan="2">
		
			<div style="margin: 5px; padding: 5px; border: solid 1px #bbbbbb; background-color: #eeeeee;">
			<p>For security purposes, please re-type the 4-digit code displayed in the image below:</p>
			<p><img src="captcha/CaptchaSecurityImages.php?width=100&height=40&characters=4" border="1" /></p>
			<p>Re-Type Security Code: <input type="text" size="5" name="SecurityCode" /></p>
			</div>		
		</td>
		</tr>
		
		<tr>
		<th colspan="2" align="left"><input type="submit" class="button" value="continue..."  onmouseout="this.className='button';" onmouseover="this.className='button_hover';"></th>
		</tr>
	</table>
	
	</form>
</td>

</tr>
</table>

</td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td width="550" background="{$URL_SKIN}/images/td_bottom2.gif" height="22" valign="top">
                              <table border="0" cellpadding="0" cellspacing="0" width="550">
                                <tr>
                                  <td width="138" valign="top" align="left" height="22"><img border="0" src="{$URL_SKIN}/images/spacer.gif" width="550" height="22"></td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td width="550"><p id="old_footer"><img border="0" src="{$URL_SKIN}/images/copyright.gif" style="margin-top: 15" width="525" height="25"></p>
                            </td>
                          </tr>
                        </table>

{include file="_footer.tpl"}