<!DOCTYPE html>
<?php
	session_start();
?>
<html>
<head>
	<meta charset="UTF-8"/>
	<title>Smart Pass</title>
	<meta content='user-scalable=0' name='viewport' />
	<link rel="icon" type="image/ico" href="mmd/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="style/splasher.css"/>
	<link rel="stylesheet" type="text/css" href="style/loader.css"/>
	<link rel="stylesheet" type="text/css" href="style/style.css"/>
	<!--<link rel="stylesheet" type="text/css" href="style/orientation.css"/>-->
	<script src="javaParcours.js" type="text/javascript" ></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
	<script src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/src/geolocationmarker-compiled.js"></script>
	<script src="script/jquery.js"></script>
	<script src="map.js" type="text/javascript" ></script>
	<script src="script/jquery-ui.js"></script>

	<!-- Favicon -->
	<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
	<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
	<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
	<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
	<link rel="manifest" href="/manifest.json">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#b11111">
	<meta name="msapplication-TileColor" content="#b11111">
	<meta name="msapplication-TileImage" content="/mstile-144x144.png">
	<meta name="theme-color" content="#b11111">

	<style type="text/css">
	@media (orientation: portrait) {
	#warning { display: none; }
	}
	@media (orientation: landscape) {
	#splasher-splash, #loader-load, #content { display: none; }
	#warning { display: block; background-color: #333333; color: white; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1.4em; }
	#warning p { margin-top: 50vh; transform: translateY(-50%); }
	}
	</style>
</head>
<body id="container">
	<div id="splasher-splash">
		<div id="logo"></div>
		<div id="splasher"></div>
		<div class="splasher-section section-left"></div>
		<div class="splasher-section section-right"></div>
	</div>
	<div id="loader-load">
		<div id="loader"></div>
		<div class="loader-section section-left"></div>
		<div class="loader-section section-right"></div>
	</div>

	<div id="content">
		<div id="header">
			<img id="Smart_Pass" src="mmd/Smart_Pass.svg" alt="Smart Pass Logo"/>
			<img id="options" src="mmd/icon_Gear.svg" alt="options"/>
		</div>
		<div id="corps" class="corps_scroll">
		<div id="menu_POI" style="height:100%;width:100%;z-index:10;overflow-x:hidden;overflow-y: scroll;">
			<img id="close" src="mmd/close.svg" style="width:80px;height:80px;float:right;margin-top:40px;margin-right:40px;" />
			<h2 id="POI_titre" style="margin-top:150px;margin-bottom:70px;color:white;font-size:4em;text-shadow: 0 5px 10px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.22);"></h2>
			<p id="POI_desc" style="margin-bottom:80px;padding-left:5%;padding-right:5%;color:white;font-size:3em;text-align:justify;text-indent:5%;"></p>
			
			
		</div>
		<?php
		
					// connexion a la base
			$db = mysql_connect('localhost', 'root', 'm148r43a9Y@%Z') or die('Erreur de connexion '.mysql_error());
			// selection de la base 
			mysql_select_db('smartpassTest2',$db) or die('Erreur de selection '.mysql_error()); 

			echo '<div id="menu_option">';
				echo '<a href="mentions.php?splash=1" style="text-decoration:none;color:white;" class="button_scroll">';
					echo '<p id="" style="font-size:3em;margin:0;padding-top:40px;padding-bottom:40px;">Mentions Légales</p>';
				echo '</a>';
			echo '</div>';
			
			
			if (isset($_GET['value'])) {
				$value = $_GET['value'];
				echo '<section id="mapSection" style="overflow:hidden;height:100%;width:100%"></section>';
				echo '<script src="javaParcours.js" type="text/javascript" ></script>';
				echo '<script>showParcours("'.$value.'");</script>';
				
			}
			else {
				//Requete SQL
				$strSQL = mysql_query("SELECT * FROM Parcours"); // 1, Essai, 1,2,3,4
				
				//Executer la requete
				$result = mysql_query($strSQL); 

				if(mysql_num_rows($strSQL) == 0){
					echo '<p>Aucun champ!</p>';
				}
				while($fetch = mysql_fetch_array($strSQL)){
					if ($fetch['theme'] == $_GET['theme']) {
						/* echo '<a href="parcours.php?value='.$fetch['id'].'&splash=1" style="text-decoration:none;color:white;" class="button_scroll">';
						echo '<p style="font-size:3em;margin:0;padding-top:40px;padding-bottom:40px;">'.$value.'</p>';
						echo '</a>'; */
						echo '<div class="main">';
						echo '<p id="titre">'.$fetch['Titre'].'</p>';
						echo '<a href="parcours.php?value='.$fetch['id'].'&splash=1&back='.$_GET['theme'].'" class="go">C\'est parti !</a>';
						echo '<p id="type">Type : '.$fetch['type'].'</p>';
						echo '<p id="facts"><span id="distance">'.$fetch['longueur'].'</span> <span id="duree">'.$fetch['duree'].'</span></p>';
						echo '<p id="mobility">Mobilité : </p>';
						echo '</div>';
					}
				}
			}
			?>
			<style type="text/css">
				.main {
					display: initial;
				}
				.main:not(:last-child) {
					border-bottom: 1px solid black;
				}
				.main p {
					color: white;
					display: block;
					font-size: 2.5em;
					text-align:left;
					margin-right: 0;
					margin-left: 10%;
					width: 50%;
				}
				.main #titre {
					width: 100%;
					margin-left: 0;
					text-align: center;
					font-size: 3.5em;
					font-weight: bold;
					text-shadow: 0 20px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
				}
				.main #facts #distance:before {
				    content: "";
				    display: inline-block;
				    background: url("mmd/road.svg") no-repeat center center;
				    width: 40px;
				    height: 40px;
				    margin: 0 6px 0 0;
				}
				.main #facts #duree:before {
				    content: "";
				    display: inline-block;
				    background: url("mmd/chrono.svg") no-repeat center center;
				    width: 40px;
				    height: 40px;
				    margin: 0 6px 0 0;
				}
				.main #mobility:after {
				    content: "";
				    display: inline-block;
				    background: url("mmd/mobility.svg") no-repeat center center;
				    width: 100px;
				    height: 40px;
				    margin: 0 6px 0 0;
				}
				.go {
					float: right;
					margin-top: 5%;
					margin-right: 10%;
					-webkit-border-radius: 28;
					-moz-border-radius: 28;
					border-radius: 28px;
					font-family: Arial;
					color: #ffffff;
					font-size: 3em;
					background: #b11111;
					padding: 2% 5% 2% 5%;
					text-decoration: none;
				}
				/**/
				.gm-style-iw div div a {
					float: right;
					-webkit-border-radius: 28;
					-moz-border-radius: 28;
					border-radius: 28px;
					font-family: Arial;
					color: #ffffff;
					font-size: 2em;
					background: #b11111;
					padding: 2% 5% 2% 5%;
					text-decoration: none;
					margin-bottom: 2%;
				}
				.gm-style div div div div img {
					width: 
				}
				.gm-style-iw div div h2 {
					font-weight: bold;
					text-shadow: 0 5px 10px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.22);
				}
				.gm-style-iw div div h3 {
					text-align: left;
				}
				.gm-style-iw div div h3:after {
					content: "...";
				}
			</style>
		</div>
		<div id="footer">
			<a class="options" href="index.php?splash=1"><img class="options_img" src="mmd/icon_Home.svg" alt="Home"/></a>
			<?php 
			if (isset($_GET['theme'])) {
				echo '<a class="options" href="themes.php?splash=1"><img class="options_img" src="mmd/icon_Back.svg" alt="Back"/></a>';
			}
			else if (isset($_GET['back'])) {
				echo '<a class="options" href="parcours.php?splash=1&theme='.$_GET['back'].'"><img class="options_img" src="mmd/icon_Back.svg" alt="Back"/></a>';
			}
			else {
				echo '<a class="options" href="index.php?splash=1"><img class="options_img" src="mmd/icon_Back.svg" alt="Back"/></a>';
			}
			?>
		</div>
	</div>
	<style type="text/css">
		#mapSection {
			-webkit-flex: 1;
			-moz-flex: 1;
			-ms-flex: 1;
			-o-flex: 1;
			flex: 1;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			-webkit-flex-direction: row;
			-moz-flex-direction: row;
			-ms-flex-direction: row;
			-o-flex-direction: row;
			flex-direction: row;
			-webkit-justify-content: center;
			-moz-justify-content: center;
			-ms-justify-content: center;
			-o-justify-content: center;
			justify-content: center;
		}
		/* exceptions au flex pour le momment */
		#corps {
			-webkit-justify-content: flex-start;
			-moz-justify-content: flex-start;
			-ms-justify-content: flex-start;
			-o-justify-content: flex-start;
			justify-content: flex-start;
		}

		/*hack safari */
		@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
			@media {

				#menu_POI {
					height: 10000px;
				}
			}
		}
	</style>
	<script type="text/javascript">

	Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
	}
	NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
	    for(var i = this.length - 1; i >= 0; i--) {
	        if(this[i] && this[i].parentElement) {
	            this[i].parentElement.removeChild(this[i]);
	        }
	    }
	}

	function infoAfficher(texte, photo) {
		$( "#menu_POI" ).animate({width: 'toggle'});
		$( "#POI_titre" ).html( $( ".gm-style-iw div div h2" ).text() );
		$( "#POI_desc" ).html( $( "#" + texte + "" ).text() );
		table = document.getElementsByClassName(photo);
		var img_block = document.createElement('div');
		img_block.setAttribute('id', 'my_photos_box');
		var menu = document.getElementById('menu_POI');
		if (table.length>=2) {
			for (var i = table.length - 1; i > 0; i--) {
				var img = document.createElement('img');
				img.setAttribute('class', 'my_photos');
				img.setAttribute('src', 'mmd/' + table[i].innerHTML);
				img.setAttribute('style', 'width:80%;margin-bottom:4%;');
				img_block.appendChild(img);
			};
		}
		menu.appendChild(img_block);
	}
	$( "#close" ).click(function() {
		$( "#menu_POI" ).animate({width: 'toggle'});
		document.getElementById("my_photos_box").remove();
	});
	</script>
	<div id="warning"><p>Veuillez positionner votre smartphone en mode portrait s'il vous plait.</p></div>
</body>
</html>