<!DOCTYPE html>
<html>
	<head>
		<title>Crunchbutton Restaurant Map</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta charset="utf-8">
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
				font: 12px Helvetica, sans-serif;
			}

			#map_canvas {
				height: 100%;
			}

			h2 {
				padding: 0;
				margin: 0;
			}

			@media print {
				html, body {
					height: auto;
				}

				#map_canvas {
					height: 650px;
				}
			}
		</style>
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es"></script>
		<script>
			function initialize() {

				var settings = {
					<? if (!$this->community) : ?>
						zoom: 4,
						center: new google.maps.LatLng(39.0997, -94.5783),
					<? else : ?>
						zoom: 12,
						center: new google.maps.LatLng(<?=$this->community->loc_lat?>, <?=$this->community->loc_lon?>),
					<? endif; ?>
					mapTypeControl: false,
					streetViewControl: false,
					mapTypeControlOptions: {
						style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
					},
					navigationControl: true,
					navigationControlOptions: {
						style: google.maps.NavigationControlStyle.SMALL
					},
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};

				var map = new google.maps.Map(document.getElementById('map_canvas'), settings);
				var windows = [];
				var circles = [];

				var blurCircle = function(circle) {
					if (!circle) {
						return;
					}
					circle.setOptions({
						fillColor: '#000000',
						strokeColor: '#000000',
						fillOpacity: 0.05,
						strokeOpacity: 0.5,
					});
				};

				<? foreach ($this->restaurants as $restaurant) : ?>
					var point<?=$restaurant->id_restaurant?> = new google.maps.LatLng(<?=$restaurant->loc_lat?>,<?=$restaurant->loc_long?>);
					var marker<?=$restaurant->id_restaurant?> = new google.maps.Marker({
						draggable: true,
						raiseOnDrag: false,
						map: map,
						position: point<?=$restaurant->id_restaurant?>,
						title: "<?=$restaurant->name?>"
					});

					<? if ($restaurant->delivery_radius) : ?>
						var myCircle<?=$restaurant->id_restaurant?> = new google.maps.Circle({
							center: point<?=$restaurant->id_restaurant?>,
							radius: (1609 * <?=$restaurant->delivery_radius?>),
							fillOpacity: 0.05,
							strokeOpacity: 0.5,
							map: map
						});
					<? else : ?>
						var myCircle<?=$restaurant->id_restaurant?> = null;
					<? endif ; ?>

					var contentString<?=$restaurant->id_restaurant?> = '<div style="width: 200px;">'
						+ "<h2><b><?=$restaurant->name?></b></h2>"
						+ "<p style='margin-top: 7px;'><?=str_replace("\n",'<br>',$restaurant->address)?>"
						+ "<br><?=$restaurant->delivery ? 'Delivery Radius: '.$restaurant->delivery_radius.' miles' : '<b>TAKEOUT ONLY</b>'?></p>"
						+ '</div>';
					var infowindow<?=$restaurant->id_restaurant?> = new google.maps.InfoWindow({
						content: contentString<?=$restaurant->id_restaurant?>
					});
					windows[windows.length] = infowindow<?=$restaurant->id_restaurant?>;
					circles[circles.length] = myCircle<?=$restaurant->id_restaurant?>;

					google.maps.event.addListener(marker<?=$restaurant->id_restaurant?>, 'click', function() {
						for (var x in windows) {
							windows[x].close();
						}
						for (var x in circles) {
							blurCircle(circles[x]);
						}
						infowindow<?=$restaurant->id_restaurant?>.open(map,marker<?=$restaurant->id_restaurant?>);
						<? if ($restaurant->delivery_radius) : ?>
							google.maps.event.addListener(infowindow<?=$restaurant->id_restaurant?>,'closeclick',function() {
								blurCircle(myCircle<?=$restaurant->id_restaurant?>);
							});

							myCircle<?=$restaurant->id_restaurant?>.setOptions({
								fillColor: '#ff7800',
								strokeColor: '#ab5000',
								fillOpacity: 0.3,
								strokeOpacity: 0.9,
								zIndex: 99999
							});
						<? endif ; ?>
					});

				<? endforeach; ?>

			}
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
	</head>
	<body>
		<div id="map_canvas"></div>
	</body>
</html>
