{assign_variable:my_weblog="content_pages"}
{assign_variable:my_template_group="static"}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Waterstone</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="author" content="Waterstone" />

	<link rel='stylesheet' type='text/css' media='all' href='https://www.waterstone.org/style.css' />
	<style type='text/css' media='screen'>@import "https://www.waterstone.org/style.css";</style>
	
	<script type="text/javascript" src="https://www.waterstone.org/authtest/jquery.js"></script>
	<script type="text/javascript" src="https://www.waterstone.org/authtest/jquery.validate.js"></script>

	<script language="JavaScript">

	function popUp(url) {
	sealWin=window.open(url,"win",'toolbar=0,location=0,directories=0,status=1,menubar=1,scrollbars=1,resizable=1,width=585,height=450');
		self.name = "mainWin";
	}
	</script>
	
	<script type="text/javascript">
	$(document).ready(function() {
		$("#form").validate();
	});
	</script>


</head>

<body>

<div id="wrapper">

	<div id="sidebar">
		<div id="stories-box">
			<h2>Stories</h2>

			                        {embed="includes/donor-stories"}

		</div>
		
		<div id="sidebar-nav">
		{exp:weblog:entries category="{static_page}" dynamic="off"}
			<h3 class="sidenav-header-title">{static_page_name}</h3>
		{/exp:weblog:entries}
                           {exp:static_page_path direction="post" depth="0"}<a href="{url_title}" title="{title}">{title}</a>{/exp:static_page_path}
		</div>
		



		<div id="addressbox">
			{embed="includes/address"}
		</div>
		
	</div><!--/sidebar-->

	<div id="right-bar">
		<div id="header"><h1><a href="{homepage}"><span>WaterStone</span></a></h1></div>
		
		<div id="header-nav">
			<ul>
				<li><a href="{homepage}">HOME</a></li>
				<li><a href="/contact">CONTACT</a></li>
				<li><a href="/login/">LOGIN</a></li>
			</ul>
			<div id="tagline"></div>
			
			<div class="clearit"></div>
		</div>
		
		<div id="navbar">
		     {embed="includes/nav"}
		</div>
		
		
		<div id="content">

		<div id="breadcrumb"><a href="{homepage}">home</a>{exp:static_page_path backspace="0"} » <a href="{url_title}" title="{title}">{title}</a>{/exp:static_page_path}</div>

		{exp:weblog:entries category="{static_page}" dynamic="off"}
			<h1>{static_page_name}</h1>
			{body}
		{/exp:weblog:entries}

<div id="giftform">
	<form id="form" name="form" class="form" action="" method="post"><!--https://www.waterstone.org/authtest/process.php-->


<ul id="formFields">

<li>
	<label class="desc">Account Selector</label>
	<div>
		<select class="field select medium" id="description" name="description"> 
		<option disabled>Please Select One</option>
<optgroup label="Ministry Charity Projects">
		{exp:weblog:entries weblog="mcpfoi" orderby="type|title" category="88" sort="desc|asc"}
		<option label="{title}, #{mcpfoi_id}" value="{title}, #{mcpfoi_id}, {type}">{title}</option>
		{/exp:weblog:entries}
</optgroup>
<optgroup label="Fields of Interest">
		{exp:weblog:entries weblog="mcpfoi" orderby="type|title" category="89" sort="desc|asc"}
		<option label="{title}, #{mcpfoi_id}" value="{title}, #{mcpfoi_id}, {type}">{title}</option>
		{/exp:weblog:entries}
</optgroup>
		</select>
	</div>
</li>		

<h3>Payment Information</h3>
<hr />

<li>
	<label class="desc">Select Payment Method</label>
	<div>
		<input id="method" name="method" class="element radio" type="radio" value="CC" checked="checked" onClick="if(this.checked){document.getElementById('echeck_fields').style.display='none';document.getElementById('cc_fields').style.display='block';}" />
		Credit Card &nbsp; &nbsp;
		<input id="method" name="method" class="element radio" type="radio" value="ECHECK" onClick="if(this.checked){document.getElementById('echeck_fields').style.display='block';document.getElementById('cc_fields').style.display='none';}"><!--else{document.getElementById('echeck_fields').style.display='none';}-->
		Electronic Check
	</div>
<li>
	<label for="amount">Total Amount</label>
	<div>
		$ <input type="text" id="amount" name="amount" class="required">
		<p> &nbsp; &nbsp; XXX.XX</p>
	</div>
</li>

<!-- echeck -->
<ul id="echeck_fields" style="display:none;">
	<li>
		<label class="desc" for="bank_name">Bank Name</label>
		<div class="full">
			<input id="bank_name" name="bank_name" class="field text large" size="43" maxlength="16" type="text" value=""/> 
		</div>
	</li>
	<li>
		<label class="desc" for="bank_acct_name">Account Owner</label>
		<div class="full">
			<input id="bank_acct_name" name="bank_acct_name" class="field text large" size="43" maxlength="16" type="text" value=""/> 
		</div>
	</li>	
	<li>
		<label class="desc" for="bank_acct_type">Account Type</label>
		<div class="full">
			<select class="field select medium" id="bank_acct_type" name="bank_acct_type"> 
			<option value="CHECKING">Checking</option>
			<option value="BUSINESSCHECKING">Business Checking</option>
			<option value="SAVINGS">Savings</option>
		</select>
		</div>
	</li>
	<li>
		<label class="desc" for="bank_aba_code">Routing Number</label>
		<div class="full">
			<input id="bank_aba_code" name="bank_aba_code" class="field text large" size="43" maxlength="16" type="text" value=""/> 
		</div>
	</li>
	<li>
		<label class="desc" for="bank_acct_num">Account Number</label>
		<div class="full">
			<input id="bank_acct_num" name="bank_acct_num" class="field text large" size="43" maxlength="16" type="text" value=""/> 
		</div>
	</li>	
</ul>

<!-- cc -->
<ul id="cc_fields">
<li>
	<label class="desc" for="cardtype">Please Charge My Credit Card</label>
	<div class="full">
		<select class="field select medium" id="cardtype" name="cardtype"> 
		<option value="Visa">Visa</option>
		<option value="Mastercard">Mastercard</option>
	</select>
	</div>
</li>

<li>
	<label class="desc" for="ccnum">Account Number</label>
	<div class="full">
		<input id="ccnum" name="ccnum" class="field text large" size="43" maxlength="16" type="text" value=""/> 
	</div>
</li>

<li>
	<div>
		<label class="desc" for="expyr">Expiration Date</label>
		<div class="full">
			<select class="field select medium" id="expMM" name="expMM">
				<option value=""></option>
				<option value="01">01</option>
				<option value="02">02</option>
				<option value="03">03</option>
				<option value="04">04</option>
				<option value="05">05</option>
				<option value="06">06</option>
				<option value="07">07</option>
				<option value="08">08</option>
				<option value="09">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select>
			<select class="field select medium" id="expYY" name="expYY">
				<option value=""></option>
				<option value="09">2009</option>
				<option value="10">2010</option>
				<option value="11">2011</option>
				<option value="12">2012</option>
				<option value="13">2013</option>
				<option value="14">2014</option>
				<option value="15">2015</option>
				<option value="16">2016</option>
				<option value="17">2017</option>
				<option value="18">2018</option>
				<option value="19">2019</option>
				<option value="20">2020</option>
				<option value="21">2021</option>
				<option value="22">2022</option>
				<option value="23">2023</option>
			</select>
		<p class="">(Month/Year)</p>
	</div>
</li>

<!--><li>
	<div>
		<label class="desc" for="expyr">Expiration Date (MMYY)</label>
		<input id="expyr" name="expyr" class="field text" type="text" size="5" maxlength="15" value="" />
		<p class="">MMYY (MM= Month / YY =)</p>
	</div>
</li>-->

<li>
	<label class="desc" for="cvv">CVV</label>
	<div class="full">
		<input id="cvv" name="cvv" class="field text small" size="5" maxlength="4" type="text" value=""/> 
		<a href="javascript:popUp('{path="/cardinfo"}');"><img src="/img/ban_smallcreditcard.gif" width="51" height="31" border="0" align="absmiddle"> (explain)</a>
	</div>
</li>
</ul>

<ul id="contact-info">
<h3>Billing Information</h3>
<hr />
<li>
	<label>Please Enter Your Name</label>
	<div>
		<input id="firstname" name= "firstname" class="field text" size="20" value=""/>
		<p class="tam">First</p></div>
	<div>
		<input id="lastname" name= "lastname" class="field text" size="20" value=""/>
		<p class="tam">Last</p></div>
</li>

<li>
	<label class="desc" for="address">Please Enter Your Address</label>
	<div class="full">
		<input id="address1" name="address1" class="field text large" size="43" type="text" value="" />
		<p class="">Street Address</p>
	</div>
	<div class="full">
		<input id="address2" name="address2" class="field text large" size="43" type="text" value="" />
		<p class="">Address Line 2</p>
	</div>
	<div>
		<input id="city" name="city" class="field text" size="25" type="text" value="" />
		<p class="">City</p>
	</div>
	<div>
		<input id="state" name="state" class="field text" size="5" type="text" value="" />
		<p class="">State</p>
	</div>
	<div>
		<input id="zip" name="zip" class="field text" size="8" type="text" maxlength="15" value="" />
		<p class="">Postal / Zip Code</p>
	</div>
</li>

<li>
	<label class="desc" for="field10">Telephone</label>
	<div>
		<input id="phone1" name="phone1" class="field text" type="text" size="3" maxlength="3" value=""/> - 
		<p>(###)</p>
	</div>
	<div>
		<input id="phone2" name="phone2" class="field text" type="text" size="3" maxlength="3" value=""/> - 
		<p>###</p>
	</div>
	<div>
		<input id="phone3" name="phone3" class="field text" type="text" size="4" maxlength="4" value=""/>
		<p>####</p>
	</div>
</li>

<li>
	<label class="desc" for="email">Email Address</label>
	<div class="full">
		<input id="email" name="email" class="field text large" size="43" type="text" maxlength="255"value=""/> 
		<p>We will not share your email address</p>
	</div>
</li>



<div class="buttons">
<input id="submit" name="submit" type="submit" value="Submit" />
</div>

</ul><!--/contact-info-->

</ul>



</form>
</div>
		
		</div><!-- /content -->
		
	
	</div><!--/right-bar -->

		<div id="footer">
			{embed="includes/footer"}
		</div>

</div><!--/wrapper-->

</body>
</html>