Dynamic loading of categories #80 - Reactivate the check-all button #81

git-svn-id: http://www.peacefrogs.net/svn/chimere/trunk@66 9215b0d5-fb2c-4bbd-8d3e-bd2e9090e864

9 files changed, 306 insertions, 116 deletions

diff --git a/chimere/main/models.py b/chimere/main/models.py
index 60a5837..c977446 100644
--- a/chimere/main/models.py
+++ b/chimere/main/models.py
@@ -126,6 +126,9 @@ class SubCategory(models.Model):
         for sub_category in subcategories:
             if sub_category.category not in sub_categories:
                 sub_categories[sub_category.category] = []
+            if sub_category.id in settings.DEFAULT_CATEGORIES:
+                sub_category.selected = True
+                sub_category.category.selected = True
             sub_categories[sub_category.category].append(sub_category)
         return [(category, sub_cats) for category, sub_cats \
                                          in sub_categories.items()]
@@ -222,16 +225,6 @@ class Route(models.Model):
         ordering = ('subcategory__category', 'subcategory', 'status', 'name')
         verbose_name = _("Route")
 
-    def getLatitude(self):
-        '''Return the latitude
-        '''
-        return self.point.y
-
-    def getLongitude(self):
-        '''Return the longitude
-        '''
-        return self.point.x
-
     def getProperty(self, propertymodel, safe=None):
         """Get the property of an associated property model.
         If safe set to True, verify if the property is available
@@ -265,7 +258,82 @@ class Route(models.Model):
 "color":"%(color)s"}}""" % {'id':self.id, 'name':self.name,
 'color':color, 'geometry':self.route.geojson,}
 
-class Area(models.Model):
+class SimplePoint:
+    """
+    Point in the map (not in the database)
+    """
+    def __init__(self, x, y):
+        self.x, self.y = x, y
+
+class SimpleArea:
+    """
+    Rectangular area of a map (not in the database)
+    """
+    def __init__(self, area):
+        """
+        Defining upper left corner ans lower right corner from a tuple
+        """
+        assert len(area) == 4
+        x1, y1, x2, y2 = area
+        self.upper_left_corner = SimplePoint(x1, y1)
+        self.lower_right_corner = SimplePoint(x2, y2)
+
+    def isIn(self, area):
+        """
+        Verify if the current area is in the designated area
+        """
+        if self.upper_left_corner.x >= area.upper_left_corner.x and \
+           self.upper_left_corner.y <= area.upper_left_corner.x and \
+           self.lower_right_corner.x <= area.lower_right_corner.x and \
+           self.lower_right_corner.y >= area.lower_right_corner.y:
+            return True
+        return False
+
+    def getCategories(self, status='A'):
+        """
+        Get categories for this area
+        """
+        equal_status = ''
+        if len(status) == 1:
+            equal_status = "='%s'" % status[0]
+        else:
+            equal_status = " in ('%s')" % "','".join(status)
+        area = "ST_GeometryFromText('POLYGON((%f %f,%f %f,%f %f,%f %f, %f %f))'\
+, %d)" % (self.upper_left_corner.x, self.upper_left_corner.y,
+          self.lower_right_corner.x, self.upper_left_corner.y,
+          self.lower_right_corner.x, self.lower_right_corner.y,
+          self.upper_left_corner.x, self.lower_right_corner.y,
+          self.upper_left_corner.x, self.upper_left_corner.y,
+          settings.EPSG_DISPLAY_PROJECTION
+          )
+        sql_main = '''select subcat.id as id, subcat.category_id as category_id,
+subcat.name as name, subcat.available as available, subcat.icon_id as icon_id,
+subcat.color_theme_id as color_theme_id, subcat.order as order,
+subcat.item_type as item_type from main_subcategory subcat'''
+        sql = sql_main + '''
+inner join main_marker mark on mark.subcategory_id=subcat.id and mark.status%s
+and ST_Contains(%s, mark.point) where subcat.available = TRUE''' % (
+                                                             equal_status, area)
+        # django > 1.1
+        #subcats = SubCategory.objects.raw(sql)
+        from django.db import connection, transaction
+        cursor = connection.cursor()
+        cursor.execute(sql, [])
+        subcats = set()
+        for r in cursor.fetchall():
+            subcats.add(SubCategory.objects.get(id=r[0]))
+        sql = sql_main + '''
+inner join main_route rt on rt.subcategory_id=subcat.id and rt.status%s
+and (ST_Intersects(%s, rt.route) or ST_Contains(%s, rt.route))
+where subcat.available = TRUE''' % (equal_status, area, area)
+        # django > 1.1
+        #subcats += SubCategory.objects.raw(sql)
+        cursor.execute(sql, [])
+        for r in cursor.fetchall():
+            subcats.add(SubCategory.objects.get(id=r[0]))
+        return subcats
+
+class Area(models.Model, SimpleArea):
     """Rectangular area of the map
     """
     name = models.CharField(_("Name"), max_length=150)
diff --git a/chimere/main/views.py b/chimere/main/views.py
index 9de8f4b..f584702 100644
--- a/chimere/main/views.py
+++ b/chimere/main/views.py
@@ -22,6 +22,7 @@ Views of the project
 """
 
 import datetime
+from itertools import groupby
 
 from django.utils.translation import ugettext as _
 from django.shortcuts import render_to_response
@@ -32,23 +33,20 @@ from django.core import serializers
 from chimere import settings
 from chimere.main.actions import actions
 from chimere.main.models import Category, SubCategory, PropertyModel, Marker, \
-                                Route, News, Area, Color
+                                Route, News, SimpleArea, Area, Color
 
 from chimere.main.widgets import getMapJS, PointChooserWidget, \
                            RouteChooserWidget, URL_OSM_JS, URL_OSM_CSS
 from chimere.main.forms import MarkerForm, RouteForm, ContactForm, \
                                notifySubmission, notifyStaff
 
+base_response_dct = {'media_path':settings.MEDIA_URL,
+                     'extra_url':settings.EXTRA_URL,}
+
 def index(request):
     """
     Main page
     """
-    subcategories = SubCategory.getAvailable()
-    for cat, sub_cats in subcategories:
-        for sub_category in sub_cats:
-            if sub_category.id in settings.DEFAULT_CATEGORIES:
-                sub_category.selected = True
-                cat.selected= True
     extra = ""
     tab = " "*4
     for url in URL_OSM_CSS:
@@ -64,16 +62,14 @@ def index(request):
        request.session['last_visit'] != today:
         request.session['last_visit'] = today
         display_welcome = True
-    response_dct = {'actions':actions, 'action_selected':('view',),
-                    'error_message':'',
-                    'sub_categories':subcategories,
-                    'extra_head':extra + getMapJS(),
-                    'media_path':settings.MEDIA_URL,
-                    'extra_url':settings.EXTRA_URL,
-                    'welcome':welcome(request, display_welcome),
-                    'areas':Area.getAvailable(),
-                    'map_layer':settings.MAP_LAYER
-                    }
+    response_dct = base_response_dct
+    response_dct.update({'actions':actions, 'action_selected':('view',),
+                         'error_message':'',
+                         'extra_head':extra + getMapJS(),
+                         'welcome':welcome(request, display_welcome),
+                         'areas':Area.getAvailable(),
+                         'map_layer':settings.MAP_LAYER,
+                        })
     # manage permalink
     if request.GET:
         for key in ('zoom', 'lon', 'lat', 'display_submited'):
@@ -109,17 +105,17 @@ def edit(request):
         form = MarkerForm()
     # get the « manualy » declared_fields. Ie: properties
     declared_fields = form.declared_fields.keys()
-    response_dct = {'actions':actions, 'action_selected':('contribute', 'edit'),
+    response_dct = base_response_dct
+    response_dct.update({'actions':actions,
+                  'action_selected':('contribute', 'edit'),
                   'error_message':'',
-                  'media_path':settings.MEDIA_URL,
-                  'extra_url':settings.EXTRA_URL,
                   'map_layer':settings.MAP_LAYER,
                   'form':form,
                   'extra_head':form.media,
                   'sub_categories':SubCategory.getAvailable(['M', 'B']),
                   'point_widget':PointChooserWidget().render('point', None),
                   'properties':declared_fields
-                   }
+                   })
     # manualy populate the custom widget
     if 'subcategory' in form.data and form.data['subcategory']:
         response_dct['current_category'] = int(form.data['subcategory'])
@@ -146,18 +142,17 @@ def editRoute(request):
         form = RouteForm()
     # get the « manualy » declared_fields. Ie: properties
     declared_fields = form.declared_fields.keys()
-    response_dct = {'actions':actions,
-                    'action_selected':('contribute', 'edit_route'),
+    response_dct = base_response_dct
+    response_dct.update({'actions':actions,
+                  'action_selected':('contribute', 'edit_route'),
                   'error_message':'',
-                  'media_path':settings.MEDIA_URL,
                   'map_layer':settings.MAP_LAYER,
                   'form':form,
                   'extra_head':form.media,
-                  'extra_url':settings.EXTRA_URL,
                   'sub_categories':SubCategory.getAvailable(['R', 'B']),
                   'route_widget':RouteChooserWidget().render('route', None),
                   'properties':declared_fields
-                   }
+                   })
     # manualy populate the custom widget
     if 'subcategory' in form.data and form.data['subcategory']:
         response_dct['current_category'] = int(form.data['subcategory'])
@@ -175,8 +170,8 @@ def submited(request, action):
     """
     Successful submission page
     """
-    response_dct = {'actions':actions, 'action_selected':action,
-                    'media_path':settings.MEDIA_URL,}
+    response_dct = base_response_dct
+    response_dct.update({'actions':actions, 'action_selected':action,})
     return render_to_response('submited.html', response_dct)
 
 def contactus(request):
@@ -200,8 +195,9 @@ details.")
                 msg = _(u"Temporary error. Renew your message later.")
     else:
         form = ContactForm()
-    response_dct = {'actions':actions, 'action_selected':('contact',),
-             'media_path':settings.MEDIA_URL,'contact_form':form, 'message':msg}
+    response_dct = base_response_dct
+    response_dct = ({'actions':actions, 'action_selected':('contact',),
+                     'contact_form':form, 'message':msg})
     return render_to_response('contactus.html', response_dct)
 
 def getDetail(request, marker_id):
@@ -212,7 +208,8 @@ def getDetail(request, marker_id):
         marker = Marker.objects.filter(id=int(marker_id), status='A')[0]
     except (ValueError, IndexError):
         return HttpResponse('no results')
-    response_dct= {'media_path':settings.MEDIA_URL, 'marker':marker}
+    response_dct = base_response_dct
+    response_dct['marker'] = marker
     return render_to_response('detail.html', response_dct)
 
 def getDescriptionDetail(request, category_id):
@@ -223,13 +220,16 @@ def getDescriptionDetail(request, category_id):
         category = Category.objects.filter(id=int(category_id))[0]
     except (ValueError, IndexError):
         return HttpResponse('no results')
-    response_dct= {'media_path':settings.MEDIA_URL, 'category':category}
+    response_dct = base_response_dct
+    response_dct['category'] = category
     return render_to_response('category_detail.html', response_dct)
 
-def getGeoObjects(request, category_ids, status='A'):
+def getGeoObjects(request, category_ids, status):
     '''
-    Get the JSON for a route
+    Get the JSON for markers and routes
     '''
+    if not status:
+        status = 'A'
     status = status.split('_')
     try:
         query = Route.objects.filter(status__in=status,
@@ -258,3 +258,38 @@ def getGeoObjects(request, category_ids, status='A'):
         return HttpResponse('no results')
     data = '{"type": "FeatureCollection", "features":[%s]}' % ",".join(jsons)
     return HttpResponse(data)
+
+def getAvailableCategories(request, area=None, status='A', force=None):
+    '''
+    Get categories for a designed area
+    '''
+    if settings.DYNAMIC_CATEGORIES and not area:
+        return ""
+    response_dct = base_response_dct
+    if not settings.DYNAMIC_CATEGORIES:
+        subcategories = SubCategory.getAvailable()
+        response_dct['sub_categories'] = subcategories
+        return render_to_response('categories.html', response_dct)
+    default_message = "<p>%s</p>" % _("No category available in this area.")
+    if not status: # there must be a status
+        status = 'A'
+    try:
+        status = status.split('_')
+        area = area.replace('M', '-').replace('D', '.')
+        area = SimpleArea([float(pt) for pt in area.split('_')])
+    except:
+        # bad area format
+        return HttpResponse(default_message)
+    # if not force and area.isIn(SimpleArea(cookie.AREA):return
+    categories = area.getCategories(status)
+    if not categories:
+        return HttpResponse(default_message)
+    get_cat = lambda subcat: subcat.category
+    get_cat_order = lambda subcat: (subcat.category.order, subcat.category,
+                                    subcat.order)
+    categories = sorted(categories, key=get_cat_order)
+    subcategories = [(cat, list(subcats)) \
+                               for cat, subcats in groupby(categories, get_cat)]
+    response_dct['sub_categories'] = subcategories
+    return render_to_response('categories.html', response_dct)
+
diff --git a/chimere/settings.py b/chimere/settings.py
index 36c6858..f1a2e87 100644
--- a/chimere/settings.py
+++ b/chimere/settings.py
@@ -19,6 +19,8 @@ EPSG_PROJECTION = 900913
 EPSG_DISPLAY_PROJECTION = 4326
 # if you want to restrict the map to a defined bounding box set it here
 RESTRICTED_EXTENT = None
+# if you want a dynamic load of categories on the main map
+DYNAMIC_CATEGORIES = False
 
 # default id category to check on the map
 DEFAULT_CATEGORIES = [1]
diff --git a/chimere/static/base.js b/chimere/static/base.js
index cabdf2a..3c7c575 100644
--- a/chimere/static/base.js
+++ b/chimere/static/base.js
@@ -60,4 +60,4 @@ function zoomToCurrentExtent(map){
     else{
         return;
     }
-}
\ No newline at end of file
+}
diff --git a/chimere/static/main_map.js b/chimere/static/main_map.js
index 1849713..ee742a2 100644
--- a/chimere/static/main_map.js
+++ b/chimere/static/main_map.js
@@ -1,4 +1,4 @@
-/* Copyright (C) 2008  Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>
+/* Copyright (C) 2008-2010  Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as
@@ -18,34 +18,88 @@ See the file COPYING for details.
 
 /* main map */
 
-var current_cat;
+var current_cat = -1;
 
 /* open a category section */
-function toggleCategory(id){
-    old = document.getElementById('maincategory_' + current_cat)
+function toggleCategory(item){
+    var id = item.id.split('_').pop();
+    var old;
+    if (current_cat != -1){
+        old = document.getElementById('maincategory_' + current_cat);
+    } else {
+        img = document.getElementById('maincategory_img_' + id);
+        if (img.src.split('/').pop() == "minus.png"){
+            current_cat = id;
+            old = document.getElementById('maincategory_' + id);
+        }
+    }
     if(old){
         old.style.display = 'None';
         old_img = document.getElementById('maincategory_img_' + current_cat);
-        old_img.src = "/" + extra_url + "static/icons/plus.png";
+        old_img.src = media_path + "icons/plus.png";
     }
     if (id != current_cat){
         current_cat = id;
         document.getElementById('maincategory_' + current_cat).style.display = 'block';
         img = document.getElementById('maincategory_img_' + current_cat);
-        img.src = "/" + extra_url + "static/icons/minus.png";
+        img.src = media_path + "icons/minus.png";
     } else {
         current_cat = 0;
     }
 }
 
+/* reopen the current opened categories when a redraw occurs */
+function reOpenCurrent(){
+    if (current_cat){
+        document.getElementById('maincategory_' + current_cat).style.display = 'block';
+        img = document.getElementById('maincategory_img_' + current_cat);
+        img.src = media_path + "icons/minus.png";
+    }
+}
+
+function reCheckCategories(){
+    /* recheck categories when a redraw occurs */
+    if (!checked_categories){
+        return;
+    }
+    var checked_categories_ids = checked_categories.split('_');
+    inputs = window.document.forms["frm_categories"];
+    for (var i = 0; i < inputs.length; i++) {
+        input = inputs[i];
+        cat_id = input.name.split('_').pop();
+        if (checked_categories_ids.indexOf(cat_id) != -1){
+            input.checked = true;
+        }
+        if (input.id == 'display_submited' && display_submited == true){
+            input.checked = true;
+        }
+    }
+}
+
+/* get available subcategories for a designed category */
+function getSubcategories(category_id){
+    var ul = document.getElementById('maincategory_'+category_id);
+    var subcats = new Array();
+    for (i in ul.children){
+        var li = ul.children[i];
+        if (li.id){
+            subcats.push(li.id.split('_').pop());
+        }
+    }
+    return subcats;
+}
+
 /* check all the categories if clicked, unckeck if unclick */
-function checkAll(item, ids){
+function checkAll(item){
     check = false;
     if(item.checked == true){
         check = true;
     }
-    for (i in ids){
-        document.getElementById('category_'+ids[i]).checked = check;
+    id = item.id.split('_').pop();
+    var subcats = getSubcategories(id);
+    for (i in subcats){
+        var checkbox = document.getElementById('category_'+subcats[i]);
+        checkbox.checked = check;
     }
 }
 
@@ -122,13 +176,19 @@ function loadLayersFromJSON(layer_markers, layer_vectors, geo_objects){
 function zoomToArea(top, left, bottom, right){
     var bounds = new OpenLayers.Bounds(left, bottom, right, top);
     map.zoomToExtent(bounds, true);
+    loadCategories();
 }
 
 /* zoom to a desired category */
-function zoomToCategory(categorie_ids){
-    updateCheckedCategories();
+function zoomToCategory(category_id){
+    var sub_cats = getSubcategories(category_id).join('_');
+    zoomToSubCategory(sub_cats);
+}
+
+/* zoom to desired sub categories */
+function zoomToSubCategory(subcategory_ids){
     /* 0 stand for all categories */
-    var uri = "/" + extra_url + "getGeoObjects/" + categorie_ids;
+    var uri = "/" + extra_url + "getGeoObjects/" + subcategory_ids;
     if (display_submited) uri += "/A_S";
     OpenLayers.loadURL(uri, '', this, zoomToCategoryExtent);
 }
@@ -153,6 +213,28 @@ function zoomToCategoryExtent(response){
     }
     fakeLayerMarkers.destroy();
     fakeLayerVectors.destroy();
+    loadCategories();
+}
+
+/* update the categories with an AJAX request */
+function loadCategories(){
+    var current_extent = map.getExtent().transform(map.getProjectionObject(),
+                                                   epsg_display_projection);
+    current_extent = current_extent.toArray().join('_')
+    current_extent = current_extent.replace(/\./g, 'D');
+    current_extent = current_extent.replace(/-/g, 'M');
+    var uri = "/" + extra_url + "getAvailableCategories/" + current_extent;
+    if (display_submited) uri += "/A_S";
+    OpenLayers.loadURL(uri, '', this, updateCategories);
+}
+
+function updateCategories(response){
+    if (response.responseText.indexOf('no results') != -1) {
+        return;
+    }
+    document.getElementById('categories').innerHTML = response.responseText;
+    reCheckCategories();
+    reOpenCurrent();
 }
 
 /* load geo objects with an AJAX request */
@@ -282,6 +364,10 @@ var hidePopUp = function (evt) {
     }
 }
 
+var refreshMapItems = function (evt) {
+    loadCategories();
+}
+
 /* update current detail panel with an AJAX request */
 function updateDetail(pk){
     var uri = "/" + extra_url + "getDetail/" + pk;
@@ -379,6 +465,7 @@ function init(){
     map.addLayers([map_layer]);
 
     map.events.register('click', map, hidePopUp);
+    map.events.register('moveend', map, refreshMapItems);
 
     /* if from a permalink */
     if (p_zoom) {
@@ -409,5 +496,6 @@ function init(){
         /* if no extent in cookies zoom to default */
         map.setCenter(centerLonLat, 13);
     }
+    loadCategories();
     loadGeoObjects();
 }
diff --git a/chimere/static/styles.css b/chimere/static/styles.css
index 5e7e2cd..c6a0b97 100644
--- a/chimere/static/styles.css
+++ b/chimere/static/styles.css
@@ -13,11 +13,11 @@ border-radius: 10px;
 
 legend{
 font-weight:bold;
-color:#b400ff;
+color:#b400Ff;
 }
 
 a{
-color:#b400ff;
+color:#b400Ff;
 }
 
 h2{
@@ -28,7 +28,7 @@ margin-bottom:10px;
 padding:0;
 width:100%;
 color:white;
-background-color:#b400ff;
+background-color:#b488ff;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
@@ -41,7 +41,7 @@ border-radius: 4px 4px 0 0;
 }
 
 h3{
-color:#b400ff;
+color:#b488ff;
 }
 
 h4{
@@ -88,8 +88,8 @@ background-color:#FFF;
 }
 
 #action li.selected{
-background-color:#b400ff;
-border-color:#b400ff;
+background-color:#b488ff;
+border-color:#b488ff;
 color:white;
 }
 
@@ -242,7 +242,7 @@ right:18px;
 }
 
 .detail_footer a{
-color:#b400ff;
+color:#b488ff;
 padding:2px;
 background-color:#FFF;
 border:1px solid;
@@ -283,6 +283,7 @@ height:88%;
 
 #map{
 position:absolute;
+background-color:white;
 border:1px solid #888;
 margin:0px;
 padding:0px;
@@ -310,31 +311,42 @@ padding:10px;
 margin:0;
 }
 
-ul#categories{
+#categories{
 margin:0;
-padding:0 10px;
-overflow:auto;
+padding:0;
+width:290px;
 height:160px;
-width:270px;
+overflow:auto;
+}
+
+#categories input {
+padding: 0;
+margin:0;
+vertical-align: bottom;
+}
+
+#categories ul{
+margin:0;
+padding:0 10px;
 }
 
-ul#categories li{
+#categories li{
 font-variant:small-caps;
 list-style:none;
 }
 
-ul#categories li li{
+#categories li li{
 font-variant:normal;
 margin-left:20px;
 }
 
-ul#categories li li a{
+#categories li li a{
 line-height:25px;
 margin-left:0;
 font-weight:bold;
 }
 
-ul#categories ul{
+#categories ul ul{
 margin:0;
 padding:0;
 }
@@ -343,9 +355,9 @@ ul.subcategories label img{
 height:20px;
 }
 
-ul#categories li#display_submited{
+#categories li#display_submited{
 font-variant:normal;
-color:#b400ff;
+color:#b488ff;
 }
 
 .zoom_image{
@@ -358,7 +370,7 @@ vertical-align:text-bottom;
 }
 
 .errorlist{
-color:#b400ff;
+color:#b488ff;
 font-weight:bold;
 }
 
@@ -419,7 +431,7 @@ bottom:40px;
 left:29px;
 width:180px;
 font-size:small;
-background-color:#b400ff;
+background-color:#b488ff;
 text-align:center;
 z-index:4;
 }
@@ -439,7 +451,7 @@ bottom:12px;
 left:20px;
 width:180px;
 font-size:small;
-background-color:#b400ff;
+background-color:#b488ff;
 text-align:center;
 }
 
diff --git a/chimere/templates/base.html b/chimere/templates/base.html
index d8127cc..30a8660 100644
--- a/chimere/templates/base.html
+++ b/chimere/templates/base.html
@@ -5,10 +5,11 @@
 <head>
     <title>{% block title %}Chimère{% endblock %}</title>
     <script type="text/javascript"><!--
-        var media_path = '{{ media_path }}';
+        var media_path = '{{media_path}}';
+        var extra_url = "{{extra_url}}";
     // --></script>
     {% block extra_head %}{{extra_head|safe}}{% endblock %}
-    <link rel="stylesheet" href="{{ media_path }}styles.css" />
+    <link rel="stylesheet" href="{{media_path}}styles.css" />
     {% block head %}{% endblock %}
 </head>
 
diff --git a/chimere/templates/main_map.html b/chimere/templates/main_map.html
index dbd81ad..3b27d2a 100644
--- a/chimere/templates/main_map.html
+++ b/chimere/templates/main_map.html
@@ -5,32 +5,16 @@
 <div id='panel'>
 <h2>{% trans "Topics"%}</h2>
 <form method='post' name='frm_categories' id='frm_categories'>
-<ul id='categories'>{% for category, lst_sub_categories in sub_categories %}
-<script language='javascript'><!--
-var lst_{{category.id}}=new Array();
-{% for sub_category in lst_sub_categories %}
-lst_{{category.id}}.push("{{sub_category.id}}");{% endfor %}
---></script>
-  <li>{% if category.selected %}<script language='javascript'>var current_cat={{category.id}};{% endif %}</script><img class='control_image' id='maincategory_img_{{category.id}}' alt='control' src='{{media_path}}icons/{% if category.selected %}minus.png{%else%}plus.png{%endif%}' onclick='toggleCategory({{category.id}});'/>
-{% trans category.name %}
-<img class='zoom_image' alt='{% trans "Zoom to" %} {{category.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToCategory(lst_{{category.id}}.join("_"))'/>
-    <ul class='subcategories' id='maincategory_{{category.id}}'{% if not category.selected %} style='display:None'{% endif %}>{% for sub_category in lst_sub_categories %}
-      <li><input type='checkbox' onclick='loadGeoObjects()' name='category_{{sub_category.id}}' id='category_{{sub_category.id}}'{% if sub_category.selected %} checked='checked'{% endif %}/> <label for='{{sub_category.id}}'>
-      <img alt='{{sub_category.name}}' src='{{media_path}}{{sub_category.icon.image}}'/>
-      {% trans sub_category.name %}</label>
-      <img class='zoom_image' alt='{% trans "Zoom to" %} {{sub_category.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToCategory({{sub_category.id}})'/></li>{% endfor %}
-      {%if category.description%}<li><a href='#' onclick='displayCategoryDetail({{category.id}});'>{%trans "Tell me more..."%}</a></li>{%endif%}
-    </ul>
-  </li>{% endfor %}
-  <li id='display_submited'><input type='checkbox'  onclick='loadGeoObjects()' name='display_submited' id='display_submited_check'/> {% trans "Display markers and routes waiting for validation"%}</li>
-</ul>
+<div id='categories'>
+{{categories|safe}}
+</div>
 
 </form>
 </div>
 {%if areas%}<div id='areas'>
 <h2>{% trans "Shortcuts"%}</h2>
 <ul>{% for area in areas%}
-<li><img class='zoom_image' alt='{% trans "Zoom to" %} {{area.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToArea({{area.upper_left_corner.x}}, {{area.upper_left_corner.y}}, {{area.lower_right_corner.x}}, {{area.lower_right_corner.y}})'/> {{area.name}}</li>{%endfor%}
+<li><img class='zoom_image' alt='{% trans "Zoom to" %} {{area.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToArea({{area.upper_left_corner.x}}, {{area.upper_left_corner.y}}, {{area.lower_right_corner.x}}, {{area.lower_right_corner.y}}); loadGeoObjects();'/> {{area.name}}</li>{%endfor%}
 </ul>
 </div>{%endif%}
 
@@ -45,7 +29,6 @@ lst_{{category.id}}.push("{{sub_category.id}}");{% endfor %}
 <script type='text/javascript'><!--
 var map_layer = {{map_layer|safe}};
 var permalink_label = '{%trans "Permalink"%}';
-var extra_url = "{{extra_url}}";
 var p_zoom;
 {%if p_zoom %}p_zoom={{p_zoom}};
 var p_lat={{p_lat}};
diff --git a/chimere/urls.py b/chimere/urls.py
index 0cf6862..a018d4a 100644
--- a/chimere/urls.py
+++ b/chimere/urls.py
@@ -9,24 +9,25 @@ js_info_dict = {
     'packages': 'chimere',
 }
 
+base = '^' + EXTRA_URL
+
 urlpatterns = patterns('',
-    (r'^' + EXTRA_URL + r'admin/(.*)', admin.site.root),
-    (r'^' + EXTRA_URL + r'$', 'chimere.main.views.index'),
-    (r'^' + EXTRA_URL + r'contact/$', 'chimere.main.views.contactus'),
-    (r'^' + EXTRA_URL + r'edit/$', 'chimere.main.views.edit'),
-    (r'^' + EXTRA_URL + r'edit_route/$', 'chimere.main.views.editRoute'),
-    (r'^' + EXTRA_URL + r'submited/(?P<action>\w+)/$$', 'chimere.main.views.submited'),
-    (r'^' + EXTRA_URL + r'getDetail/(?P<marker_id>\d+)/$',
-                'chimere.main.views.getDetail'),
-    (r'^' + EXTRA_URL + r'getDescriptionDetail/(?P<category_id>\d+)/$',
+    (base + r'admin/(.*)', admin.site.root),
+    (base + r'$', 'chimere.main.views.index'),
+    (base + r'contact/$', 'chimere.main.views.contactus'),
+    (base + r'edit/$', 'chimere.main.views.edit'),
+    (base + r'edit_route/$', 'chimere.main.views.editRoute'),
+    (base + r'submited/(?P<action>\w+)/$$', 'chimere.main.views.submited'),
+    (base + r'getDetail/(?P<marker_id>\d+)/$', 'chimere.main.views.getDetail'),
+    (base + r'getDescriptionDetail/(?P<category_id>\d+)/$',
                 'chimere.main.views.getDescriptionDetail'),
-    (r'^' + EXTRA_URL + 'getGeoObjects/(?P<category_ids>\w+)/$',
-                'chimere.main.views.getGeoObjects'),
-    (r'^' + EXTRA_URL + 'getGeoObjects/(?P<category_ids>\w+)/(?P<status>\w+)$',
+    (base + r'getGeoObjects/(?P<category_ids>\w+)(/(?P<status>\w+))?$',
                 'chimere.main.views.getGeoObjects'),
-    (r'^' + EXTRA_URL + 'static/(?P<path>.*)$', 'django.views.static.serve',
+    (base + r'getAvailableCategories/(?P<area>\w+)(/(?P<status>\w+))?(/(?P<force>\w+))?$',
+                'chimere.main.views.getAvailableCategories'),
+    (base + r'static/(?P<path>.*)$', 'django.views.static.serve',
                          {'document_root': ROOT_PATH + 'static/'}),
-    (r'^' + EXTRA_URL + 'media/(?P<path>.*)$', 'django.views.static.serve',
+    (base + r'media/(?P<path>.*)$', 'django.views.static.serve',
                           {'document_root': ROOT_PATH + 'media/'}),
-    (r'^' + EXTRA_URL + 'jsi18n/$', 'django.views.i18n.javascript_catalog', js_info_dict),
+    (base + r'jsi18n/$', 'django.views.i18n.javascript_catalog', js_info_dict),
 )