Many changes on templates and styles

15 files changed, 366 insertions, 390 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index b56b2ab..fbc2704 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -1,520 +1,504 @@
-/* colors definition */
+/* color definition */
 
 a, a:link, a:visited, legend{
-color: #5b80b2;
+    color: #5b80b2;
 }
 
-/**/
+.errorlist,
+.detail_footer a,
+#categories li#display_submited,
+.simple .cloud h2 {
+    color:#54c200;
+}
 
-body{
-background-color:#b488ff;
-font-family:arial;
-font-size:80%;
+h2,
+#action li,
+#action li a,
+#action li li a,
+#welcome_button a, .ui-widget-header,
+.olControlPermalink a {
+    color:#fff;
 }
 
-fieldset{
-background-color:#FFF;
--moz-border-radius: 10px;
--webkit-border-radius: 10px;
-border-radius: 10px;
+h4{
+    color:#5e1e68;
 }
 
-fieldset p{
-margin:4px 8px;
+#action li.ui-state-active a,
+#action li li.ui-state-active a{
+    color:#333;
 }
 
-legend{
-font-weight:bold;
+/* backgroundcolor definition */
+
+body, h2, h3,
+.ui-widget-header,
+#action li.selected,
+#welcome_button,
+.olControlPermalink{
+    background-color:#4ea30d;
 }
 
-h2{
-font-size:16px;
-text-align:center;
-margin:0;
-margin-bottom:10px;
-padding:0;
-width:100%;
-color:white;
-background-color:#b488ff;
--moz-border-radius: 4px;
--webkit-border-radius: 4px;
-border-radius: 4px;
+.ui-widget-header{
+    background-image:None;
+}
+
+fieldset, #action li, #content,
+#map-footer, #panel, #areas,
+#welcome, #detail, .detail_footer a,
+#map, .window{
+    background-color:#FFF;
+}
+
+div.warning{
+    background-color:#dbffdb;
+}
+
+.simple .cloud h2{
+    background-color:transparent;
 }
 
+#action li.selected{
+    border:1px solid #54c200;
+}
+
+#areas, #detail, #map,
+div.warning,
+#content,
+#action li.selected,
+#panel, #map-footer{
+    border:1px solid #327e04;
+}
+
+/* opacity */
+
+#welcome{
+    opacity:0.9;
+}
+
+#panel, #areas, #detail, #category_detail{
+    opacity:0.8;
+}
+
+/* rounded */
+
+/* entête */
+/*
 #areas h2, #panel h2{
--moz-border-radius: 4px 4px 0 0;
--webkit-border-radius: 4px 4px 0 0;
-border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+    -webkit-border-radius: 4px 4px 0 0;
+    border-radius: 4px 4px 0 0;
 }
 
-h3{
-color:#b488ff;
+
+h2, #action li, .detail_footer{
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
 }
 
-h4{
-color:#5e1e68;
-font-weight:normal;
-font-style:italic;
+fieldset, #content, #panel,
+#areas, #welcome, #detail,
+#category_detail, div.warning{
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
 }
+*/
+/**/
 
-hr.spacer{
-clear:both;
-border:None;
-visibility: hidden;
+.draggable h2{
+    cursor:move;
 }
 
-fieldset{
-margin-top:8px;
+body{
+    font-family:arial;
+    font-size:80%;
 }
 
-.edit label{
-display:block;
+fieldset p{
+    margin:4px 8px;
 }
 
-ul#action{
-position:absolute;
-z-index:5;
-list-style-type:none;
-top:20px;
-left:80px;
-margin:0;
-padding:3px;
-padding-left:0;
+legend{
+    font-weight:bold;
 }
 
-#action li{
-font-size:15px;
-display:inline;
-padding:1px 5px;
-margin-right:6px;
-border:1px solid #888;
--moz-border-radius: 4px;
--webkit-border-radius: 4px;
-border-radius: 4px;
-background-color:#FFF;
+h2{
+    font-size:16px;
+    text-align:center;
+    margin:6px;
+    padding-top: 0.4em;
+    padding-right: 1em;
+    padding-bottom: 0.4em;
+    padding-left: 1em;
+    position: relative;
 }
 
-#action li.selected{
-background-color:#b488ff;
-border-color:#b488ff;
-color:white;
+h4{
+    font-weight:normal;
+    font-style:italic;
 }
 
-#action a{
-text-decoration:None;
-color:black;
+hr.spacer{
+    clear:both;
+    border:None;
+    visibility: hidden;
 }
 
-#action li ul{
-margin:14px 12px;
-position:absolute;
-width:600px;
+fieldset{
+    margin-top:8px;
+}
+
+.edit label{
+    display:block;
+}
+
+ul#action{
+    position:absolute;
+    z-index:5;
+    list-style-type:none;
+    top:20px;
+    left:80px;
+    margin:0;
+    padding:3px;
+    padding-left:0;
 }
 
-#action li.selected a{
-color:white;
+#action li{
+    font-weight:normal;
+    display:inline;
+    padding:3px 7px;
+    margin-right:6px;
 }
 
-#action li.selected li a{
-color:black;
+#action a{
+    text-decoration:None;
 }
 
-#action li.selected li.selected a{
-color:white;
+#action li ul{
+    margin:14px 12px;
+    position:absolute;
+    width:600px;
 }
 
 #content{
-margin:4px;
-margin-top:14px;
-padding:20px;
-padding-top:46px;
-background-color:white;
--moz-border-radius: 10px;
--webkit-border-radius: 10px;
-border-radius: 10px;
-border:1px solid #888;
+    margin:4px;
+    margin-top:14px;
+    padding:20px;
+    padding-top:46px;
 }
 
 #footer{
-text-align:center;
+    text-align:center;
 }
 
 #map-footer{
-position:absolute;
-z-index:5;
-background-color:white;
-bottom:5px;
-right:5px;
-border:1px solid #888;
-padding:2px;
+    position:absolute;
+    z-index:5;
+    bottom:5px;
+    right:5px;
+    padding:2px;
 }
 
 #panel{
-padding:0;
-border:1px solid #888;
-position:absolute;
-z-index:5;
-top:50px;
-right:18px;
-width:300px;
-background-color:#FFF;
-opacity:0.8;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
+    padding:0;
+    position:absolute;
+    z-index:5;
+    top:50px;
+    right:18px;
+    width:300px;
 }
 
 .simple #panel{
-top:5px;
+    top:5px;
 }
 
 #areas{
-padding:0;
-border:1px solid #888;
-height:115px;
-position:absolute;
-z-index:5;
-bottom:105px;
-left:18px;
-width:200px;
-background-color:#FFF;
-opacity:0.8;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
-overflow:auto;
+    padding:0;
+    height:115px;
+    position:absolute;
+    z-index:5;
+    bottom:105px;
+    left:18px;
+    width:200px;
+    overflow:auto;
 }
 
 #areas ul{
-margin:0;
-padding:0 10px;
+    margin:0;
+    padding:0 10px;
 }
 
 #areas  li{
-list-style:none;
+    list-style:none;
 }
 
 #popup_link{
-text-align:center;
+    text-align:center;
 }
 
+/*
 #welcome{
-padding:6px 10px;
-border:1px solid #888;
-position:absolute;
-z-index:5;
-top:50px;
-bottom:102px;
-left:80px;
-margin-right:360px;
-background-color:#FFF;
-opacity:0.9;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
-}
+    padding:6px 10px;
+    position:absolute;
+    z-index:5;
+    top:50px;
+    bottom:102px;
+    left:80px;
+    margin-right:360px;
+}*/
 
 #detail{
-display:None;
-padding:6px 10px;
-border:1px solid #888;
-position:absolute;
-z-index:5;
-top:274px;
-bottom:38px;
-right:18px;
-width:300px;
-background-color:#FFF;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
+    display:none;
+    padding:0;
+    position:absolute;
+    z-index:5;
+    top:274px;
+    bottom:38px;
+    right:18px;
+    width:300px;
+}
+
+#detail div{
+    margin:4px 8px;
 }
 
 #detail_content{
-overflow:auto;
-height:90%;
+    overflow:auto;
+    height:90%;
 }
 
 #detail_content img{
-width:280px;
+    width:280px;
 }
 
 ul#share{
-list-style-type:none;
-margin:0;
-padding:0;
+    list-style-type:none;
+    margin:0;
+    padding:0;
 }
 
 ul#share li{
-display:inline;
-line-height:22px;
-vertical-align: bottom;
+    display:inline;
+    line-height:22px;
+    vertical-align: bottom;
 }
 
 #share a{
-text-decoration:None;
+    text-decoration:None;
 }
 
 #share img{
-border:None;
-width:22px;
-height:22px;
-}
-
-#welcome h2{
-padding:10px 0;
+    border:None;
+    width:22px;
+    height:22px;
 }
 
 .detail_footer{
-text-align:center;
-position:absolute;
-top:15px;
-right:18px;
+    text-align:center;
+    position:absolute;
+    top:15px;
+    right:18px;
 }
 
 .detail_footer a{
-color:#b488ff;
-padding:2px;
-background-color:#FFF;
-border:1px solid;
-display:block;
-text-decoration:None;
--moz-border-radius:4px;
--webkit-border-radius:4px;
-border-radius:4px;
-}
-
-#category_detail{
-display:None;
-padding:6px 10px;
-border:1px solid #888;
-position:absolute;
-z-index:5;
-top:120px;
-bottom:180px;
-left:100px;
-right:50px;
-margin-right:360px;
-background-color:#FFF;
-opacity:0.9;
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
-}
-
-#category_detail h2{
-padding:10px 0;
+    padding:2px;
+    display:block;
+    text-decoration:None;
 }
 
+#category_title{
+    display:none;
+}
 
 #category_desc_content{
-overflow:auto;
-height:88%;
+    overflow:auto;
+    height:88%;
 }
 
 #map{
-position:absolute;
-background-color:white;
-border:1px solid #888;
-margin:0px;
-padding:0px;
-height:98%;
-margin:0;
-padding:0;
-top:8px;
-bottom:8px;
-left:8px;
-right:8px;
-z-index:0;
+    position:absolute;
+    margin:0px;
+    padding:0px;
+    height:98%;
+    margin:0;
+    padding:0;
+    top:8px;
+    bottom:8px;
+    left:8px;
+    right:8px;
+    z-index:0;
 }
 
 .simple #map{
-margin:0px;
-padding:0px;
-height:100%;
-margin:0;
-padding:0;
-top:0;
-bottom:0;
-left:0;
-right:0;
-z-index:0;
-}
-
-.news{
+    margin:0px;
+    padding:0px;
+    height:100%;
+    margin:0;
+    padding:0;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    z-index:0;
 }
 
 .news h3{
-padding:0px;
-margin:0;
+    padding:0px;
+    margin:0;
 }
 
 .info{
-border-top:1px dashed;
-padding:10px;
-margin:0;
+    border-top:1px dashed;
+    padding:10px;
+    margin:0;
 }
 
 #panel #categories{
-margin:0;
-padding:0;
-width:290px;
-height:160px;
-overflow:auto;
-z-index:5;
+    margin:0;
+    padding:0;
+    width:290px;
+    height:160px;
+    overflow:auto;
+    z-index:5;
 }
 
 .simple #panel #categories{
-display:None;
+    display:None;
 }
 
 #categories input {
-padding: 0;
-margin:0;
-vertical-align: bottom;
+    padding: 0;
+    margin:0;
+    vertical-align: bottom;
 }
 
 #categories > ul{
-margin:0;
-padding:0 10px;
-overflow:auto;
-height:160px;
-width:270px;
+    margin:0;
+    padding:0 10px;
+    overflow:auto;
+    height:160px;
+    width:270px;
 }
 
 #categories li{
-font-variant:small-caps;
-list-style:none;
+    font-variant:small-caps;
+    list-style:none;
 }
 
 #categories li li{
-font-variant:normal;
-margin-left:20px;
+    font-variant:normal;
+    margin-left:20px;
 }
 
 ul#categories li li a{
-line-height:25px;
-margin-left:0;
-font-weight:bold;
+    line-height:25px;
+    margin-left:0;
+    font-weight:bold;
 }
 
 #categories ul ul{
-margin:0;
-padding:0;
+    margin:0;
+    padding:0;
 }
 
 ul.subcategories label img{
-height:20px;
+    height:20px;
 }
 
 #categories li#display_submited{
-font-variant:normal;
-color:#b488ff;
+    font-variant:normal;
 }
 
 .zoom_image{
-cursor:pointer;
+    cursor:pointer;
 }
 
 .control_image{
-cursor:pointer;
-vertical-align:text-bottom;
+    cursor:pointer;
+    vertical-align:text-bottom;
 }
 
 .errorlist{
-color:#b488ff;
-font-weight:bold;
+    font-weight:bold;
 }
 
 .fieldWrapper{
-padding:6px;
+    padding:6px;
 }
 
 div.warning{
-margin-top:18px;
-padding:0 10px;
-border:1px solid #888;
--moz-border-radius: 10px;
--webkit-border-radius: 10px;
-border-radius: 10px;
-background-color:#ffdbdb;
+    margin-top:18px;
+    padding:0 10px;
 }
 
 p.warning{
-text-align:center;
+    text-align:center;
 }
 
 #welcome_button {
-display: block;
-position: absolute;
-bottom:40px;
-left:29px;
-width:180px;
-font-size:small;
-background-color:#b488ff;
-text-align:center;
-z-index:4;
+    display: block;
+    position: absolute;
+    bottom:40px;
+    left:29px;
+    width:180px;
+    font-size:small;
+    text-align:center;
+    z-index:4;
 }
 
 #welcome_button a{
-color:white;
-font-size:14px;
-text-align:center;
-text-decoration:none;
+    font-size:14px;
+    text-align:center;
+    text-decoration:none;
 }
 
 /* openlayer customisation */
 .olControlPermalink {
-display: block;
-position: absolute;
-bottom:12px;
-left:20px;
-width:180px;
-font-size:small;
-background-color:#b488ff;
-text-align:center;
+    display: block;
+    position: absolute;
+    bottom:12px;
+    left:20px;
+    width:180px;
+    font-size:small;
+    text-align:center;
 }
 
 .simple .olControlPermalink {
-display:None;
+    display:None;
 }
 
 .olControlPermalink a{
-color:white;
-font-size:14px;
-text-align:center;
-text-decoration:none;
+    font-size:14px;
+    text-align:center;
+    text-decoration:none;
 }
 
 .olControlScaleLine {
-bottom:12px;
-left:220px;
+    bottom:12px;
+    left:220px;
 }
 
 .simple .olControlScaleLine {
-bottom:50px;
-left:10px;
+    bottom:50px;
+    left:10px;
 }
 
 .simple .olControlPanPanel{
-top:40px;
+    top:40px;
 }
 
 .simple .olControlZoomPanel{
-top:100px;
+    top:100px;
 }
 
 .simple .cloud h2{
-font-size:14px;
-text-align:center;
-margin:0;
-padding:0;
-background-color:transparent;
-color:#b488ff;
+    font-size:14px;
+    text-align:center;
+    margin:0;
+    padding:0;
 }
 
 .simple .cloud img{display:None;}
 
-.window{
-background-color:#FFF;
-}
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index fdac708..fb0e0bd 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -421,7 +421,9 @@ See the file COPYING for details.
             var uri = extra_url + "getDescriptionDetail/" + category_id;
             $.ajax({url:uri,
                         success: function (data) {
-                            $("#category_detail").html(data).show();
+                            $("#category_detail").html(data).dialog();
+                            $("#category_detail").dialog( "option", "title",
+                                    $("#category_title").html());
                         }
                   });
         },
diff --git a/chimere/templates/chimere/blocks/actions.html b/chimere/templates/chimere/blocks/actions.html
index a98b2d4..8e2e1d6 100644
--- a/chimere/templates/chimere/blocks/actions.html
+++ b/chimere/templates/chimere/blocks/actions.html
@@ -1,7 +1,7 @@
 <div id="topbar">
     <ul id='action'>
         {% for action, subactions in actions %}
-            <li{% ifequal action.id action_selected.0 %} class='selected'{% endifequal %}>
+            <li class='ui-widget ui-button ui-state-default ui-corner-all {% ifequal action.id action_selected.0 %} ui-state-active{% endifequal %}'>
                 <a href='{{extra_url}}{{ action.path }}' onclick='saveExtent();'>{{ action.label }}</a>
                 {% ifequal action.id action_selected.0 %}
                     {% if subactions %}
diff --git a/chimere/templates/chimere/blocks/head.html b/chimere/templates/chimere/blocks/head.html
index 5742798..f1eaf94 100644
--- a/chimere/templates/chimere/blocks/head.html
+++ b/chimere/templates/chimere/blocks/head.html
@@ -1,12 +1,15 @@
 {% if css_area %}
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/{{ css_area }}.css" />{% endif %}
-{% for css_url in URL_OSM_CSS %}
+{% for css_url in OSM_CSS_URLS %}
+<link rel="stylesheet" href="{{ css_url }}" />{% endfor %}
+{% for css_url in JQUERY_CSS_URLS %}
 <link rel="stylesheet" href="{{ css_url }}" />{% endfor %}
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/styles.css" />
-{% for js_url in URL_OSM_JS %}
+{% for js_url in OSM_JS_URLS %}
 <script src="{{ js_url }}"></script>{% endfor %}
+{% for js_url in JQUERY_JS_URLS %}
+<script type="text/javascript" src="{{ js_url }}"></script>{% endfor %}
 
-<script type="text/javascript" src="{{ JQUERY_URL }}"></script>
 <script type="text/javascript">
     /* Global variables */
     /* lower cases are for retrocompatibility */
@@ -34,6 +37,8 @@
     var area_name = '{{ area_name }}';{% endif %}
     {% if RESTRICTED_EXTENT %}
     restricted_extent = new OpenLayers.Bounds({{ RESTRICTED_EXTENT|join:"," }});{% endif %}
+
+    $(function() {$( ".draggable" ).draggable({handle:"h2"});});
 </script>
 
 
diff --git a/chimere/templates/chimere/blocks/welcome.html b/chimere/templates/chimere/blocks/welcome.html
index f8547f1..7cd7159 100644
--- a/chimere/templates/chimere/blocks/welcome.html
+++ b/chimere/templates/chimere/blocks/welcome.html
@@ -1,9 +1,13 @@
 {% load i18n %}
 {% load sanitize %}
-<div id='welcome_button'><a href='javascript:show("welcome");'>
-    {% trans "Welcome message"%}</a></div>
-<div id='welcome' {% if not display %}style='display:none'{%endif%}>
-    <h2>{% trans "News"%}</h2>
+<button class='ui-widget ui-button ui-state-default' id='welcome_button' onclick=''>
+    {% trans "Welcome message"%}</button>
+<script type='text/javascript'>
+    function display_welcome(){$("#welcome").dialog({title:"{% trans "News"%}"});}
+    $("#welcome_button").bind('click', display_welcome);
+    {% if display %}display_welcome();{%endif%}
+</script>
+<div id='welcome' style='display:none'>
     <div id='detail_content'>
         {% include "chimere/blocks/welcome_message.html" %}
         <div class='news'>
@@ -27,5 +31,4 @@
             </div>
         </div>
     </div>
-    <div class='detail_footer'><a href='javascript:hide("welcome");'>{% trans "Close" %}</a></div>
 </div>
diff --git a/chimere/templates/chimere/category_detail.html b/chimere/templates/chimere/category_detail.html
index 0211989..b5f2d66 100644
--- a/chimere/templates/chimere/category_detail.html
+++ b/chimere/templates/chimere/category_detail.html
@@ -1,6 +1,5 @@
 {% load i18n %}
-<h2>{{ category.name }}</h2>
+<span id='category_title'>{{ category.name }}</span>
 <div id='category_desc_content'>
 {{ category.description|safe }}
 </div>
-<div class='detail_footer'><a href='javascript:hide("category_detail");'>{% trans "Close" %}</a></div>
diff --git a/chimere/templates/chimere/detail.html b/chimere/templates/chimere/detail.html
index d4c9927..f09a982 100644
--- a/chimere/templates/chimere/detail.html
+++ b/chimere/templates/chimere/detail.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 {% load sanitize %}
-<h2>{{ marker.name }}</h2>
+<h2 class='ui-widget ui-state-default ui-corner-all ui-widget-header'>{{ marker.name }}</h2>
 <div id='detail_content'>
 	{% if marker.picture %}<img src='{{STATIC_URL}}{{marker.picture}}' alt='{{marker.name}}'/>{%endif%}
 <div>
diff --git a/chimere/templates/chimere/main_map.html b/chimere/templates/chimere/main_map.html
index ad612a4..7d20fd7 100644
--- a/chimere/templates/chimere/main_map.html
+++ b/chimere/templates/chimere/main_map.html
@@ -2,8 +2,8 @@
 {% load i18n unlocalize_point chimere_tags %}
 {% block message_edit %}{% endblock %}
 {% block sidebar %}
-    <div id='panel'>
-        <h2>{% trans "Topics"%}</h2>
+    <div id='panel' class='draggable ui-widget ui-corner-all'>
+        <h2 class='ui-widget ui-state-default ui-corner-all ui-widget-header'>{% trans "Topics"%}</h2>
         <form method='post' name='frm_categories' id='frm_categories'>
             <div id='categories'>
             <!-- Categories are displayed in JS -->
@@ -14,7 +14,7 @@
     {% if areas_visible %}
         {% display_areas %}
     {% endif %}
-    <div id='detail'></div>
+    <div id='detail' class='ui-widget ui-corner-all'></div>
     <div id='category_detail'></div>
     {% display_news news_visible %}
 {% endblock %}
diff --git a/chimere/templates/chimere/upload_file.html b/chimere/templates/chimere/upload_file.html
index d08f723..deddc86 100644
--- a/chimere/templates/chimere/upload_file.html
+++ b/chimere/templates/chimere/upload_file.html
@@ -10,8 +10,11 @@
     // --></script>
     {% block extra_head %}{{extra_head|safe}}{% endblock %}
     <link rel="stylesheet" href="{{STATIC_URL}}styles.css" />
+    {% for css_url in JQUERY_CSS_URLS %}
+    <link rel="stylesheet" href="{{ css_url }}" />{% endfor %}
     {%if css_area%}<link rel="stylesheet" href="{{STATIC_URL}}{{css_area}}" />{%endif%}
-    <script type="text/javascript" src="{{JQUERY_URL}}"></script>
+    {% for js_url in JQUERY_JS_URLS %}
+    <script type="text/javascript" src="{{ js_url }}"></script>{% endfor %}
     {% block head %}{% endblock %}
 </head>
 <body class='window'>
diff --git a/chimere/templates/chimere/welcome.html b/chimere/templates/chimere/welcome.html
deleted file mode 100644
index a3cd86e..0000000
--- a/chimere/templates/chimere/welcome.html
+++ /dev/null
@@ -1,26 +0,0 @@
-{% load i18n %}
-{% load sanitize %}
-<div id='welcome' {% if not display %}style='display:None'{%endif%}>
-    <h2>Title</h2>
-    <div id='detail_content'>
-        <div class='news'>
-            {% if news_lst %}{% for news in news_lst %}
-            <div class='info'>
-                {% if news.title %}
-                <h3>{{news.title}} &ndash; {{ news.date }}</h3>
-                <p>{{news.content|safe}}</p>
-                {% else %}
-                <h3>{{news.name}} &ndash; {{ news.start_date }}{% if news.end_date %} - {{ news.end_date }}{% endif %}</h3>
-                {% for property in news.getProperties %}
-                <p id='{{news.propertymodel.getNamedId}}'>{{ property.value|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4"|safe }}</p>
-                {% endfor %}
-                <p class='marker_link'><a href='{{ news.get_absolute_url }}'>{% trans "See it on the map"%}</a></p>
-                {% endif %}
-            </div>
-            {%endfor%}{%endif%}
-            <div class='info'>
-            </div>
-            <div class='detail_footer'><a href='javascript:hide("welcome");'>{% trans "Close" %}</a></div>
-        </div>
-    </div>
-</div>
diff --git a/chimere/templatetags/chimere_tags.py b/chimere/templatetags/chimere_tags.py
index b19d0a0..c8358a0 100644
--- a/chimere/templatetags/chimere_tags.py
+++ b/chimere/templatetags/chimere_tags.py
@@ -7,7 +7,6 @@ from django.conf import settings
 from django.core.urlresolvers import reverse
 
 from chimere.models import Marker, Area, News
-from chimere.widgets import URL_OSM_CSS, URL_OSM_JS
 
 log = getLogger(__name__)
 
@@ -44,7 +43,8 @@ def head(context):
     """
     context_data = {
             "STATIC_URL": settings.STATIC_URL,
-            "JQUERY_URL": settings.JQUERY_URL,
+            "JQUERY_JS_URLS": settings.JQUERY_JS_URLS,
+            "JQUERY_CSS_URLS": settings.JQUERY_CSS_URLS,
             "MEDIA_URL": settings.MEDIA_URL,
             "DYNAMIC_CATEGORIES": settings.CHIMERE_DYNAMIC_CATEGORIES,
             "EXTRA_URL": reverse("chimere:index"),
@@ -58,8 +58,8 @@ def head(context):
             "ICON_OFFSET_X": settings.CHIMERE_ICON_OFFSET_X,
             "ICON_OFFSET_Y": settings.CHIMERE_ICON_OFFSET_Y,
             "MAP_LAYER": settings.CHIMERE_MAP_LAYER,
-            "URL_OSM_CSS": URL_OSM_CSS,
-            "URL_OSM_JS": URL_OSM_JS,
+            "OSM_CSS_URLS": settings.OSM_CSS_URLS,
+            "OSM_JS_URLS": settings.OSM_JS_URLS,
              }
     if settings.CHIMERE_CSS_AREAS and "area_name" in context:
         context_data['css_area'] = context["area_name"]
diff --git a/chimere/views.py b/chimere/views.py
index f27c501..0cddd2c 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -40,7 +40,7 @@ from chimere.models import Category, SubCategory, PropertyModel, \
               Marker, Route, News, SimpleArea, Area, Color, TinyUrl, RouteFile
 
 from chimere.widgets import getMapJS, PointChooserWidget, \
-                           RouteChooserWidget, URL_OSM_JS, URL_OSM_CSS
+                            RouteChooserWidget
 from chimere.forms import MarkerForm, RouteForm, ContactForm, \
                         FileForm, FullFileForm, notifySubmission, notifyStaff
 
@@ -61,7 +61,8 @@ def get_base_response(area_name=""):
     if settings.CHIMERE_CSS_AREAS and area_name:
         base_response_dct['css_area'] = area_name + ".css"
     base_response_dct['area_name'] = area_name
-    base_response_dct['JQUERY_URL'] = settings.JQUERY_URL
+    base_response_dct['JQUERY_JS_URLS'] = settings.JQUERY_JS_URLS
+    base_response_dct['JQUERY_CSS_URLS'] = settings.JQUERY_CSS_URLS
     return base_response_dct
 
 def index(request, area_name=None, default_area=None, simple=False):
diff --git a/chimere/widgets.py b/chimere/widgets.py
index 2f4b8e7..d12f2e6 100644
--- a/chimere/widgets.py
+++ b/chimere/widgets.py
@@ -20,7 +20,7 @@
 """
 Extra widgets and fields
 """
-
+from django import conf
 from django import forms
 from django.conf import settings
 from django.contrib.gis.db import models
@@ -28,10 +28,6 @@ from django.contrib.gis.geos import fromstr
 from django.utils.safestring import mark_safe
 from django.utils.translation import ugettext as _
 
-URL_OSM_CSS = ["http://www.openlayers.org/api/theme/default/style.css"]
-URL_OSM_JS = [settings.STATIC_URL + "chimere/js/OpenLayers.js",
-          "http://www.openstreetmap.org/openlayers/OpenStreetMap.js"]
-
 def getMapJS(area_name=''):
     '''Variable initialization for drawing the map
     '''
@@ -74,9 +70,9 @@ class PointChooserWidget(forms.TextInput):
     """
     class Media:
         css = {
-            "all": URL_OSM_CSS + ["%schimere/css/forms.css" % settings.STATIC_URL,]
+            "all": settings.OSM_CSS_URLS + ["%schimere/css/forms.css" % settings.STATIC_URL,]
         }
-        js = URL_OSM_JS + ["%schimere/js/edit_map.js" % settings.STATIC_URL,
+        js = settings.OSM_JS_URLS + ["%schimere/js/edit_map.js" % settings.STATIC_URL,
                            "%schimere/js/base.js" % settings.STATIC_URL,]
 
     def render(self, name, value, attrs=None, area_name=''):
@@ -142,10 +138,10 @@ class RouteChooserWidget(forms.TextInput):
     """
     class Media:
         css = {
-            "all": URL_OSM_CSS + ["%schimere/css/forms.css" % settings.STATIC_URL,]
+            "all": settings.OSM_CSS_URLS + ["%schimere/css/forms.css" % settings.STATIC_URL,]
         }
         js = ["%schimere/js/edit_route_map.js" % settings.STATIC_URL,
-              "%schimere/js/base.js" % settings.STATIC_URL,] + URL_OSM_JS
+              "%schimere/js/base.js" % settings.STATIC_URL,] + settings.OSM_JS_URLS
 
     def render(self, name, value, attrs=None, area_name='', routefile_id=None):
         '''
@@ -250,9 +246,9 @@ class AreaWidget(forms.TextInput):
     """
     class Media:
         css = {
-            "all": URL_OSM_CSS + ["%schimere/css/forms.css" % settings.STATIC_URL,]
+            "all": settings.OSM_CSS_URLS + ["%schimere/css/forms.css" % settings.STATIC_URL,]
         }
-        js = URL_OSM_JS + ["%schimere/js/edit_area.js" % settings.STATIC_URL,
+        js = settings.OSM_JS_URLS + ["%schimere/js/edit_area.js" % settings.STATIC_URL,
               "%schimere/js/base.js" % settings.STATIC_URL,]
 
     def render(self, name, value, attrs=None):
@@ -318,16 +314,15 @@ class AreaField(forms.MultiValueField):
 
 class MultiSelectWidget(forms.SelectMultiple):
     class Media:
-        css = {'all': (
+        css = {'all': list(settings.JQUERY_CSS_URLS) + [
             settings.STATIC_URL + 'chimere/js/jquery/bsmSelect/css/jquery.bsmselect.css',
             settings.STATIC_URL + 'chimere/js/jquery/bsmSelect/css/jquery.bsmselect.custom.css',
-            )
+            ]
         }
-        js = (
-            settings.JQUERY_URL,
+        js = list(settings.JQUERY_JS_URLS) + [
             settings.STATIC_URL + 'chimere/js/jquery/bsmSelect/js/jquery.bsmselect.js',
             settings.STATIC_URL + 'chimere/js/jquery/bsmSelect/js/jquery.bsmselect.compatibility.js',
-            )
+            ]
 
     def render(self, name, value, attrs=None):
         rendered = super(MultiSelectWidget, self).render(name, value, attrs)
diff --git a/debian/control b/debian/control
index d29a253..e8b57c5 100644
--- a/debian/control
+++ b/debian/control
@@ -2,5 +2,7 @@ Package: python-django-chimere
 Version: 2.0
 Depends: python-django (>=1.3), python-gdal, python-psycopg2,
          python-beautifulsoup, python-imaging, libjs-jquery,
+         libjs-jquery-ui, libjs-jquery-ui-theme-base,
          postgresql-9.1, postgresql-9.1-postgis
-Recommends: tinymce
+Recommends: tinymce, gpsbabel
+Suggests: libjs-jquery-ui-theme-south-street
diff --git a/example_project/settings.py.example b/example_project/settings.py.example
index f7fe697..2956e2b 100644
--- a/example_project/settings.py.example
+++ b/example_project/settings.py.example
@@ -13,7 +13,15 @@ EMAIL_HOST = 'localhost'
 STATIC_URL = '/static/'
 
 TINYMCE_URL = '/tinymce/'
-JQUERY_URL = '/javascript/jquery/jquery.js'
+JQUERY_JS_URLS = ('/javascript/jquery/jquery.js',
+                  '/javascript/jquery-ui/jquery-ui.js',)
+JQUERY_CSS_URLS = ('/javascript/jquery-ui/css/smoothness/jquery-ui.css',
+                   '/javascript/jquery-ui-themes/base/jquery.ui.all.css')
+
+OSM_CSS_URLS = ["http://www.openlayers.org/api/theme/default/style.css"]
+OSM_JS_URLS = [STATIC_URL + "chimere/js/OpenLayers.js",
+               "http://www.openstreetmap.org/openlayers/OpenStreetMap.js"]
+
 GPSBABEL = '/usr/bin/gpsbabel'
 GPSBABEL_OPTIONS = 'simplify,crosstrack,error=0.005k' # simplify with an
                                                       # error of 5 meters