diff -r 11a3be0689fc -r ab966883a458 integration/js/tangle.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/tangle.js	Tue May 21 17:41:57 2013 +0200
@@ -0,0 +1,62 @@
+/* Tangles */
+    var tangleMsPerPixel = 100,
+        activeTangle,
+        tangleStartX,
+        tangleStartVal,
+        tangleHasMoved;
+    
+    $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
+   // $(".time-tangle").mousedown(function(evt) {
+
+        activeTangle = $(this);
+        activeTangle.addClass("active");
+        tangleStartVal = +activeTangle.attr("data-milliseconds");
+        tangleStartX = evt.pageX;
+        tangleHasMoved = false;
+        $(this).siblings(".time-tangle").addClass("deactivate");
+        return false;
+    });
+    $(document)
+        .mousemove(function(evt) {
+            if (activeTangle) {
+                tangleHasMoved = true;
+                var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal);
+                activeTangle.trigger("valuechange", newval);
+                return false;
+            }
+        })
+        .mouseup(function() {
+            if (activeTangle) {
+                activeTangle.text(activeTangle.text().replace(/\.\d+$/,''));
+                $(".time-tangle").removeClass("active deactivate");
+                activeTangle = undefined;
+            }
+        });
+        
+    $(".tangle-start")
+        .mouseup(function(evt) {
+            if (!tangleHasMoved && currentMedia && currentSegment) {
+                currentMedia.setCurrentTime(currentSegment.begin);
+            }
+        })
+        .on("valuechange", function(evt, val) {
+            if (currentMedia && currentSegment) {
+                currentSegment.setBegin(val);
+            }
+        });
+    $(".tangle-end")
+        .mouseup(function(evt) {
+            if (!tangleHasMoved && currentMedia && currentSegment) {
+                currentMedia.setCurrentTime(currentSegment.end);
+            }
+        })
+        .on("valuechange", function(evt, val) {
+            if (currentMedia && currentSegment) {
+                currentSegment.setEnd(val);
+            }
+        });
+    $(".tangle-duration").on("valuechange", function(evt, val) {
+        if (currentMedia && currentSegment) {
+            currentSegment.setDuration(val);
+        }
+    });
\ No newline at end of file