--- a/src/widgets/Slice.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Slice.js	Thu Jan 02 16:40:25 2014 +0100
@@ -10,90 +10,72 @@
 IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Slice.prototype.defaults = {
-    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 ? */
+    show_arrow: false
 };
 
+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.$slider = IriSP.jQuery('<div>')
-        .addClass("Ldt-Slice")
+    this.renderTemplate();
+    
+    this.$slider = this.$.find(".Ldt-Slice");
     
-    this.$.append(this.$slider);
+    if (this.show_arrow) {
+        this.insertSubwidget(this.$.find(".Ldt-Slice-Arrow"), { type: "Arrow" },"arrow");
+    }
     
     this.min = 0;
-    this.max = this.source.getDuration().valueOf();
+    this.max = this.media.duration.valueOf();
     
     var _this = this,
         _currentTime;
     
     this.$slider.slider({
         range: true,
-        values: [0, 0],
+        values: [0, this.max],
         min: 0,
         max: this.max,
         change: function(event, ui) {
-            _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]]);
+            if (_this.arrow) {
+                _this.arrow.moveToTime((ui.values[0]+ui.values[1])/2);
+            }
+            if (_this.onBoundsChanged) {
+                _this.onBoundsChanged(ui.values[0],ui.values[1]);
+            }
         },
         start: function() {
             _this.sliding = true;
-            if (!_this.player.popcorn.media.paused) {
-                _this.player.popcorn.pause();
+            if (!_this.media.getPaused()) {
+                _this.media.pause();
             }
-            _currentTime = _this.player.popcorn.currentTime();
+            _currentTime = _this.media.getCurrentTime();
         },
         slide: function(event, ui) {
-            if (!_this.override_bounds && (ui.value < _this.min || ui.value > _this.max)) {
-                return false;
-            }
-            _this.player.popcorn.currentTime(ui.value / 1000);
+            _this.media.setCurrentTime(ui.value);
         },
         stop: function() {
             _this.sliding = false;
-            _this.player.popcorn.currentTime(_currentTime);
+            _this.media.setCurrentTime(_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");
-    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");
+    
+    this.getWidgetAnnotations().forEach(function(_a) {
+        _a.on("enter", function() {
+            _this.$slider.slider("values",[_a.begin, _a.end]);
+        });
+    });
 };
 
 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
+};