<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<script type="text/javascript">
//Autocompletado del campo "address"
	function streetBindFunction() {
		var mapOptions = {
		    center: new google.maps.LatLng(-33.8665433, 151.1956316),
		    zoom: 13,
		    mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById('mapRegisterForm'), mapOptions);	
	
		var input = document.getElementById('address_complet');
		var options = {
		  types: ['geocode'],
		  componentRestrictions: {country: 'es'}
		};
		var autocomplete = new google.maps.places.Autocomplete(input, options);
		
		autocomplete.bindTo('bounds', map);
		var infowindow = new google.maps.InfoWindow();
		var marker = new google.maps.Marker({
			map: map
		});
		
		google.maps.event.addListener(autocomplete, 'place_changed', function() {
			infowindow.close();
			marker.setVisible(false);
			input.className = '';
			var place = autocomplete.getPlace();
			if (!place.geometry) {
				// Inform the user that the place was not found and return.
			  	input.className = 'notfound';
			  	return;
			}
		    // If the place has a geometry, then present it on a map.
		    if (place.geometry.viewport) {
		    	map.fitBounds(place.geometry.viewport);
		    } else {
		      	map.setCenter(place.geometry.location);
		      	map.setZoom(17);  // Why 17? Because it looks good.
		    }
		    marker.setIcon(/** @type {google.maps.Icon} */({
		    	url: place.icon,
		        size: new google.maps.Size(71, 71),
		        origin: new google.maps.Point(0, 0),
		        anchor: new google.maps.Point(17, 34),
		        scaledSize: new google.maps.Size(35, 35)
			}));
		    marker.setPosition(place.geometry.location);
		    marker.setVisible(true);
		    var address = '';
		    if (place.address_components) {
		    	address = [
		        	(place.address_components[0] && place.address_components[0].short_name || ''),
		        	(place.address_components[1] && place.address_components[1].short_name || ''),
		        	(place.address_components[2] && place.address_components[2].short_name || '')
		      	].join(' ');
		    }
			
		    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
		    infowindow.open(map, marker);
	        
	        //Se autocompletan campos del formulario con el valor seleccionado
	        document.getElementById('address').value = place.name;
	        if(place.address_components){
	        	for(var i = 0; i < place.address_components.length; i++){
	        	    var ac = place.address_components[i];
	        	    if (ac.types.indexOf("locality") > -1)
				        document.getElementById('city').value = ac.long_name;
	        	    else if (ac.types.indexOf("postal_code") > -1)
				        document.getElementById('zipCode').value = ac.long_name;
	        	    else if (ac.types.indexOf("street_address") > -1)
				        document.getElementById('address').value = ac.long_name;
	        	  }
	        } 
	        if(place.geometry){
		        document.getElementById('latitud').value=place.geometry.location.lat();
		        document.getElementById('longitud').value=place.geometry.location.lng();
	        } 
	    });
	}
	
	//Autocompletado del campo "city"
	function cityBindFunction() {
		var input = document.getElementById('city');
		var options = {
		  types: ['(cities)'],
		  componentRestrictions: {country: 'es'},
		  region: ['(ES)']
		};
		var autocomplete = new google.maps.places.Autocomplete(input, options);
	}

	//Autocompletado del campo "zipCode"
	function zipBindFunction() {
		var input = document.getElementById('zipCode');
		var options = {
		  types: ['(regions)'],
		  componentRestrictions: {country: 'es'},
		  region: ['(ES)']
		};
		var autocomplete = new google.maps.places.Autocomplete(input, options);
	}

	function initialize() {
		cityBindFunction();
		streetBindFunction();
		zipBindFunction();
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="page-container">
	<div id="parking-register-header">
		<h1 style="display:inline;">Registrar plaza aparcamiento</h1>
	</div>
	
	<div id="parking-register-content">
		<div id="parking-resbox" class="raised-box">
			<input type="text" size="250" id="address_complet" name="address_complet" path="address_complet" placeholder="Busca una dirección" autocomplete="off"/>
			<div id="mapRegisterForm" class="event-complete" style="background-color: rgb(229, 227, 223); overflow: hidden; position: relative; height: 300px;"></div>
		</div>
	</div>
	
	<div id="parking-register-right-rail">
		<div class="parking-register-form">
			<c:if test="${not empty param.error}">  
			  <font color='red'>
			    Datos enviados con error.
			  </font>
			</c:if>
			<form:form id="registerForm" method="post" commandName="pPlaceForm" action="add">
				<fieldset>
					<label>Nombre:</label>
					<input type="text" size="150" id="name" name="name" path="name">
				</fieldset>
				<fieldset>
					<label>País:</label>
					<input type="text" size="150" id="country" name="country" path="country" value="España" readonly>
				</fieldset>
				<fieldset>
					<label>Dirección:</label>
					<input type="text" size="150" id="address" name="address" path="address" placeholder="Introduzca una dirección" autocomplete="off">
				</fieldset>
				<fieldset>
					<label>Ciudad:</label>
					<input type="text" size="150" id="city" name="city" path="city" placeholder="Introduzca un ciudad" autocomplete="off">
				</fieldset>
				<fieldset>
					<label>C.P.:</label>
					<input type="text" size="5" maxlength="5" id="zipCode" name="zipCode" path="zipCode" placeholder="Introduzca un código postal" autocomplete="off">
				</fieldset>
				<fieldset>
					<label>Latitud:</label>
					<input type="text" id="latitud" name="latitud" path="latitud">
				</fieldset>
				<fieldset>
					<label>Longitud:</label>
					<input type="text" id="longitud" name="longitud" path="longitud">
				</fieldset>
				<div class="btn-toolbar">
					<button data-loading-text="Esperando..." class="btn btn-large btn-success" type="submit">Enviar</button>
				</div>
			</form:form>
		</div>
	</div>
</div>