--- a/src/js/widgets/createAnnotationWidget.js	Thu Dec 29 17:14:10 2011 +0100
+++ b/src/js/widgets/createAnnotationWidget.js	Fri Dec 30 11:55:54 2011 +0100
@@ -2,6 +2,7 @@
   IriSP.Widget.call(this, Popcorn, config, Serializer);
   this._hidden = true;
   this.keywords = IriSP.widgetsDefaults["createAnnotationWidget"].keywords;
+  this.ids = {}; /* a dictionnary linking buttons ids to keywords */
 };
 
 
@@ -35,12 +36,31 @@
   
   this.selector.hide();
   for (var i = 0; i < this.keywords.length; i++) {
-    var templ = IriSP.templToHTML("<span class='Ldt-createAnnotation-absent-keyword'>{{keyword}}</span>", 
-                                  {keyword: this.keywords[i]});
+    var keyword = this.keywords[i];
+    var id = IriSP.guid("button_");
+    var templ = IriSP.templToHTML("<button id={{id}} class='Ldt-createAnnotation-absent-keyword'>{{keyword}}</button>", 
+                                  {keyword: keyword, id: id});
                                   
+    this.ids[keyword] = id; // save it for the function that handle textarea changes.
+    
     this.selector.find(".Ldt-createAnnotation-keywords").append(templ);
+    this.selector.find("#" + id).click(function(keyword) { return function() {
+      var contents = _this.selector.find(".Ldt-createAnnotation-Description").val();
+      if (contents.indexOf(keyword) != -1) {
+        var newVal = contents.replace(keyword, "");        
+      } else {
+        var newVal = contents + keyword;      
+      }
+      
+      _this.selector.find(".Ldt-createAnnotation-Description").val(newVal);
+      // also call our update function.
+      _this.handleTextChanges();
+    }
+   }(keyword));
   }
   
+  this.selector.find(".Ldt-createAnnotation-Description")
+               .bind("propertychange keyup input paste", IriSP.wrap(this, this.handleTextChanges));
   
   this._Popcorn.listen("IriSP.PlayerWidget.AnnotateButton.clicked", 
                         IriSP.wrap(this, this.handleAnnotateSignal));  
@@ -54,4 +74,27 @@
     this.selector.show();
     this._hidden = false;
   }
+};
+
+/** watch for changes in the textfield and change the buttons accordingly */
+IriSP.createAnnotationWidget.prototype.handleTextChanges = function(event) {
+  var contents = this.selector.find(".Ldt-createAnnotation-Description").val();
+
+  for(var keyword in this.ids) {
+  
+    var id = this.ids[keyword];
+
+    if (contents.indexOf(keyword) != -1) {
+      /* the word is present in the textarea but the button is not toggled */
+      if (this.selector.find("#" + id).hasClass("Ldt-createAnnotation-absent-keyword"))
+          this.selector.find("#" + id).removeClass("Ldt-createAnnotation-absent-keyword")
+                                      .addClass("Ldt-createAnnotation-present-keyword");      
+    } else {
+      /* the word is absent from the textarea but the button is toggled */
+      if (this.selector.find("#" + id).hasClass("Ldt-createAnnotation-present-keyword")) {
+          this.selector.find("#" + id).removeClass("Ldt-createAnnotation-present-keyword")
+                                      .addClass("Ldt-createAnnotation-absent-keyword");
+      }
+    }
+  }
 };
\ No newline at end of file