@(sensors: List[play.api.libs.json.JsValue])(implicit user: Option[models.User])
@import services._
@import play.api.libs.json.Json

@main("Sensors Map") {

 <link rel="stylesheet" href="@routes.Assets.at("stylesheets/leaflet.css")">
 <!--[if lte IE 8]>
     <link rel="stylesheet" href="@routes.Assets.at("stylesheets/leaflet.ie.css")">
 <![endif]-->
 <script src="@routes.Assets.at("javascripts/leaflet-src.js")" type="text/javascript"></script>

	<div class="page-header">
		<h1>@(AppConfiguration.getSensorsTitle)</h1>
	</div>
	<div class="row">
		<div class="col-md-10">
			<div id="geostreams_map"></div>
		</div>
		<div class="col-md-2">
			<h3>Streams</h3>
			<div id="list_streams"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12" style="padding-top:30px">
			<h3>Datapoints</h3>
			<pre id="datapoints" class="pre-scrollable"></pre>
		</div>
	</div>
}
<script language="javascript">
   $(function() {
	   var map = L.map('geostreams_map').setView([51.505, -0.09], 13);
	   
	   L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: 'Map data OpenStreetMap contributors',
	    maxZoom: 18
	   }).addTo(map);
	   	   
	   var geojsonMarkerOptions = {
		    radius: 3,
		    fillColor: "#ff7800",
		    color: "#000",
		    weight: 1,
		    opacity: 1,
		    fillOpacity: 0.8
		};

	   
	        // prefacing with HTML prevents Play from escaping quotes and other JSON characters
            var geojsonLayer = L.geoJson(@Html(Json.stringify(Json.toJson(sensors))), {

		        style: function (feature) {
			        var color = {fillColor: "#ff7800"};
			        var type = feature.properties.type;
		        	switch (type) {
			            case 'epa':
			            	color = { fillColor: "#D53E4F"}; 
				            break;
			            case 'gsfmp':
			            	color = { fillColor: "#FC8D59"}; 
				            break;
			            case 'letg':
			            	color = { fillColor: "#99D594"}; 
				            break;
			            case 'usgs':
			            	color = { fillColor: "#3288BD"}; 
				            break;
				        default: color = {fillColor: "#ff7800"};
	                }
	                return color;
			    },
			    
			    pointToLayer: function (feature, latlng) {
			        return L.circleMarker(latlng, geojsonMarkerOptions);
			    },
			    
			    onEachFeature: function (feature, layer) {
			        layer.bindPopup(createPopup(feature, layer));
			    }
			    
			}).addTo(map);
 			map.fitBounds(geojsonLayer.getBounds());

	     function createPopup(feature, layer) {
			    var div = document.createElement('div');
		    	var link = document.createElement('a');
		    	link.innerHTML = "Streams";
		    	link.href = "#";
		    	link.onclick = function() {
				    listStreams(feature.id);
				};
				var info = document.createElement('div');
				info.innerHTML = 'Station: ' + feature.properties.popupContent +
                    '<br>Source: ' + feature.properties.type.id.toUpperCase();
				div.appendChild(info);
				div.appendChild(link);
				return div;
	     }

	     function listStreams(sensor_id) {
             var searchStreams = jsRoutes.api.Geostreams.getSensorStreams(sensor_id ).url;
	  	   var request = $.ajax({
               url: searchStreams,
		       type: 'GET',
		       contentType: "application/json",
		       dataType: 'json'
		     });

		  	 request.done(function (response, textStatus, jqXHR){
			  	 var listStreamsElement = $('#list_streams');
			  	listStreamsElement.empty();
			  	for (var i = 0; i < response.length; i++) {
					var stream_id = response[i]['stream_id']
			  		var stream_label = stream_id+" "+response[i]['name'];
			  		var link = document.createElement('a');
			    	link.href = "#";
			    	link.innerHTML = stream_label;
			    	link.onclick = function() {
					   listDatapoints(stream_id);
					};
			  	 listStreamsElement.append(link);
			  	 listStreamsElement.append(document.createElement('br'));
			  	}
		  	 });

	     	request.fail(function (jqXHR, textStatus, errorThrown){
		        console.error("The following error occured: " + textStatus, errorThrown);
		     });
		     
	     }

	     function listDatapoints(stream_id) {
		       var searchDatapointsURL = jsRoutes.api.Geostreams.searchDatapoints("", null, null, null, stream_id, null, null, null, "json").url;
               var request = $.ajax({
                   url: searchDatapointsURL,
			  	   type: 'GET',
			       contentType: "application/json",
			       dataType: 'json',
			     });

		  	 request.done(function (response, textStatus, jqXHR){
			  	var datapointsElement = $('#datapoints');
                datapointsElement.empty();
			  	datapointsElement.append(JSON.stringify(response, null, '   '));
		  	 });

	     	 request.fail(function (jqXHR, textStatus, errorThrown){
		        console.error(
		            "The following error occured: "+
		            textStatus, errorThrown  
		        );
		     });
	     }
   });
</script>