--- a/src/hdalab/templates/renkan_edit.html	Wed Sep 24 13:07:08 2014 +0200
+++ b/src/hdalab/templates/renkan_edit.html	Wed Sep 24 16:03:14 2014 +0200
@@ -9,10 +9,12 @@
         <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" />
         <link rel="stylesheet" type="text/css" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" />
         <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/additionnal_renkan.css' %}" />
+        <link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/bjqs.css' %}" />
 {% endblock %}
 
 {% block js_import %}
 {{block.super}}
+        <script src="{% static 'hdalab/lib/bjqs-1.3.min.js' %}"></script>
         <script src="{% static 'renkanmanager/lib/jquery-ui-1.10.4.min.js' %}"></script>
         <script src="{% static 'renkanmanager/lib/jquery.mousewheel.min.js' %}"></script>
         <script src="{% static 'renkanmanager/lib/underscore-min.js' %}"></script>
@@ -119,6 +121,21 @@
                 form = dialog.find( "form" ).on( "submit", function( event ) {
                     manageLoginForm(event, this);
                 });
+                
+                // Slider init
+                $('#help-slideshow').bjqs({
+                    animtype: 'slide',
+                    height: 320,
+                    width: 960,
+                    showcontrols: true,
+                    nexttext: "{% trans 'Next' %}",
+                    prevtext: "{% trans 'Previous' %}",
+                    showmarkers : true,
+                    centermarkers : true
+                });
+                $("#toggle-help").click(function(){
+                    $('#help-container').toggle();
+                });
             });
             
         </script>
@@ -130,7 +147,16 @@
 </div>
 <div class="renkan_help">
   <span id="circle-shape"><a href="{{ switch_shape_url }}">{% if 'shape=circle' in switch_shape_url %}{% trans 'See the graph in circle' %}{% else %}{% trans 'See the graph in lines' %}{% endif %}</a></span>
-  <span id="toggle-help">{% trans 'Need help ?' %}</span>
+  <span id="toggle-help" class="hand">{% trans 'Need help ?' %}</span>
+</div>
+<div id="help-container">
+	<div id="help-slideshow">
+	  <ul class="bjqs">
+	    <li>Slide 1</li>
+	    <li>Slide 2</li>
+	    <li>Slide 3</li>
+	  </ul>
+	</div>
 </div>
 <div class="rnk-wrapper">
   <div class="rnk-container">