--- a/src/widgets/AnnotationsController.js	Tue Sep 01 15:57:54 2015 +0200
+++ b/src/widgets/AnnotationsController.js	Fri Sep 18 14:32:28 2015 +0200
@@ -21,8 +21,8 @@
 IriSP.Widgets.AnnotationsController.prototype.template = 
     "<div class='Ldt-AnnotationsController'>"
     + "<div class='Ldt-AnnotationsController-ButtonsContainer'>"
+    + "    <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{l10n.write}}</div>"
     + "    <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowAnnotationsListButton'>{{l10n.display}}</div>"
-    + "    <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{l10n.write}}</div>"
     + "</div>"
     + "</div>"
 
@@ -46,13 +46,23 @@
     this.writeButton_$ = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
     
     this.writeButton_$.click(function(){
-        _this.player.trigger("CreateAnnotation.toggle");
+        if (!_this.writeButton_$.hasClass("selected")){
+            _this.player.trigger("CreateAnnotation.show")
+        }
+        else {
+            _this.player.trigger("CreateAnnotation.hide")
+        }
         if (_this.display_or_write){
             _this.player.trigger("AnnotationsList.hide");
         }
     });
     this.displayButton_$.click(function(){
-        _this.player.trigger("AnnotationsList.toggle");
+        if (!_this.displayButton_$.hasClass("selected")){
+            _this.player.trigger("AnnotationsList.show")
+        }
+        else {
+            _this.player.trigger("AnnotationsList.hide")
+        }
         if (_this.display_or_write){
             _this.player.trigger("CreateAnnotation.hide");
         }
@@ -69,6 +79,19 @@
         this.currentSegment = false
     }
     
+    this.onMdpEvent("CreateAnnotation.hide", function(){
+        _this.writeButton_$.toggleClass("selected", false);
+    })
+    this.onMdpEvent("CreateAnnotation.show", function(){
+        _this.writeButton_$.toggleClass("selected", true);
+    })
+    this.onMdpEvent("AnnotationsList.hide", function(){
+        _this.displayButton_$.toggleClass("selected", false);
+    })
+    this.onMdpEvent("AnnotationsList.show", function(){
+        _this.displayButton_$.toggleClass("selected", true);
+    })
+    
     if (this.starts_hidden) {
         this.visible = true
         this.hide();
@@ -118,6 +141,8 @@
         if (!currentSegment && _currentSegments.length == 0){
             if (this.visible){
                 this.hide();
+                this.writeButton_$.toggleClass("selected", false);
+                this.displayButton_$.toggleClass("selected", false);
                 this.player.trigger("CreateAnnotation.hide");
                 this.player.trigger("AnnotationsList.hide");
             }
@@ -125,6 +150,8 @@
         else {
             if (!this.visible){
                 this.show();
+                this.writeButton_$.toggleClass("selected", false);
+                this.displayButton_$.toggleClass("selected", false);
                 this.player.trigger("CreateAnnotation.hide");
                 this.player.trigger("AnnotationsList.hide");
             }