Improve routing interface and functionalities

* fix POI clicking
* create a nominatim widget to get coordinates from text
* create a JQuery UI button select widget
* create a routing form to get itinerary from a textual form
* CSS for the routing form
* Reverse nominatim: when a point is get for routing on the map
  label for this point is get from nominatim
* Add transport management by user choice
* Update french translation

4 files changed, 205 insertions, 55 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index dec91e6..ceb3b60 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -411,36 +411,69 @@ ul#share li{
     top:50px;
     right:18px;
     width:300px;
-    bottom:44px;
+    max-height:300px;
     overflow:auto;
     padding:0.5em;
     padding-top:0;
 }
 
-#chimere_itinerary table
+#chimere_itinerary_panel,
+#chimere_itinerary{
+    display:none;
+}
+
+#chimere_itinerary_panel label{
+    color:#000;
+}
+
+#chimere_itinerary_panel p
+{
+    margin:0.5em;
+}
+
+.itinerary_label{
+    font-size:0.9em;
+    padding-top:0.5em;
+     font-style:italic;
+}
+
+.itinerary_label.label{
+  font-style:normal;
+  font-weight:bold;
+}
+
+
+#chimere_itinerary_content{
+    overflow:auto;
+    height:190px;
+    margin-top:10px;
+}
+
+#chimere_itinerary_content table
 {
     border-collapse:collapse;
 }
 
-#chimere_itinerary td{
-    border:8px solid #fff;
+#chimere_itinerary_content table td{
+    border:1px solid #333;
 }
 
-#chimere_itinerary td.l{
+#chimere_itinerary_content td.l{
     padding:5px;
     width:60px;
 }
 
-#chimere_itinerary td.r{
+#chimere_itinerary_content td.r{
     font-size:0.8em;
+    padding:0.8em;
 }
 
-#chimere_itinerary span.j{
+#chimere_itinerary_content span.j{
     font-style:italic;
 }
 
-#chimere_itinerary span.t,
-#chimere_itinerary span.b
+#chimere_itinerary_content span.t,
+#chimere_itinerary_content span.b
 {
     text-transform: lowercase;
 }
@@ -476,6 +509,13 @@ ul#share li{
     background-color:#ccc;
 }
 
+.nominatim-label{
+    display:block;
+    font-size:0.9em;
+    font-weight:bold;
+    height:2.8em;
+}
+
 .simple #panel{
     top:5px;
 }
diff --git a/chimere/static/chimere/img/images_licences b/chimere/static/chimere/img/images_licences
index 03d63dc..cbc9307 100644
--- a/chimere/static/chimere/img/images_licences
+++ b/chimere/static/chimere/img/images_licences
@@ -1,5 +1,5 @@
 
-* Upload image credit
+* Upload image credit (upload.png)
 
     * Farm-Fresh layer gps.png in Farm-Fresh Web Icons
 Author: FatCow Web Hosting
@@ -16,7 +16,7 @@ Author: The Tango! Desktop Project
 Licence: Public domain
 Url: http://commons.wikimedia.org/wiki/File:Internet-web-browser.svg
 
-* Drawing image credit
+* Drawing image credit (drawing.png)
 
     * Icons from the Tango! project set.
 Author: The Tango! Desktop Project
@@ -24,7 +24,7 @@ Licence: Public domain
 Url: http://commons.wikimedia.org/wiki/File:Edit-find-replace.svg
 Url 2: http://commons.wikimedia.org/wiki/File:Internet-web-browser.svg
 
-* Quaver image credit
+* Quaver image credit (8thNote.png)
 
     *   An 8th-note.
 Author: Sbrools
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 7676517..ff90f28 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -171,6 +171,40 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             }
             settings.map.setBaseLayer(
                             settings.map_layers[settings.selected_map_layer]);
+
+            /* manage the context menu  */
+            $('#map_menu_zoomin').bind("click", methods.zoomIn);
+            $('#map_menu_zoomout').bind("click", methods.zoomOut);
+            $('#map_menu_center').bind("click", methods.mapCenter);
+            /* manage the routing */
+            if (settings.routing){
+                settings.routing_start = null;
+                settings.routing_steps = new Array();
+                settings.routing_end = null;
+                settings.icon_start = new OpenLayers.Icon(
+                    STATIC_URL + "chimere/img/flag-start.png",
+                    new OpenLayers.Size(32, 32),
+                    new OpenLayers.Pixel(0, -32));
+                settings.icon_step = new OpenLayers.Icon(
+                    STATIC_URL + "chimere/img/flag-step.png",
+                    new OpenLayers.Size(32, 32),
+                    new OpenLayers.Pixel(0, -32));
+                settings.icon_end = new OpenLayers.Icon(
+                    STATIC_URL + "chimere/img/flag-finish.png",
+                    new OpenLayers.Size(32, 32),
+                    new OpenLayers.Pixel(0, -32));
+                $('#map_menu_from').bind("click", methods.routingFrom);
+                $('#map_menu_step').bind("click", methods.routingAddStep);
+                $('#map_menu_to').bind("click", methods.routingTo);
+                $('#map_menu_clear').bind("click", methods.routingClear);
+                settings.layerRoute = new OpenLayers.Layer.Vector("Route Layer");
+                settings.map.addLayer(settings.layerRoute);
+                settings.layerRoute.setOpacity(0.8);
+                settings.layerRouteMarker = new OpenLayers.Layer.Markers(
+                                                               'Route markers');
+                settings.map.addLayer(settings.layerRouteMarker);
+                settings.layerRouteMarker.setOpacity(0.8);
+            }
             /* Vectors layer */
             settings.layerVectors = new OpenLayers.Layer.Vector("Vector Layer");
             settings.map.addLayer(settings.layerVectors);
@@ -226,37 +260,6 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                         settings.layerVectors, helpers.featureRouteCreated);
                 }
             }
-            $('#map_menu_zoomin').bind("click", methods.zoomIn);
-            $('#map_menu_zoomout').bind("click", methods.zoomOut);
-            $('#map_menu_center').bind("click", methods.mapCenter);
-            if (settings.routing){
-                settings.routing_start = null;
-                settings.routing_steps = new Array();
-                settings.routing_end = null;
-                settings.icon_start = new OpenLayers.Icon(
-                    STATIC_URL + "chimere/img/flag-start.png",
-                    new OpenLayers.Size(32, 32),
-                    new OpenLayers.Pixel(0, -32));
-                settings.icon_step = new OpenLayers.Icon(
-                    STATIC_URL + "chimere/img/flag-step.png",
-                    new OpenLayers.Size(32, 32),
-                    new OpenLayers.Pixel(0, -32));
-                settings.icon_end = new OpenLayers.Icon(
-                    STATIC_URL + "chimere/img/flag-finish.png",
-                    new OpenLayers.Size(32, 32),
-                    new OpenLayers.Pixel(0, -32));
-                $('#map_menu_from').bind("click", methods.routingFrom);
-                $('#map_menu_step').bind("click", methods.routingAddStep);
-                $('#map_menu_to').bind("click", methods.routingTo);
-                $('#map_menu_clear').bind("click", methods.routingClear);
-                settings.layerRoute = new OpenLayers.Layer.Vector("Route Layer");
-                settings.map.addLayer(settings.layerRoute);
-                settings.layerRoute.setOpacity(0.8);
-                settings.layerRouteMarker = new OpenLayers.Layer.Markers(
-                                                               'Route markers');
-                settings.map.addLayer(settings.layerRouteMarker);
-                settings.layerRouteMarker.setOpacity(0.8);
-            }
         }, // end of init
 
         // zoom in from the map menu
@@ -281,7 +284,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
         * Display menu on the map
         */
         displayMapMenu: function(e) {
-            helpers.hidePopup();
+            if (helpers.hidePopup()) return;
             if ($('#chimere_map_menu').is(":visible")){
                 $('#chimere_map_menu').hide();
             } else{
@@ -460,7 +463,6 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                         if (settings.current_popup == feature.popup) {
                             feature.popup.hide();
                             if (!settings.simple){
-                                $('#panel').removeClass('panel-minified');
                                 $('#detail').hide();
                             }
                         } else {
@@ -520,23 +522,51 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             settings.current_feature.geometry = linestring;
             settings.layerVectors.addFeatures([settings.current_feature]);
         },
+        routingInputChange: function(){
+            $('#map_menu_clear').show();
+            if ($('#nominatim_start_lon').val()){
+                settings.routing_start = new OpenLayers.Marker(
+                  new OpenLayers.LonLat($('#nominatim_start_lon').val(),
+                                        $('#nominatim_start_lat').val()
+                                        ).transform(EPSG_DISPLAY_PROJECTION,
+                                            settings.map.getProjectionObject()),
+                                      settings.icon_start);
+                settings.layerRouteMarker.addMarker(settings.routing_start);
+            }
+            if ($('#nominatim_end_lon').val()){
+                settings.routing_end = new OpenLayers.Marker(
+                  new OpenLayers.LonLat($('#nominatim_end_lon').val(),
+                                        $('#nominatim_end_lat').val()
+                                        ).transform(EPSG_DISPLAY_PROJECTION,
+                                            settings.map.getProjectionObject()),
+                                      settings.icon_end);
+                settings.layerRouteMarker.addMarker(settings.routing_end);
+            }
+            if (settings.routing_end && settings.routing_start) methods.route();
+        },
+
         // set the start point for routing
         routingFrom: function(){
             $('#chimere_map_menu').hide();
+            $('#chimere_itinerary_panel').dialog('open');
             $('#map_menu_clear').show();
-            $('#chimere_itinerary_panel').dialog('close');
             settings.routing_start = new OpenLayers.Marker(
                                           settings.current_position.clone(),
                                           settings.icon_start);
             settings.layerRouteMarker.addMarker(settings.routing_start);
+            if (nominatim_url){
+                helpers.updateNominatimName(settings.current_position.clone()
+                                 .transform(settings.map.getProjectionObject(),
+                                            EPSG_DISPLAY_PROJECTION),
+                                            'start_label');
+            }
             if (settings.routing_end) methods.route();
         },
-
         // add a step point for routing
         routingAddStep: function(){
             $('#chimere_map_menu').hide();
+            $('#chimere_itinerary_panel').dialog('open');
             $('#map_menu_clear').show();
-            $('#chimere_itinerary_panel').dialog('close');
             settings.routing_steps.push(new OpenLayers.Marker(
                                           settings.current_position.clone(),
                                           settings.icon_step.clone()));
@@ -548,20 +578,36 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
         // set the finish point for routing
         routingTo: function(){
             $('#chimere_map_menu').hide();
+            $('#chimere_itinerary_panel').dialog('open');
             $('#map_menu_clear').show();
-            $('#chimere_itinerary_panel').dialog('close');
             settings.routing_end = new OpenLayers.Marker(
                                           settings.current_position.clone(),
                                           settings.icon_end);
             settings.layerRouteMarker.addMarker(settings.routing_end);
+            if (nominatim_url){
+                helpers.updateNominatimName(settings.current_position.clone()
+                                 .transform(settings.map.getProjectionObject(),
+                                            EPSG_DISPLAY_PROJECTION),
+                                            'end_label');
+            }
             if (settings.routing_start) methods.route();
         },
 
         // clear the current itinerary
         routingClear: function(){
+            $('#nominatim_start_lon').val('');
+            $('#nominatim_start_lat').val('');
+            $('#nominatim_start_label').html('');
+            $('#chimere_start_label').html('');
+            $('#nominatim_end_lon').val('');
+            $('#nominatim_end_lat').val('');
+            $('#nominatim_end_label').html('');
+            $('#chimere_end_label').html('');
+            $('.nominatim-widget').val('');
             $('#chimere_map_menu').hide();
             $('#map_menu_clear').hide();
-            $('#chimere_itinerary_panel').dialog('close');
+            $('#chimere_itinerary').hide();
+            $('#chimere_itinerary_form').show();
             settings.layerRoute.removeAllFeatures();
             settings.layerRouteMarker.clearMarkers();
             settings.routing_start = null;
@@ -581,6 +627,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             steps.push(settings.routing_end.lonlat.clone());
             // create the appropriate URL
             var uri = extra_url + "route/"
+            var transport = $('input:radio[name=transport]:checked').val();
+            uri += transport + "/"
             for (var i = 0; i < steps.length; i++) {
                 var step = steps[i].transform(
                                             settings.map.getProjectionObject(),
@@ -597,8 +645,13 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                         for (var i = 0; i < data.features.length; i++) {
                             methods.putRoute(data.features[i]);
                         }
-                        $('#chimere_itinerary').html(
+                        settings.map.zoomToExtent(
+                                settings.layerRoute.getDataExtent());
+                        settings.map.zoomOut();
+                        $('#chimere_itinerary_content').html(
                                             data.properties.description);
+                        $('#chimere_itinerary').show();
+                        $('#chimere_itinerary_form').hide();
                         $('#chimere_itinerary_panel').dialog('open');
                     },
                     error: function (data) {
@@ -645,7 +698,6 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                             }
                             else {
                                 if (!settings.simple) {
-                                    $('#panel').addClass('panel-minified');
                                     $('#detail').html(data).show();
                                 }
                                 else {
@@ -818,13 +870,16 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             else { // Default behaviour
                 if (settings.current_popup)
                 {
-                    settings.current_popup.hide();
                     if (!settings.simple){
-                        $('#panel').removeClass('panel-minified');
                         $('#detail').hide();
                     }
+                    if (settings.current_popup.visible()){
+                        settings.current_popup.hide();
+                        return true;
+                    }
                 }
             }
+            return false;
         },
         getSubcategories: function (category_id) {
             if(settings.get_subcategories_fx) {
@@ -949,8 +1004,22 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             if (vertices){
                 jQuery('#id_point').val(vertices);
             }
+        },
+        updateNominatimName:function(lonlat, response_id){
+            $.ajax({
+                url: nominatim_url.substring(0, nominatim_url.length-6) + 'reverse',
+                data: {
+                    format: "json",
+                    lat:lonlat.lat,
+                    lon:lonlat.lon
+                },
+                success: function (data) {
+                    vals = $.parseJSON(data);
+                    $('#nominatim_'+response_id).html(vals.display_name);
+                    $('#chimere_'+response_id).html(vals.display_name);
+                }
+            });
         }
-
     }; // End of helpers
 
     $.fn.chimere = function (thing) {
diff --git a/chimere/static/chimere/js/nominatim-widget.js b/chimere/static/chimere/js/nominatim-widget.js
new file mode 100644
index 0000000..fea654d
--- /dev/null
+++ b/chimere/static/chimere/js/nominatim-widget.js
@@ -0,0 +1,41 @@
+
+$(function(){
+    $(".nominatim-widget").autocomplete({
+           source: function (request, response) {
+               $.ajax({
+                      url: nominatim_url,
+                      data: {
+                          format: "json",
+                          q: request.term,
+                      },
+                      success: function ( data ) {
+                          response ( $.map( $.parseJSON(data), function( item ) {
+                              return {
+                                  label: item.display_name,
+                                  value: item.display_name,
+                                  lat: item.lat,
+                                  lon: item.lon
+                              }}));
+
+                          }
+                      })
+            },
+            minLength: 6,
+            delay: 1000,
+            select: function ( event, ui ) {
+                $('#'+$(this).attr('id')+'_lat').val(ui.item.lat);
+                $('#'+$(this).attr('id')+'_lon').val(ui.item.lon);
+                $('#'+$(this).attr('id')+'_label').html(ui.item.label);
+                $('#chimere_'+$(this).attr('id').substring(10)+'_label').html(ui.item.label);
+                $('#'+$(this).attr('id')).val('');
+                jQuery("#map").chimere("routingInputChange");
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }
+    });
+});