<!-- Head -->
<?php require_once './parts/head.php'; ?>

<body>
	<!-- Header -->
	<?php require_once './parts/header.php'; ?>

	<!-- map -->
	<div id="map" style="display:block"></div>
	<!-- Paper Plane animation -->
	<canvas id="canvas3d"></canvas>
	<canvas id="blankCanvas1" width="400" height="400" style="border:1px solid #d3d3d3; display:none"></canvas>
	<canvas id="blankCanvas2" width="400" height="400" style="border:1px solid #d3d3d3; display:none"></canvas>
	<img style="display:none;" id="front" src="src/img/front.jpg" />
	<img style="display:none;" id="back" src="src/img/back-FF5555.jpg" />
	<?php
	if (isset($_GET['avionpoeme']) && $_GET['avionpoeme'] !== '') { ?>
		<script id="planeFoldScript.txt" type="not-javascript"> <!-- From https://github.com/RemiKoutcherawy/OriSim3D-JS  was fun to code -->
			d -200 200 -200 -200 200 -200 200 200
			c 0 1 c 0 3 c 0 2 c 1 3
			c 0 8 c 8 3 c 0 4 c 4 1
			c 6 0 c 6 1 c 6 2 c 6 3
			iad t 0 ty 6 tx -3)
			t 0 r 48 -179.99 21 0 10 r 55 -179.99 17 3 19 )
			t 0 r 43 160 1 4 0 21 24 12 11 13 9 10)
			t 0 ty -80)
			t 0 tx -60)
			t 0 r 27 -80 3 19 5 22 2 a 3)
			t 0 r 23 -80 0 21 4 24 1 a 0)
			t 500 r 23 80 0 21 4 24 1 a 0)
			t 0 r 23 -90 0 a 0)
			t 500 r 27 80 3 19 5 22 2 a 3)
			t 0 r 27 -90 3 a 3)
			t 700 tx 60)
			t 700 ty 80)
			t 750 r 43 -160 1 4 0 21 24 12 11 13 9 10)
			t 750 r 48 179.99 21 0 10 r 55 179.99 17 3 19 )
			iad t 1200 ty -6 tx 3)
		</script>
	<?php } else { ?>
		<script id="planeFoldScript.txt" type="not-javascript"> <!-- From https://github.com/RemiKoutcherawy/OriSim3D-JS  was fun to code -->
			d -200 200 -200 -200 200 -200 200 200
			c 0 1 c 0 3 c 0 2 c 1 3
			c 0 8 c 8 3 c 0 4 c 4 1
			c 6 0 c 6 1 c 6 2 c 6 3
			iad t 1200 ty 6 tx -3)
			t 750 r 48 -179.99 21 0 10 r 55 -179.99 17 3 19 )
			t 750 r 43 160 1 4 0 21 24 12 11 13 9 10)
			t 700 ty -80 tx -60)
			t 500 r 27 -80 3 19 5 22 2 a 3 )
			t 500 r 23 -80 0 21 4 24 1 a 0)
			t 1000 tx -35 z 0 0 0 il 100 100)
		</script>
	<?php }
	?>
	<!-- Modal new plane-->
	<div class="modal fade" id="newPlaneModal" tabindex="-1" role="dialog" aria-labelledby="newPlaneModal" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="newPlaneModalTitle">Lancer un avion-poème</h5>
					<button type="button" id="closeModal" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form>
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<b class="bold" id="newPlaneModalMessage">Message</b>&nbsp;&nbsp;
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="radio" name="inlineRadioOptions" id="prive" value="prive" checked>
										<label class="form-check-label" for="prive" id="newPlaneModalPrive">privé</label>
									</div>
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="radio" name="inlineRadioOptions" id="public" value="public">
										<label class="form-check-label" for="public" id="newPlaneModalPublic">public</label>&nbsp;&nbsp;<i id="publicTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="Message publié dans l’Anthologie une fois l’avion-poème arrivé"></i>
									</div>
									<br>
									<br>
									<div class="form-control rounded-0" id="messageTextArea"></div>
								</div>
								<div class="form-group">
									<label class="bold" for="selectTime" id="flightTime">Temps de vol</label>
									<select class="form-control" id="selectTime">
										<option id="newPlaneModalRandom" value="random">Aléatoire</option>
										<option id="newPlaneModal3j" value="3days">3,14 jours</option>
										<option id="newPlaneModal7j" value="7days">7 jours</option>
										<option id="newPlaneModal30j" value="30days">30 jours</option>
										<option id="newPlaneModal365j" value="365days">365 jours</option>
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<b class="bold" id="newPlaneModalExpediteur">Expediteur</b>&nbsp;&nbsp;
									<input type="checkbox" class="form-check-input" id="expeKnown">
									<label class="form-check-label" for="expeKnown" id="newPlaneModalAnonyme">envoi anonyme</label>&nbsp;&nbsp;<i id="anonymeTooltip" class="fas fa-question-circle" data-toggle="tooltip" data-placement="auto" title="Votre adresse électronique ne sera communiquée au destinataire qu’à l’arrivée de l’avion-poème"></i>
								</div>
								<div class="form-group">
									<input type="email" autocomplete="off" class="form-control" id="expeMail" aria-describedby="emailHelp" placeholder="Insérer votre adresse électronique">
								</div>
								<input type="text" autocomplete="off" class="form-control typeahead" id="expeGeocoderPhoton" placeholder="Choisissez un point de départ" data-provide="typeahead">
								<br>
								<div class="form-group">
									<label class="bold" id="newPlaneModalDestinataire" for="destMail">Destinataire</label>
									<input type="email" autocomplete="off" class="form-control" id="destMail" aria-describedby="emailHelp" placeholder="Insérer l'adresse électronique du destinataire">
								</div>
								<div class="form-group">
									<input type="text" autocomplete="off" class="form-control typeahead" id="destGeocoderPhoton" placeholder="Choisissez une destination" data-provide="typeahead">
								</div>
								<div class="form-group form-inline">
									<label for="selectDestLang" id="destLang">Langue parlée par le destinataire:</label>&nbsp;
									<select class="form-control form-control-sm" id="selectDestLang">
									</select>
								</div>
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-light" id="newPlaneModalCancel" data-dismiss="modal">Annuler</button>
					<button type="button" class="btn btn-warning" id="sendNewPlane" disabled>Lancer</button>
				</div>
				</form>
			</div>
		</div>
	</div>
	<script src="src/map.js"></script>
	<script src="src/geocoder.js"></script>
	<script src="src/paperPlaneAnimation.js"></script>
	<script src="src/formValidation.js"></script>
	<script src="src/newPlane.js"></script>
	<script src="src/translation.js"></script>
	<script src="src/anthology.js"></script>
</body>

</html>