<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<script type="text/javascript">
	var map;
	//var latlngCity = new google.maps.LatLng(41.3850639, 2.1734035);
	var latlngCity = new google.maps.LatLng('<c:out value='${latAverage}'/>', '<c:out value='${lonAverage}'/>');
	function initialize() {
		var mapOptions = {
			zoom: 13,
			center: latlngCity,
			disableDefaultUI: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
	  	};
		map = new google.maps.Map(document.getElementById('map-container'), mapOptions);
	  
		<c:forEach var="pplace" items="${pPlaceList}" varStatus="status">
			putMarker('<c:out value='${pplace.name}'/>', '<c:out value='${pplace.latitud}'/>', '<c:out value='${pplace.longitud}'/>');
		</c:forEach>
	}
	
	function putMarker(name, lat, lon) {
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(lat, lon),
			map: map,
			title: name
		});
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div class="page-container">
	<div class="hub">
		<div id="search-header">
			<h1><span class="bold-part">${pPlaceSearchForm.where}</span> Parking</h1>
		</div>
		<div id="search-content">
			<div id="search-list">
				<div id="search-time-filters">
					<div class="datepair" id="search-time-container">
						<h3 id="search-time-label">Parking para<br><span id="search-filter-duration"></span></h3>
						<div id="search-time">
							<div id="search-time-start">
								<label for="start_time" class="time-label">De:</label>
								<input type="text" data-formatted-time="14:30" class="start time ui-timepicker-input" value="2:30pm" name="start_time" id="start_time" placeholder="time" autocomplete="off">
								<label for="start_date" class="date-label">en</label>
								<input type="text" data-formatted-date="2013-08-22" class="future start date" value="8/22/2013" name="start_date" id="start_date" placeholder="date">			</div>
							<div id="search-time-end">
								<label for="end_time" class="time-label">Hasta:</label>
								<input type="text" data-formatted-time="17:30" class="end time ui-timepicker-input" value="5:30pm" name="end_time" id="end_time" placeholder="time" autocomplete="off">
								<label for="end_date" class="date-label">en</label>
								<input type="text" data-formatted-date="2013-08-22" class="future end date" value="8/22/2013" name="end_date" id="end_date" placeholder="date">
							</div>
						</div>
					</div>
				</div>
				<div id="parking-rows-container">
					<c:choose>
						<c:when test="${not empty pPlaceList}">
							<div id="parking-rows">
								<c:forEach var="pplace" items="${pPlaceList}" varStatus="status">
									<a data-lng="${pplace.longitud}" data-lat="${pplace.latitud}" id="${pplace.id}" class="listing-row has-parking" href="/parkandsave/parkingPlace/get/${pplace.id}">
										<div class="listing-title"><c:out value="${pplace.name}"/></div>
										<div class="listing-address"><c:out value="${pplace.address}"/></div>
									</a>
								</c:forEach>
							</div>
						</c:when>
						<c:otherwise>
							<div id="no-parking-container">
								<h3>No parking available</h3>
								<p>No se han encontrado plazas de aparcamiento para los criteriors informados.</p>
							</div>
						</c:otherwise>
					</c:choose>
				</div>
			</div>
			<div id="search-map-container">
				<div id="search-map-shadow"></div>
				<div id="map-container" style="background-color: #E5E3DF; height: 100%; overflow: hidden; position: relative; width: 866px"></div>
			</div>
		</div>
	</div>
</div>