diff -r bd904d592881 -r c9dc489913af integration/js/editor.js
--- a/integration/js/editor.js	Thu Oct 25 18:52:44 2012 +0200
+++ b/integration/js/editor.js	Fri Oct 26 18:54:20 2012 +0200
@@ -49,15 +49,18 @@
     
     /* Slider */
    
-    var timeSlider = $(".Ldt-Slider");
+    var timeSlider = $(".Ldt-Slider"),
+        slidersRange = 920;
     timeSlider.slider({
         range: "min",
         value: 0,
         min: 0,
-        max: 920,
+        max: slidersRange,
         slide: function(event, ui) {
-            console.log(ui.value);
-            //TODO: Slide to correct Timecode
+            if (currentMedia) {
+                var t = currentMedia.duration * ui.value / slidersRange;
+                currentMedia.setCurrentTime(t);
+            }
         }
     });
     
@@ -106,7 +109,9 @@
         .mouseout(timeSliderMouseOut)
         .mousemove(function(_e) {
             var _x = _e.pageX - timeSlider.offset().left,
-                _t = new IriSP.Model.Time(); // _this.media.duration * _x / _this.width
+                _t = new IriSP.Model.Time(
+                    currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
+                );
             timeTooltip.text(_t.toString()).css("left",_x);
         });
     
@@ -146,7 +151,7 @@
    
     var volBlock = $(".Ldt-Ctrl-Volume-Control");
     $('.Ldt-Ctrl-Sound')
-        .click(function(){}) //TODO: Add Mute Handler
+        .click(function(){}) //TODO: Add Mute and Volume Handlers
         .mouseover(function() {
             volBlock.show();
         })
@@ -170,19 +175,224 @@
         }
     });
     
+    $(".Ldt-Ctrl-Play").click(function() {
+        if (currentMedia) {
+            if (currentMedia.getPaused()) {        
+                currentMedia.play();
+            } else {
+                currentMedia.pause();
+            }
+        }
+    });
+    
+    /* Slice Widget */
+    var sliceSlider = $(".Ldt-Slice"),
+        sliceStartTime;
+        
+    function setTangles(sliderValues) {
+        //TODO: Move to Annotation.on("changebounds")
+        if (currentMedia) {
+            startTime = new IriSP.Model.Time(currentMedia.duration * sliderValues[0] / slidersRange),
+            endTime = new IriSP.Model.Time(currentMedia.duration * sliderValues[1] / slidersRange),
+            duration = new IriSP.Model.Time(endTime - startTime);
+            $(".tangle-start").text(startTime.toString()).attr("data-milliseconds",startTime.milliseconds);
+            $(".tangle-end").text(endTime.toString()).attr("data-milliseconds",endTime.milliseconds);
+            $(".tangle-duration").text(duration.toString()).attr("data-milliseconds",duration.milliseconds);
+        }
+    }
+    
+    sliceSlider.slider({
+        range: true,
+        values: [0, slidersRange],
+        min: 0,
+        max: slidersRange,
+        change: function(event, ui) {
+            setTangles(ui.values); // Not the right place to put it
+        },
+        start: function() {
+            if (currentMedia) {
+                if (!currentMedia.getPaused()) {
+                    currentMedia.pause();
+                }
+//                sliceStartTime = currentMedia.getCurrentTime(); 
+            }
+        },
+        slide: function(event, ui) {
+            if (currentMedia) {
+                var t = currentMedia.duration * ui.value / slidersRange;
+                currentMedia.setCurrentTime(t);
+            }
+            setTangles(ui.values);
+        },
+        stop: function() {
+            if (currentMedia && sliceStartTime) {
+//                currentMedia.setCurrentTime(sliceStartTime);
+            }
+        }
+    });
+    
+    sliceSlider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
+    sliceSlider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
+    
+    /* UI Events */
+
+    function onCurrentMediaPlay() {
+        $(".Ldt-Ctrl-Play")
+            .attr("title", "Pause")
+            .removeClass("Ldt-Ctrl-Play-PlayState")
+            .addClass("Ldt-Ctrl-Play-PauseState")
+    }
+    
+    function onCurrentMediaPause() {
+        $(".Ldt-Ctrl-Play")
+            .attr("title", "Lecture")
+            .removeClass("Ldt-Ctrl-Play-PauseState")
+            .addClass("Ldt-Ctrl-Play-PlayState")
+    }
+    
+    function onCurrentMediaTimeupdate(_time) {
+        $(".Ldt-Ctrl-Time-Elapsed").text(_time.toString());
+        timeSlider.slider("value",slidersRange * _time / currentMedia.duration);
+    }
+    
     /* Set current Media */
     var currentMedia;
     
     function setMedia(mediaid) {
+        $(".col-left .item-video").removeClass("active");
+        $(".tutorial").hide();
+        $("video").hide();
+        if (currentMedia) {
+            currentMedia.pause();
+        }
         currentMedia = project.getElement(mediaid);
         if (currentMedia.elementType == "media") {
-            $("video").hide();
-            var currentvideo = $('video[data-media-id="' + mediaid + '"]');
-            console.log(currentvideo);
+            $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active");
+            showSegmentation();
+            var currentvideo = $('#video_' + mediaid);
+            if (!currentvideo.length) {
+                addMediaPlayer(currentMedia);
+                currentvideo = $('#video_' + mediaid);
+            }
+            $(".tab-media-title").text(currentMedia.title);
+            sliceSlider.slider("values",[0, slidersRange]);
         }
+        currentvideo.show();
+        $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());
+        onCurrentMediaTimeupdate(currentMedia.getCurrentTime());
+        onCurrentMediaPause();
     }
     
     function addMediaPlayer(media) {
+        var videoid = "video_" + media.id,
+            videoEl = $('<video>'),
+            width = $(".video").width(),
+            height = $(".video").height(),
+            mp4_file = media.video.replace(/\.webm$/i,'.mp4'),
+            webm_file = media.video.replace(/\.mp4$/i,'.webm'),
+            mp4_src = $('<source>'),
+            webm_src = $('<source>');
+        mp4_src.attr({
+            src: mp4_file,
+            type: "video/mp4"
+        });
+        webm_src.attr({
+            src: webm_file,
+            type: "video/webm"
+        });
+        videoEl.attr({
+            id : videoid,
+            width : width,
+            height : height
+        }).css({
+            position : "absolute",
+            left: 0,
+            top: 0,
+            width : width,
+            height : height
+        });
+        videoEl.append(mp4_src).append(webm_src);
+        $(".video").append(videoEl);
+
+        var popcorn = Popcorn("#" + videoid);
+        
+        // Binding functions to Popcorn
+        
+        media.on("setcurrenttime", function(_milliseconds) {
+            popcorn.currentTime(_milliseconds / 1000);
+        });
+        
+        media.on("setvolume", function(_vol) {
+            popcorn.volume(_vol);
+            media.volume = _vol;
+        });
+        
+        media.on("setmuted", function(_muted) {
+            popcorn.muted(_muted);
+            media.muted = _muted;
+        });
+        
+        media.on("setplay", function() {
+            popcorn.play();
+        });
+        
+        media.on("setpause", function() {
+            popcorn.pause();
+        });
+        
+        // Binding Popcorn events to media
+        
+        function getVolume() {
+            media.muted = popcorn.muted();
+            media.volume = popcorn.volume();
+        }
+        
+        popcorn.on("loadedmetadata", function() {
+            getVolume();
+            media.trigger("loadedmetadata");
+            media.trigger("volumechange");
+        })
+        
+        popcorn.on("timeupdate", function() {
+            media.trigger("timeupdate", new IriSP.Model.Time(1000*popcorn.currentTime()));
+        });
+        
+        popcorn.on("volumechange", function() {
+            getVolume();
+            media.trigger("volumechange");
+        })
+        
+        popcorn.on("play", function() {
+            media.trigger("play");
+        });
+        
+        popcorn.on("pause", function() {
+            media.trigger("pause");
+        });
+        
+        popcorn.on("seeked", function() {
+            media.trigger("seeked");
+        });
+        
+        // Binding UI Events to Media
+        
+        media.on("play", function() {
+            if (media === currentMedia) {
+                onCurrentMediaPlay();
+            }
+        });
+        
+        media.on("pause", function() {
+            if (media === currentMedia) {
+                onCurrentMediaPause();
+            }
+        });
+        
+        media.on("timeupdate", function(_time) {
+            if (media === currentMedia) {
+                onCurrentMediaTimeupdate(_time);
+            }
+        })
         
     }
     /* Click on media items */
@@ -202,7 +412,6 @@
         return false;
     }
     
-    $(".tab-segment").click(showSegmentation);
     $(".tab-pvw").click(showPreview);
     
     function disableMoveItemVideo() {
@@ -228,6 +437,34 @@
         disableMoveItemVideo();
     });
     
+    /* Tangle */
+    var activeTangle,
+        tangleStartX,
+        tangleStartVal;
+    $(".time-tangle").mousedown(function(evt) {
+        activeTangle = $(this);
+        activeTangle.addClass("active");
+        tangleStartVal = +activeTangle.attr("data-milliseconds");
+        tangleStartX = evt.pageX;
+        return false;
+    });
+    $(document)
+        .mousemove(function(evt) {
+            if (activeTangle) {
+                var newval = new IriSP.Model.Time(100 * (evt.pageX - tangleStartX) + tangleStartVal);
+                activeTangle.text(newval.toString());
+                activeTangle.attr("data-milliseconds",newval.milliseconds);
+                activeTangle.trigger("valuechange", newval);
+                return false;
+            }
+        })
+        .mouseup(function() {
+            if (activeTangle) {
+                activeTangle.removeClass("active");
+                activeTangle = undefined;
+            }
+        })
+    
 }
 
 $(function() {