<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Retro Cinema Registration</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/swanky-purse/jquery-ui.css">
	<script src="../../lib/jquery.js"></script>
	<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
	<script src="../../dist/jquery.validate.js"></script>
	<script>
		$( function() {
			$.validator.addMethod( "adultsOnly", function( value, element ) {
				if ( $( "#movie .adult:checked" ).val() === "on" ) {
					var now = new Date();
					var dob = $( "#dob" ).datepicker( "getDate" );
					var age = now - dob;
					return Math.floor( age / 31536000000 ) >= 18;
				}
				return true;
			} );
			$( "#movie" ).buttonset();
			$( "#customer, #email, #dob, #reserve" ).button();
			$( "#dob" ).datepicker( {
				changeMonth: true,
				changeYear: true,
				yearRange: "-100:+0",
				maxDate: "+0D"
			} );
			$( "#reservation" ).validate( {
				errorClass: "ui-state-error",
				rules: {
					customer: "required",
					email: {
						required: true,
						email: true
					},
					dob: {
						required: true,
						date: true
					},
					movie: {
						required: true,
						adultsOnly: true
					}
				},
				messages: {
					customer: "Please enter your name",
					email: {
						required: "Please enter your email",
						email: "Please enter a valid email"
					},
					dob: {
						required: "Please enter your dob",
						date: "Please enter a valid date"
					},
					movie: {
						required: "Please choose a movie",
						adultsOnly: "This movie is for adults only!"
					}
				},
				errorPlacement: function( error, element ) {
					if ( element.is( ":radio" ) ) {
						$( "<br>" ).appendTo( element.parent().parent().find( "label:first" ) );
						error.appendTo( element.parent().parent().find( "label:first" ) );
					} else {
						$( "<br>" ).appendTo( element.parent().find( "label" ) );
						error.appendTo( element.parent().find( "label" ) );
					}
				}
			} );
		} );
	</script>
	<style>
		#customer, #email, #dob {
			height: 1.5em;
			width: 20em;
			text-align: left;
			outline: none;
			cursor: text;
		}
		.formlabel {
			float: left;
			width: 12em;
		}
		#reserve {
			margin-left: 12em;
		}
		legend {
			padding: 1em;
			font-size: 1.2em !important;
		}
		div {
			margin: 1em 0 1em 0;
		}
	</style>
</head>
<body>

<form id="reservation" method="get" action="">
	<fieldset class="ui-widget ui-widget-content ui-corner-all">
		<legend class="ui-widget ui-widget-header ui-corner-all">Retro Cinema Reservation</legend>
		<div>
			<label for="customer" class="formlabel">Name</label>
			<input type="text" id="customer" name="customer">
		</div>
		<div>
			<label for="email" class="formlabel">Email</label>
			<input type="email" id="email" name="email">
		</div>
		<div>
			<label for="dob" class="formlabel">Date of Birth</label>
			<input type="text" id="dob" name="dob">
		</div>
		<div>
			<label for="movie" class="formlabel">Choose your Movie</label>
			<div id="movie">
				<label for="movie1"><img src="saucer_men.jpg" alt="Invasion of the Saucer Men" style="width:200px;height:300px;"><br>Invasion of the<br>Saucer Men</label>
				<input type="radio" id="movie1" name="movie">
				<label for="movie2"><img src="plan_9.jpg" alt="Plan 9 from Outer Space" style="width:200px;height:300px;"><br>Plan 9 from<br>Outer Space</label>
				<input type="radio" id="movie2" name="movie">
				<label for="movie3"><img src="refer_madness.jpg" alt="Reefer Madness - Adults Only" style="width:200px;height:300px;"><br>Reefer Madness<br>Adults Only</label>
				<input type="radio" id="movie3" name="movie" class="adult">
			</div>
		</div>
		<div>
			<input type="submit" id="reserve" name="reserve" value="reserve">
		</div>
	</fieldset>
</form>

</body>
</html>