<form id="form" class="table outline ui-corner-all">
	<div class="row">
		<span class="cell align-right">
			Email:
		</span>
		<span class="cell">
			<input name="email" type="text"/>
		</span>
	</div>
	<div class="row">
		<span class="cell align-right">
			Username:
		</span>
		<span id="cell">
			<input name="username" type="text"/>
		</span>
	</div>
	<div class="row">
		<span class="cell align-right">
			Password:
		</span>
		<span class="cell">
			<input name="password" type="password"/>
		</span>
	</div>
	<div class="row">
		<span class="cell align-right">
			Verify Password:
		</span>
		<span class="cell">
			<input name="password1" type="password"/>
		</span>
	</div>
	<div class="align-right">
		<image id="captcha" src="index.php?get=captcha"/>
	</div>
	<div class="row">
		<span class="cell align-right">
			Captcha:
		</span>
		<span class="cell">
			<input name="captcha" type="text"/>
		</span>
	</div>
	<div class="row">
		<div class="cell align-right">
			<input type="submit" value="register"/>
		</div>
		<div class="cell">
			<input type="button" value="cancel" class="cancel"/>
		</div>
	</div>
</form>
<script>
	{{#if key}}
		History.back();
	{{else}}
		$('form#form').submit(function(){
			var data = $(this).serializeObject(),
					State = History.getState();
				for(var i in State.data){
					data[i] = State.data;
				}
				data.type = 'action';
				data.id = 'register';
				apiCall(data,function(d){
					if(!d.error){
						setKey(d.key);
						loadState('page-index');
					}else{
						setKey(null);
						$('#captcha').attr('src','index.php?get=captcha&timestamp='+new Date);
						$('#loading').hide();
					}
				});
			return false;
		}).children('.cancel').click(function(){
			History.back();
			return false;
		});
	{{/if}}
</script>