map.scala.html

@sidebar = {
<h3>Layers</h3>
<form class="form-vertical" id="layersForm">
</form>

<div id="newVehicle" class="alert alert-block alert-info fade in hide">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="alert-heading">A new vehicle has joined the race!</h4>
  <p id="vehicleName"></p>
</div>
}

@css = {
<style TYPE="text/css">
/* A small hack to hide an unwanted dialog box */
div.olLayerGoogleCopyright {
  display: none !important;
}
</style>
}

@javascript = {

<script src="@routes.Assets.at("openlayers/OpenLayers.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/maptracker.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/twitterbootstrap/bootstrap-alert.js")" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
<script type="text/javascript">

$(document).ready(function() {
	
	// hidable alert thanks to Twitter Bootstrap
	$(".alert").alert();
	
	// map initialization
	var map = initMap();
	
	var markers = new Array();
	
	// open a WebSocket
	var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
    var mapSocket = new WS("@routes.Application.mapsocket().webSocketURL(request)");
	
	mapSocket.onmessage = function(event) {
        var move = JSON.parse(event.data);
        
        var marker = null;
        // search the marker
        $.each(markers,
        		function(intIndex, objValue){
		        	if (move.id == objValue.id) {
		        		marker = objValue;
		        	}
        });
        if (marker == null) {
        	// create the marker
        	marker = createMarker(map, move.id, move.longitude, move.latitude);
        	
        	// and add it to the list of marker
        	markers.push(marker);
        	
        	// tell the user that we have a new vehicle
        	$("#newVehicle").removeClass("hide");
        	$("#vehicleName").text("And its name is \"" + move.id + "\" !");
        	window.setTimeout(function() {
        	    $("#newVehicle").fadeTo(500, 0).slideUp(500, function(){
        	        $(this).addClass("hide"); 
        	    });
        	}, 5000);
        	
        	
        } else {
        	marker = moveMarker(map, marker, move.id, move.longitude, move.latitude);
        }
        
    }
	
	// if errors on websocket
	var onalert = function(event) {
        $(".alert").removeClass("hide");
    } 
	
	mapSocket.onerror = onalert;
	mapSocket.onclose = onalert;
    
});
</script>
}

@main("Welcome to the MapTracker !")(sidebar)(javascript)(css) {

    <h2>Map</h2>
    
    <div class="alert alert-block alert-error fade in hide">
      <a class="close" data-dismiss="alert" href="#">×</a>
      <h4 class="alert-heading">Oh snap! You got an error!</h4>
      <p>The server seems to be down :(</p>
    </div>
    
    <div id="map" style="width: 600px; height: 450px">
    </div>

}