--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.css	Thu Jun 25 11:01:55 2015 +0200
@@ -0,0 +1,43 @@
+
+.Ldt-AnnotationsController{
+	background: url(img/pinstripe.png);
+	width: 537px;
+    max-height: 280px;
+	margin: 0px;
+	margin-top: 4px;
+	border-style: solid;
+    border-width: 1px;
+    border-color: #b7b7b7;
+}
+
+.Ldt-AnnotationsController-ButtonsContainer{
+	width: 100%;
+	min-height: 30px;
+	text-align: center;
+}
+
+.Ldt-AnnotationsController-Button{
+	display: inline-block;
+    background-color: #d93c71;
+    color: #ffffff;
+    cursor: pointer;
+    height: 25px;
+    width: 150px;
+    font-size: 14px;
+    border: 1px solid;
+    border-color: #eca3bc #631e34 #36101c #e16e93;
+    cursor: pointer;
+    margin-right: 10px;
+    margin-left: 10px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding: 4px;
+    text-align: center;
+	vertical-align: middle;
+	line-height: 30px;
+}
+
+.Ldt-AnnotationsController-Button:hover{
+	background-color: #e15581;
+	border-color: #222222 #e87d9f #f0adc3 #68273c;
+}
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js	Thu Jun 25 11:01:55 2015 +0200
@@ -0,0 +1,56 @@
+/* 
+ * Widget that ties AnnotationList and CreateAnnotation together
+ * using buttons to hide/show AnnotationList and CreateAnnotation widgets.
+ * 
+ */
+
+IriSP.Widgets.AnnotationsController = function(player, config){
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.AnnotationsController.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.AnnotationsController.prototype.defaults = {
+    // If true, displaying AnnotationList will hide CreateAnnotation and vice versa.
+    display_or_write: false,
+};
+
+IriSP.Widgets.AnnotationsController.prototype.template = 
+    "<div class='Ldt-AnnotationsController'>"
+    + "<div class='Ldt-AnnotationsController-ButtonsContainer'>"
+    + "    <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowAnnotationsListButton'>{{l10n.display}}</div>"
+    + "    <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{l10n.write}}</div>"
+    + "</div>"
+    + "</div>"
+
+IriSP.Widgets.AnnotationsController.prototype.messages = {
+    en : {
+        write : "Write",
+        display : "Display",
+    },
+    fr : {
+        write : "Ecrire",
+        display : "Voir"
+    }
+};
+
+IriSP.Widgets.AnnotationsController.prototype.draw = function() { 
+    this.renderTemplate();
+    var _this = this;
+    
+    this.$displayButton = this.$.find(".Ldt-AnnotationsController-ShowAnnotationsListButton");
+    this.$writeButton = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
+    
+    this.$writeButton.click(function(){
+        _this.player.trigger("CreateAnnotation.toggle");
+        if (_this.display_or_write){
+            _this.player.trigger("AnnotationsList.hide");
+        }
+    });
+    this.$displayButton.click(function(){
+        _this.player.trigger("AnnotationsList.toggle");
+        if (_this.display_or_write){
+            _this.player.trigger("CreateAnnotation.hide");
+        }
+    })
+};