<script>
	{{#if key}}
		back();
	{{/if}}
</script>
<form id="form" style="display:none;">
	<div>
		<input name="email" class="fill-width" placeholder="Email" type="text"/>
	</div>
	<div>
		<input name="username" class="fill-width" placeholder="Username" type="text"/>
	</div>
	<div>
		<input name="password" class="fill-width"  placeholder="Password" type="password"/>
	</div>
	<div>
		<input name="password1" class="fill-width"  placeholder="Verify Password" type="password"/>
	</div>
	<div class="fill-width" style="height:50px;background-repeat:no-repeat;background-position:center;background-size:165px 50px;" id="captcha"></div>
	<div>
		<input name="captcha" autocomplete="off" class="fill-width" placeholder="Captcha" type="text"/>
	</div>
	<div>
		<input type="button" value="cancel" class="cancel left"/>
		<input type="submit" value="register" class="right"/>
	</div>
</form>
<script>
	{{#unless key}}
		$(document).ready(function(){
			var reloadCaptcha = function(){
				$('#captcha').css('background-image','url(index.php?get=captcha&timestamp='+(+new Date)+')');
				$('input[name=captcha]').val('');
			};
			reloadCaptcha();
			$('form#form').show().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);
							notify('register','You have successfully registered');
							loadState('page-index');
						}else{
							setKey(null);
							reloadCaptcha();
							$('#loading').hide();
						}
					});
				return false;
			}).find('.cancel').click(function(){
				back();
				return false;
			});
		});
	{{/unless}}
</script>