<?php 
require_once("../config.php");
require_once($config['root']."/map/inc/kmlHandler.php");
require_once($config['root']."/map/inc/node_info_start.php");
require_once($config['root']."/map/inc/search_node.php");

#getting array from kmlHandler
$markers = get_node_array($config['kml_file']);

# Key is defined to be the domain name if exists
$apikey = $config['googlekey']['default'];
$servername = $_SERVER['SERVER_NAME'];

# Little hack, does not work with foo.co.uk domains
$servername = implode('.',array_slice(explode('.',$servername),-2));
if (array_key_exists($servername,$config['googlekey'])) {
  $apikey = $config['googlekey'][$servername];
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="dutch">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nodemap Wireless Leiden</title>
<!-- External stylesheet for all browsers -->
<link href="style/stylesheet.css" rel="stylesheet" type="text/css">
<!-- Using stylesheet2.css when browser is any version of Microsoft Internet Explorer -->
<!--[if IE]>
	<link href="style/stylesheet2.css" rel="stylesheet" type="text/css">
<![endif]-->

<!-- Make our $marker[] array from kmlHandler available to javascript in JSON (No idea on how to this another less ugle way)-->
<script type="text/javascript">
var markers = <?php echo json_encode($markers); ?>;
</script>

<!-- Loading in the google-api -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php print $apikey;?>" type="text/javascript"></script>
<!-- Loading in the markerClusterer that will handle the clustering of markers. -->
<script type="text/javascript" src="inc/markerClusterer.js"></script>
<!-- Loading in the javascript that will add the map into #mapcanvas -->
<script type="text/javascript" src="inc/nodemapWL.js"></script>
<script type="text/javascript" src="inc/overlay.js"></script>
<script type="text/javascript" src="inc/iconStyles.js"></script>

<!-- Loading in the javascript that handles the switching between gebruiker and beheerder -->
<script type="text/javascript" src="inc/gebruiker_beheerder_switch.js"></script>

</head>
<body onload="suggestMarkers('')">
<!-- Mainwrapper contains all content on the page -->
<div id="mainwrapper">
	<!-- Mapcanvas is the container where the map will be put in. Height and width of map is specified by size of the div -->
	<div id="mapcanvas">
		<!-- Create the map using the intitialize_map() function from nodemapWL.js -->
		<script type="text/javascript">initialize_map();</script>
		<!--<script type="text/javascript">nodeAdd();</script>-->
	</div>
	<div id="infowrapper">
		<!-- Top information space -->
		<div id="infotop">
		<!-- Calling on the node information from an external php file. inc/node_info.php -->
			<?php node_info_start(); ?>
		</div>

		<!-- Bottom information space -->
		<div id="infobottom">
			<?php searchNodes(); ?>
			<div id="searchlist">
				
			</div>
		</div>
		<!-- The buttons under the searchframe. In a table for positioning. -->
		<div id="userpick">
		<table>
			<tr><!-- onclick events activate functions from within inc/gebruiker_beheerder_switch.js which load in the selected view with node_info.php -->
				<td><input type="button" value="Gebruiker" onclick="switchGebruiker();"></td>
				<td><input type="button" value="Beheerder" onclick="switchBeheerder();"></td>
			 </tr>
		</table>
		</div>
	</div>
	
	<!-- General functions under the map -->
	<div id="navigation">
	<form action="">
		<table>
			<tr>
				<!-- First colum -->
					
				<!-- Second colum -->
				<td>
					<input type="checkbox" value="showrange" onclick="toggleAllCircles();" >Toon dekking <br>
				</td>
				<td>
					<input type="checkbox" value="showtraffic">Toon dataverkeer
				</td>
				<td>
					<input type="checkbox" value="gsearchbar" onclick="toggleGoogleSearchMap();">Toon locatie zoeken
				</td>
			</tr>
		</table>
	</form>	
	</div>
</div>
</body>
</html>
