Binary file assets/left_handle.psd has changed

Binary file assets/right_handle.psd has changed

--- a/src/css/LdtPlayer.css	Wed Dec 28 10:39:54 2011 +0100
+++ b/src/css/LdtPlayer.css	Wed Dec 28 11:38:30 2011 +0100
@@ -529,3 +529,42 @@
   top: 0px;
   opacity: 0.3;
 }
+
+.Ldt-sliceWidget {
+  position: relative;
+  width: 100%;
+  height: 25px;
+  margin-top: 3px;
+}
+
+.Ldt-sliceBackground {
+  width: 100%;
+  background-color: #b6b8b8;
+  height: 12px;
+}
+
+.Ldt-sliceZone {
+  position: absolute;
+  top: 0px;
+  background:url('imgs/wire_pattern.png') repeat scroll transparent;
+  height: 12px;
+  z-index: 2;
+}
+
+.Ldt-sliceLeftHandle {
+  position: absolute;
+  top: 0px;
+  height: 25px;
+  width: 7px;
+  background:url('imgs/left_handle.gif') no-repeat scroll transparent;
+  z-index: 2;
+}
+
+.Ldt-sliceRightHandle {
+  position: absolute;
+  top: 0px;
+  height: 25px;
+  width: 7px;
+  background:url('imgs/right_handle.gif') no-repeat scroll transparent;
+  z-index: 2;
+}

Binary file src/css/imgs/left_handle.gif has changed

Binary file src/css/imgs/right_handle.gif has changed

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/sliceWidget.js	Wed Dec 28 11:38:30 2011 +0100
@@ -0,0 +1,104 @@
+/** A widget to create a new segment */
+IriSP.SliceWidget = function(Popcorn, config, Serializer) {
+  IriSP.Widget.call(this, Popcorn, config, Serializer);
+  
+};
+
+IriSP.SliceWidget.prototype = new IriSP.Widget();
+
+IriSP.SliceWidget.prototype.draw = function() {
+  var templ = Mustache.to_html(IriSP.sliceWidget_template);
+  this.selector.append(templ);
+  
+  this.sliceZone = this.selector.find(".Ldt-sliceZone");
+  
+  /* global variables used to keep the position and width
+     of the zone.
+  */  
+  this.zoneLeft = 0;
+  this.zoneWidth = 0;
+  
+  this.leftHandle = this.selector.find(".Ldt-sliceLeftHandle");
+  this.rightHandle = this.selector.find(".Ldt-sliceRightHandle");
+
+  this.leftHandle.draggable({axis: "x",
+  drag: IriSP.wrap(this, this.leftHandleDragged),  
+  containment: "parent"
+  });
+
+  this.rightHandle.draggable({axis: "x",
+  drag: IriSP.wrap(this, this.rightHandleDragged),    
+  containment: "parent"
+  });
+
+  
+  this._Popcorn.listen("IriSP.SliceWidget.position", 
+                        IriSP.wrap(this, this.positionSliceHandler));
+  this._Popcorn.trigger("IriSP.SliceWidget.position", [57, 24]);
+};
+
+IriSP.SliceWidget.prototype.positionSliceHandler = function(params) {
+  left = params[0];
+  width = params[1];
+  
+  this.zoneLeft = left;
+  this.zoneWidth = width;
+  this.sliceZone.css("left", left + "px");
+  this.sliceZone.css("width", width + "px");
+  this.leftHandle.css("left", (left - 7) + "px");
+  this.rightHandle.css("left", left + width + "px");
+};
+
+/*
+IriSP.SliceWidget.prototype.leftHandleDragged = function(event, ui) {
+  var currentX = this.leftHandle.position()["left"];
+  
+  var parentOffset = this.selector.offset();  
+  var relX = event.pageX - parentOffset.left;
+  
+  
+  var increment = this.zoneLeft - relX;
+  console.log(increment);
+
+  this.sliceZone.css("width", this.zoneWidth + increment);
+  this.sliceZone.css("left", relX + "px");
+  this.zoneLeft = relX;
+  this.zoneWidth += increment;
+};
+*/
+
+/** handle a dragging of the left handle */
+IriSP.SliceWidget.prototype.leftHandleDragged = function(event, ui) {
+  var currentX = this.leftHandle.position()["left"];
+    
+  var increment = this.zoneLeft - (currentX + 7);
+  
+  this.zoneWidth += increment;
+  this.zoneLeft = currentX + 7;
+  this.sliceZone.css("width", this.zoneWidth);
+  this.sliceZone.css("left", this.zoneLeft + "px");
+  this.broadcastChanges();
+};
+
+/** handle a dragging of the right handle */
+IriSP.SliceWidget.prototype.rightHandleDragged = function(event, ui) { 
+  var currentX = this.rightHandle.position()["left"];
+    
+  var increment = currentX - (this.zoneLeft + this.zoneWidth);  
+
+  this.zoneWidth += increment;  
+  this.sliceZone.css("width", this.zoneWidth);
+  this.broadcastChanges();
+};
+
+/** tell to the world that the coordinates of the slice have
+    changed 
+*/
+IriSP.SliceWidget.prototype.broadcastChanges = function() {
+  var leftPercent = (this.zoneLeft / this.selector.width()) * 100;
+  var zonePercent = (this.zoneWidth / this.selector.width()) * 100;
+  console.log(leftPercent, zonePercent);
+  
+  this._Popcorn.trigger("IriSP.SliceWidget.zoneChange", [leftPercent, zonePercent]);
+  
+};
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/sliceWidget.html	Wed Dec 28 11:38:30 2011 +0100
@@ -0,0 +1,10 @@
+{{! template for the slice widget }}
+<div class='Ldt-sliceWidget'>
+  {{! the whole bar }}
+  <div class='Ldt-sliceBackground'></div>
+  
+  <div class='Ldt-sliceLeftHandle'></div>
+  {{! the zone which represents our slice }}
+  <div class='Ldt-sliceZone'></div>   
+  <div class='Ldt-sliceRightHandle'></div>
+</div>

--- a/test/integration/polemic.htm	Wed Dec 28 10:39:54 2011 +0100
+++ b/test/integration/polemic.htm	Wed Dec 28 11:38:30 2011 +0100
@@ -82,7 +82,13 @@
                 type:'empty'
               }
              }],
-            },
+            },            
+            {type: "SliceWidget",
+             metadata:{
+              format:'cinelab',
+              src:'polemic_fr.json',
+              type:'json'}
+            },            
             {type: "ArrowWidget",
              metadata:{
               format:'cinelab',
@@ -90,6 +96,7 @@
               type:'json'}
             },
 
+
             {type: "AnnotationsWidget",
 						 metadata:{
 						  format:'cinelab',