# HG changeset patch
# User hamidouk
# Date 1328524668 -3600
# Node ID 2ae03b1d27970519b7e70141e70a96a5ebab7596
# Parent  52be94ec8e1c1303210bc91976b9dc0f8f55d988
WIP - trying to redo the slicewidget with raphael's idea.

diff -r 52be94ec8e1c -r 2ae03b1d2797 src/css/LdtPlayer.css
--- a/src/css/LdtPlayer.css	Mon Feb 06 10:56:39 2012 +0100
+++ b/src/css/LdtPlayer.css	Mon Feb 06 11:37:48 2012 +0100
@@ -585,22 +585,26 @@
   z-index: 2;
 }
 
-.Ldt-sliceLeftHandle {
+/* we are using a ruse here to make sure that everything stays in the boundaries */
+.Ldt-sliceLeftHandle div {
   position: absolute;
   top: 0px;
   height: 25px;
   width: 7px;
   background:url('imgs/left_handle.gif') no-repeat scroll transparent;
   z-index: 2;
+  margin-top: -12px;
+  left: -7px;
 }
 
-.Ldt-sliceRightHandle {
+.Ldt-sliceRightHandle div {
   position: absolute;
   top: 0px;
   height: 25px;
   width: 7px;
   background:url('imgs/right_handle.gif') no-repeat scroll transparent;
   z-index: 2;
+  margin-top: -12px;
 }
 
 .Ldt-createAnnotationWidget {
diff -r 52be94ec8e1c -r 2ae03b1d2797 src/js/widgets/sliceWidget.js
--- a/src/js/widgets/sliceWidget.js	Mon Feb 06 10:56:39 2012 +0100
+++ b/src/js/widgets/sliceWidget.js	Mon Feb 06 11:37:48 2012 +0100
@@ -24,42 +24,21 @@
   var left = this.selector.offset().left;
   var top = this.selector.offset().top;
 
-  // a bug in firefox makes it use the wrong format
-  if (!IriSP.jQuery.browser.mozilla) {
-    // contain the handles correctly - we cannot set
-    // containment: parent because it wouldn't allow to select the 
-    // whole slice, so we have to compute a box in which the slice is
-    // allowed to move.
-    var containment = [left - 8, top, this.selector.width() + left, top];
+  var containment = [left - 8, top, this.selector.width() + left, top];
 
-    // var containment = [left - 16, top, this.selector.width() + left - 8, top];
-    this.leftHandle.draggable({axis: "x",
-    drag: IriSP.wrap(this, this.leftHandleDragged),  
-    containment: containment
-    });
+  // var containment = [left - 16, top, this.selector.width() + left - 8, top];
+  this.leftHandle.draggable({axis: "x",
+  drag: IriSP.wrap(this, this.leftHandleDragged),  
+  containment: "parent"
+  });
 
-    containment = [left, top, this.selector.width() + left, top];
-    // containment = [left, top, this.selector.width() + left - 8, top];
-    this.rightHandle.draggable({axis: "x",
-    drag: IriSP.wrap(this, this.rightHandleDragged),    
-    containment: containment
-    });
+  containment = [left, top, this.selector.width() + left, top];
+  // containment = [left, top, this.selector.width() + left - 8, top];
+  this.rightHandle.draggable({axis: "x",
+  drag: IriSP.wrap(this, this.rightHandleDragged),    
+  containment: "parent"
+  });
   
-  } else { // firefox
-    // we need to define a containment specific to firefox.
-    
-    var containment = [left - 16, top, this.selector.width() + left - 8, top];
-    this.leftHandle.draggable({axis: "x",
-    drag: IriSP.wrap(this, this.leftHandleDragged),  
-    containment: containment
-    });
-
-    containment = [left, top, this.selector.width() + left - 8, top];
-    this.rightHandle.draggable({axis: "x",
-    drag: IriSP.wrap(this, this.rightHandleDragged),    
-    containment: containment
-    });
-  }
   
   this.leftHandle.css("position", "absolute");
   this.rightHandle.css("position", "absolute");
diff -r 52be94ec8e1c -r 2ae03b1d2797 src/templates/sliceWidget.html
--- a/src/templates/sliceWidget.html	Mon Feb 06 10:56:39 2012 +0100
+++ b/src/templates/sliceWidget.html	Mon Feb 06 11:37:48 2012 +0100
@@ -3,8 +3,12 @@
   {{! the whole bar }}
   <div class='Ldt-sliceBackground'></div>
   
-  <div class='Ldt-sliceLeftHandle'></div>
+  <div class='Ldt-sliceLeftHandle' style='width: 0px;'>
+    <div></div> <!-- div containing the slice image -->
+  </div>
   {{! the zone which represents our slice }}
   <div class='Ldt-sliceZone'></div>   
-  <div class='Ldt-sliceRightHandle'></div>
+  <div class='Ldt-sliceRightHandle' style='width: 0px;'>
+    <div></div> <!-- div containing the slice image -->
+  </div>
 </div>