--- a/src/widgets/Slice.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Slice.js	Thu Jan 02 16:49:20 2014 +0100
@@ -10,72 +10,90 @@
 IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Slice.prototype.defaults = {
-    show_arrow: false
+    start_visible : false,
+    live_update : true,
+        /* Shall the bounds change each time
+        the Annotation Widget sends an update (true)
+        or only when "show" is triggered (false) ?
+        - true is to be recommended when the widget is permanently displayed.
+        */
+    override_bounds : true
+        /* Can the Annotation Widget bounds be overriden ? */
 };
 
-IriSP.Widgets.Slice.prototype.template =
-    '<div class="Ldt-Slice"></div>'
-    + '{{#show_arrow}}<div class="Ldt-Slice-Arrow"></div>{{/show_arrow}}';
-
 IriSP.Widgets.Slice.prototype.draw = function() {
     
-    this.renderTemplate();
-    
-    this.$slider = this.$.find(".Ldt-Slice");
+    this.$slider = IriSP.jQuery('<div>')
+        .addClass("Ldt-Slice")
     
-    if (this.show_arrow) {
-        this.insertSubwidget(this.$.find(".Ldt-Slice-Arrow"), { type: "Arrow" },"arrow");
-    }
+    this.$.append(this.$slider);
     
     this.min = 0;
-    this.max = this.media.duration.valueOf();
+    this.max = this.source.getDuration().valueOf();
     
     var _this = this,
         _currentTime;
     
     this.$slider.slider({
         range: true,
-        values: [0, this.max],
+        values: [0, 0],
         min: 0,
         max: this.max,
         change: function(event, ui) {
-            if (_this.arrow) {
-                _this.arrow.moveToTime((ui.values[0]+ui.values[1])/2);
-            }
-            if (_this.onBoundsChanged) {
-                _this.onBoundsChanged(ui.values[0],ui.values[1]);
-            }
+            _this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{
+                widget:_this.type,
+                time:Math.floor((ui.values[0]+ui.values[1])/2)
+            });
+            _this.player.popcorn.trigger("IriSP.Slice.boundsChanged",[ui.values[0], ui.values[1]]);
         },
         start: function() {
             _this.sliding = true;
-            if (!_this.media.getPaused()) {
-                _this.media.pause();
+            if (!_this.player.popcorn.media.paused) {
+                _this.player.popcorn.pause();
             }
-            _currentTime = _this.media.getCurrentTime();
+            _currentTime = _this.player.popcorn.currentTime();
         },
         slide: function(event, ui) {
-            _this.media.setCurrentTime(ui.value);
+            if (!_this.override_bounds && (ui.value < _this.min || ui.value > _this.max)) {
+                return false;
+            }
+            _this.player.popcorn.currentTime(ui.value / 1000);
         },
         stop: function() {
             _this.sliding = false;
-            _this.media.setCurrentTime(_currentTime);
+            _this.player.popcorn.currentTime(_currentTime);
         }
     });
-    
     this.$slider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
     this.$slider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
-    
-    this.getWidgetAnnotations().forEach(function(_a) {
-        _a.on("enter", function() {
-            _this.$slider.slider("values",[_a.begin, _a.end]);
-        });
-    });
+    if (this.start_visible) {
+        this.show();
+    } else {
+        this.hide();
+    }
+    this.bindPopcorn("IriSP.Slice.show","show");
+    this.bindPopcorn("IriSP.Slice.hide","hide");
+    this.bindPopcorn("IriSP.Annotation.boundsChanged","storeBounds");
+    this.player.popcorn.trigger("IriSP.Annotation.getBounds");
 };
 
 IriSP.Widgets.Slice.prototype.show = function() {
     this.$slider.show();
-};
+    this.player.popcorn.trigger("IriSP.Arrow.takeover",this.type);
+    this.$slider.slider("values", [this.min, this.max]);
+}
 
 IriSP.Widgets.Slice.prototype.hide = function() {
     this.$slider.hide();
-};
+    this.player.popcorn.trigger("IriSP.Arrow.release");
+}
+
+IriSP.Widgets.Slice.prototype.storeBounds = function(_values) {
+    if (!this.player.popcorn.media.paused && (this.min != _values[0] || this.max != _values[1])) {
+        this.min = _values[0];
+        this.max = _values[1];
+        if (this.live_update && !this.sliding) {
+            this.$slider.slider("values", [this.min, this.max]);
+        }
+    }
+}
\ No newline at end of file