<?php
echo $this->Html->script('https://maps.googleapis.com/maps/api/js?sensor=false', array('inline' => false));
?>

<div class="alignCenter bottomBorder marginBot36">
    <div class="widthContainer padBot18 padTopt18">
        <?php echo $this->Html->image('icon-round-marker-pink.png', array('class'=>'midAlignImg'));?>
    </div>
    <div class="widthContainer fontTwentySeven padBot18">
        Which locations do you cover?
    </div>
    <div class="singleColForm alignLeft fontFourteen" style="border:none">
    	<div class="left"><?php echo $this->Html->image('mileradius.png');?></div>
        <div class="right" id="sliderHolder">
        	<div id="slider"></div>
        </div>
        <div style="clear:both;height:18px"></div>
        <div id="map-canvas"></div>
        <div id="map-numOf-miles" class="alignCenter fontPurple fontNineteen">0 Miles</div>
    </div>
    <div class="addButton strong">ADD</div>
</div>
<?php // hidden inputs for locations
echo $this->Form->hidden('miles', array('id'=>'miles'));
echo $this->Form->hidden('location', array('id'=>'location'));
?>




<script type="text/javascript">
$(document).ready(function() {


	//User clicks to add location
	$(".addButton").click(function() {
		$.post( "<?php echo $this->webroot;?>locations/add", { name: "John", time: "2pm" })
				.done(function( data ) {
				alert( "Data Loaded: " + data );
		   });
	});

	//Google Maps
		var userLocation = "London";
        var geocoder = new google.maps.Geocoder();
        var circle;
        var latLng;
        var marker;

        $( "#slider" ).slider({
            slide: function(event, ui) {
                $("#map-numOf-miles").html(ui.value+' Miles');
				$("#miles").val(ui.value);
                circle.setRadius(ui.value/0.0621371192*100);
            }
        });

            //Google Maps
            function initialize() {
				var styles = [
				  {
						stylers: [
						  { hue: "#00ffe6" },
						  { saturation: -20 }
						]
				  }
				];

				geocoder.geocode( {"address": userLocation}, function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
							latLng = results[0].geometry.location;
							//alert (latLng);
							var mapOptions = {
							  center: latLng,
							  zoom: 6,
							  styles: styles,
							  mapTypeId: google.maps.MapTypeId.ROADMAP
							};

							map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

							marker = new google.maps.Marker({
								map: map,
								position: latLng,
								draggable: true
							});

							circle = new google.maps.Circle({
								map: map,
								radius: 0, //your radius in meters
								strokeColor: '#d12d87',
								strokeOpacity: 0.35,
								strokeWeight: 2,
								fillColor: '#d12d87',
								fillOpacity: 0.35,
								center: latLng
							});


						$("#location").val(results[0].geometry.location);
						google.maps.event.addListener(marker, "dragend", function(){
								var position = marker.getPosition();
								map.setCenter(position);
								//update the hidden form with the new location
								$("#location").val(position.lat() + " ," + position.lng());
								//reverse geocode the latlng to get human readable address
								var latlng = new google.maps.LatLng(position.lat(), position.lng());
								  geocoder.geocode({'latLng': latlng}, function(results, status) {
									if (status == google.maps.GeocoderStatus.OK) {
									  if (results[1]) {
										  alert(results[1].formatted_address);
										map.setZoom(11);
										marker = new google.maps.Marker({
											position: latlng,
											map: map
										});
										infowindow.setContent(results[1].formatted_address);
										infowindow.open(map, marker);
									  } else {
										alert('No results found');
									  }
									} else {
									  alert('Geocoder failed due to: ' + status);
									}
								  });

						});
						google.maps.event.addListener(marker, "drag", function(){
								circle.setCenter(marker.getPosition());
						});
					} else {
					   alert("Geocode failed. Please edit your address (top of the page) and try again.");
					}
             });
         }
        google.maps.event.addDomListener(window, "load", initialize);


});
</script>