diff -r 76efa2333f31 -r 3ec2343f2b85 integration/js/editor.js
--- a/integration/js/editor.js	Tue Nov 06 18:49:13 2012 +0100
+++ b/integration/js/editor.js	Thu Nov 08 18:24:47 2012 +0100
@@ -13,8 +13,7 @@
     mashup_title_placeholder: "Hashcut sans titre"
 }
 
-IriSP.Hashcut = function(options) {
-    
+IriSP.editor = function(options) {
     
     /* Load Media List */
     
@@ -24,48 +23,60 @@
             serializer: IriSP.serializers.medialist
         }),
         mashup = new IriSP.Model.Mashup(false, project),
-        mediatemplate = _.template('<li class="item-video" data-media-id="<%= id %>"><img src="<%= thumbnail %>" alt="<%= title %>" />'
+        mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><img src="<%= thumbnail %>" alt="<%= title %>" />'
             + '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>'
             + '<span class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></span></span></li>'),
-        segmenttemplate = _.template('<li class="item-video" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
+        segmenttemplate = _.template('<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
             + '<img src="<%= annotation.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
             + '<div class="validate <%= annotation.status %>"><div class="validate-tooltip"><ul><li><%= annotation.status_messages.join("</li><li>") %></li></ul></div></div><span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>'
             + '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>'
             + '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.hc_messages.edit_segment %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.hc_messages.segment_down %>"></a></li>'
             + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></span></li>'),
-        viztemplate = _.template('<div class="frise-segment" data-segment-id="<%= segmentid %>" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
-        intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>'),
         mediasegmenttemplate = _.template('<div class="media-segments-list"><div class="media-segment">'
-            + '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= annotation.getMedia().color %>"></div>'
+            + '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= annotation.color %>"></div>'
             + '<div class="media-section media-current-section" style="left:<%= currentleft %>px; width:<%= currentwidth %>px;"><div class="media-current-section-inner"></div></div>'
             + '<div class="popin media-segment-popin" style="left:<%= popleft %>px"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'
             + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>'
             + '<p><%= IriSP.hc_messages.From_ %> <span><%= annotation.begin.toString() %></span> <%= IriSP.hc_messages.to_ %> <span><%= annotation.end.toString() %></span> (<%= IriSP.hc_messages.duration_ %> <span><%= annotation.getDuration().toString() %></span>)</p>'
-            + '</div></div></div></div>');
+            + '</div></div></div></div>'),
+        addMode, currentMedia, currentSegment;
+    
+    IriSP.mashupcore(project, mashup);
     
     /* Validation of segments and mashup */
     
     var segmentcritical = [
         {
             validate: function(_s) {
-                var _d = _s.getDuration();
-                return (_d > 1000 && _d < 180000);
+                return (_s.getDuration() >= 1000);
             },
-            message: "La durée du segment doit être comprise entre 1 seconde et trois minutes"
+            message: "Le segment doit durer au moins une seconde"
+        },
+        {
+            validate: function(_s) {
+                return (_s.getDuration() < 180000);
+            },
+            message: "Le segment doit durer moins de trois minutes"
         },
         {
             validate: function(_s) {
                 return (!!_s.title && _s.title !== IriSP.hc_messages.segment_title_placeholder);
             },
-            message: "Un titre doit être donné au segment"
+            message: "Le segment doit avoir un titre"
         }
     ];
     var segmentwarning = [
         {
             validate: function(_s) {
-                return (_s.description);
+                return (!!_s.description);
             },
             message: "Il est recommandé de donner une description au segment"
+        },
+        {
+            validate: function(_s) {
+                return (!!_s.keywords.length);
+            },
+            message: "Il est recommandé de tagguer le segment"
         }
     ];
     
@@ -129,30 +140,14 @@
     });
     
     /* Fill right column when mashup is updated */
-   
-    function setPointerToCurrentAnnotation() {
-        if (mashupCurrentAnnotation) {
-            var p = (mashupCurrentAnnotation.begin + mashupCurrentAnnotation.end) / (2 * mashup.duration);
-            $(".mashup-description .pointer").css("left", (100 * p) + "%");
-        }
-    }
     
     function updateMashupUI() {
-        var listhtml = '', vizhtml = '', t = 0, k = mashup.duration ? (100 / mashup.duration) : 0;
-        var critical = false, warning = false, messages = [];
+        var listhtml = '', critical = false, warning = false, messages = [];
         mashup.segments.forEach(function(_s) {
             listhtml += segmenttemplate(_s);
-            var vizdata = {
-                left: k * t,
-                width: k * _s.duration,
-                color: _s.getMedia().color,
-                segmentid: _s.annotation.id
-            }
-            vizhtml += viztemplate(vizdata);
             if (_s.annotation.status === "critical") {
                 critical = true;
             }
-            t += _s.duration.milliseconds;
         });
         if (critical) {
             messages.push("Certains segments ne sont pas valides");
@@ -179,217 +174,22 @@
         $(".liste-segment .validate").removeClass("critical warning valid").addClass(mashup.status);
         $(".liste-segment .validate-tooltip").html("<ul><li>" + messages.join("</li><li>")+"</li></ul>");
         
-        var intervals = [ 1000, 2000, 5000, 10000, 30000, 60000, 120000, 300000, 600000, 900000, 1800000, 3600000, 7200000 ];
-        
-        function createIntervals(maxn) {
-            for (var i = 0; i < intervals.length; i++) {
-                if (mashup.duration / intervals[i] <= maxn) {
-                    var html = '';
-                    for (var j = intervals[i]; j < mashup.duration; j += intervals[i]) {
-                        html += intervaltemplate({ left: k * j, time: new IriSP.Model.Time(j) });
-                    }
-                    return html;
-                }
-            }
-            return "";
-        }
+        $(".col-right .list-video").html(listhtml).find(".item-video:last-child .bottom, .item-video:first-child .top").addClass("disable");
         
-        $(".col-right .list-video").html(listhtml).find(".item-video:last-child .bottom, .item-video:first-child .top").addClass("disable");
-        $(".mashup-total-duration").text(mashup.duration.toString());
-        $(".frise-segments").html(vizhtml);
-        $(".col-right .frise-indications").html(createIntervals(4));
-        $(".bloc-pvw .frise-indications").html(createIntervals(8));
-        highlightCurrentSegment();
-        if (currentMedia === mashup) {
-            $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());
-            if (mashupTimecode > mashup.duration) {
-                mashup.setCurrentTime(mashup.duration);
-            }
-            changeCurrentAnnotation();
-            setPointerToCurrentAnnotation();
-        }
-    }
-    
-    mashup.on("change",updateMashupUI);
-    
-    /* Slider */
-   
-    var timeSlider = $(".Ldt-Slider"),
-        timeSliderContainer = $(".Ldt-Slider-Container"),
-        slidersRange = 920;
-    timeSlider.slider({
-        range: "min",
-        value: 0,
-        min: 0,
-        max: slidersRange,
-        slide: function(event, ui) {
-            if (currentMedia) {
-                var t = currentMedia.duration * ui.value / slidersRange;
-                currentMedia.setCurrentTime(t);
-            }
-        }
-    });
-    
-    var timeSliderHandle = timeSlider.find('.ui-slider-handle'),
-        timeSliderMaximized = false,
-        timeSliderTimeoutId = false,
-        timeSliderMinimizedHeight = 4,
-        timeSliderMaximizedHeight = 10,
-        timeSliderTimeoutDuration = 1500,
-        timeTooltip = $(".Ldt-Slider-Time");
-    
-    timeSliderContainer.css(calculateSliderCss(timeSliderMinimizedHeight));
-    timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight));
-    
-    function timeSliderMouseOver() {
-        if (timeSliderTimeoutId) {
-            window.clearTimeout(timeSliderTimeoutId);
-            timeSliderTimeoutId = false;
-        }
-        if (!timeSliderMaximized) {
-           timeSliderAnimateToHeight(timeSliderMaximizedHeight);
-           timeSliderMaximized = true;
-        }
-    }
-    
-    function timeSliderMouseOut() {
-        timeTooltip.hide();
-        if (timeSliderTimeoutId) {
-            clearTimeout(timeSliderTimeoutId);
-            timeSliderTimeoutId = false;
-        }
-        timeSliderTimeoutId = setTimeout(function() {
-            if (timeSliderMaximized) {
-                timeSliderAnimateToHeight(timeSliderMinimizedHeight);
-                timeSliderMaximized = false;
-            }
-            timeSliderTimeoutId = false;
-        }, timeSliderTimeoutDuration);
+        project.trigger("mouseout-annotation");
     }
     
-    timeSliderContainer
-        .mouseover(function() {
-            timeTooltip.show();
-            timeSliderMouseOver();
-        })
-        .mouseout(timeSliderMouseOut);
-    timeSlider.mousemove(function(_e) {
-            var _x = _e.pageX - timeSlider.offset().left,
-                _t = new IriSP.Model.Time(
-                );
-            timeTooltip.text(_t.toString()).css("left",_x);
-        });
-    
-    $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
-    
-    function timeSliderAnimateToHeight(_height) {
-        timeSliderContainer.stop().animate(
-            calculateSliderCss(_height),
-            500,
-            function() {
-                IriSP.jQuery(this).css("overflow","visible");
-            });
-        timeSliderHandle.stop().animate(
-            calculateHandleCss(_height),
-            500,
-            function() {
-                IriSP.jQuery(this).css("overflow","visible");
-            });
-    }
-
-    function calculateSliderCss(_size) {
-        return {
-            height: _size + "px",
-            "margin-top": (timeSliderMinimizedHeight - _size) + "px"
-        };
-    }
-
-    function calculateHandleCss(_size) {
-        return {
-            height: (2 + _size) + "px",
-            width: (2 + _size) + "px",
-            "margin-left": -Math.ceil(2 + _size / 2) + "px" 
-        }
-    }
-    
-    /* Controller Widget */
-   
-    var volBlock = $(".Ldt-Ctrl-Volume-Control");
-    
-    $('.Ldt-Ctrl-Sound')
-        .click(function() {
-            if (currentMedia) {
-                currentMedia.setMuted(!currentMedia.getMuted());
-            }
-        })
-        .mouseover(function() {
-            volBlock.show();
-        })
-        .mouseout(function() {
-            volBlock.hide();
-        });
-    volBlock.mouseover(function() {
-        volBlock.show();
-    }).mouseout(function() {
-        volBlock.hide();
+    mashup.on("setcurrent", function() {
+        currentMedia = mashup;
     });
     
-    var volBar = $(".Ldt-Ctrl-Volume-Bar");
-    
-    function ctrlVolumeUpdater() {
-        if (currentMedia) {
-            var _muted = currentMedia.getMuted(),
-                _vol = currentMedia.getVolume();
-            if (_vol === false) {
-                _vol = .5;
-            }
-            var _soundCtl = $(".Ldt-Ctrl-Sound");
-            _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full");
-            if (_muted) {        
-                _soundCtl.attr("title", "Activer le son")
-                    .addClass("Ldt-Ctrl-Sound-Mute");    
-            } else {
-                _soundCtl.attr("title", "Couper le son")
-                    .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" )
-            }
-            volBar.slider("value", _muted ? 0 : 100 * _vol);
-            volBar.attr("title",'Volume : ' + Math.floor(100 * _vol) + '%');
-        }
-    }
-    
-    volBar.slider({
-        slide: function(event, ui) {
-            if (currentMedia) {
-                currentMedia.setVolume(ui.value / 100);
-            }
-        }
-    });
-    
-    $(".Ldt-Ctrl-Play").click(function() {
-        if (currentMedia) {
-            if (currentMedia.getPaused()) {        
-                currentMedia.play();
-            } else {
-                currentMedia.pause();
-            }
-        }
-    });
-    
-    $(".Ldt-Ctrl-SetIn").click(function() {
-        if (currentMedia && currentSegment) {
-            currentSegment.setBegin(currentMedia.getCurrentTime());
-        }
-    });
-    $(".Ldt-Ctrl-SetOut").click(function() {
-        if (currentMedia && currentSegment) {
-            currentSegment.setEnd(currentMedia.getCurrentTime());
-        }
-    });
+    mashup.on("change",updateMashupUI);
     
     /* Slice Widget */
    
     var sliceSlider = $(".Ldt-Slice"),
-        sliceStartTime;
+        sliceStartTime,
+        slidersRange = 920;
     
     sliceSlider.slider({
         range: true,
@@ -430,93 +230,8 @@
             }
         });
     
-    /* 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);
-    }
-    
-    /* Mashup Player */
-
-    var mashupCurrentMedia = null,
-        mashupCurrentAnnotation = null,
-        mashupSegmentBegin,
-        mashupSegmentEnd,
-        mashupTimecode = 0,
-        mashupSeeking = false,
-        seekdiv = $(".video-wait"),
-        mashupTimedelta;
-    
-    function showSeek() {
-        if (mashupSeeking) {
-            seekdiv.show();
-        }
-    }
-    
-    function changeCurrentAnnotation() {
-        if (mashupTimecode >= mashup.duration) {
-            if (!mashup.paused) {
-                mashup.paused = true;
-                mashup.trigger("pause");
-            }
-            mashupTimecode = 0;
-        }
-        var _annotation = mashup.getAnnotationAtTime( mashupTimecode );
-        if (typeof _annotation === "undefined") {
-            if (mashupCurrentMedia) {
-                mashupCurrentMedia.pause();
-                if (!mashup.paused) {
-                    mashup.paused = true;
-                    mashup.trigger("pause");
-                }
-            }
-            return;
-        }
-        mashupCurrentAnnotation = _annotation;
-        mashupSegmentBegin = mashupCurrentAnnotation.annotation.begin.milliseconds;
-        mashupSegmentEnd = mashupCurrentAnnotation.annotation.end.milliseconds;
-        mashupTimedelta = mashupSegmentBegin - mashupCurrentAnnotation.begin.milliseconds;
-        mashupCurrentMedia = mashupCurrentAnnotation.getMedia();
-        
-        project.getMedias().forEach(function(_media) {
-            if (_media !== mashupCurrentMedia) {
-                _media.hide();
-                _media.pause();
-            } else {
-                _media.show();
-            }
-        });
-        
-        mashupCurrentMedia.setCurrentTime( mashupTimecode + mashupTimedelta);
-        mashupCurrentMedia.seeking = true;
-        
-        if (!mashup.paused) {
-            mashupCurrentMedia.play();
-            mashupSeeking = true;
-            setTimeout(showSeek,200);
-        }
-        mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
-
-    }
-    
-    /* Set current Media */
-   
-    var currentMedia, currentSegment;
+    /* Update Segment UI */
     
     function updateSegmentUI() {
         if (currentMedia && currentSegment) {
@@ -564,23 +279,14 @@
         }
     }
     
-    var addMode;
-    
     function setMedia(media) {
         if (currentMedia) {
             currentMedia.pause();
         }
         currentMedia = media;
+        project.trigger("set-current", media);
         if (currentMedia.elementType == "media") {
-            $("video").hide();
             showSegmentation();
-            if (!currentMedia.loaded) {
-                seekdiv.show();
-            }
-            var currentvideo = $('#video_' + currentMedia.id);
-            if (!currentvideo.length) {
-                addMediaPlayer(currentMedia);
-            }
             $(".tab-media-title").text(currentMedia.title);
             
             addMode = !(currentSegment && mashup.hasAnnotation(currentSegment));
@@ -591,6 +297,8 @@
                 currentSegment.setBegin(0);
                 currentSegment.setEnd(currentMedia.duration);
                 currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
+                currentSegment.color = currentMedia.color;
+                currentSegment.keywords = [];
                 currentSegment.description = "";
                 currentSegment.on("change-begin", function() {
                     if (currentMedia && currentSegment === this) {
@@ -604,28 +312,25 @@
                         updateSegmentUI();
                     }
                 });
-                currentSegment.on("enter", function() {
-                    if (currentMedia === mashup) {
-                        $(".annotation-title").text(this.title);
-                        $(".annotation-begin").text(this.begin.toString());
-                        $(".annotation-end").text(this.end.toString());
-                        $(".annotation-media-title").text(this.getMedia().title);
-                        $(".annotation-description").text(this.description);
-                        setPointerToCurrentAnnotation();
-                        highlightCurrentSegment();
-                    }
-                });
             }
             if (currentMedia.loaded) {
                 currentMedia.setCurrentTime(currentSegment.begin);
             }
             $(".add-segment").val(addMode ? "Ajouter au Hashcut" : "Sauvegarder");
             $(".create-or-edit").text(addMode ? "Créer un nouveau segment" : "Modifier le segment");
-            updateSegmentUI();
             media.show();
             $("#segment-title").val(currentSegment.title);
             $("#segment-description").val(currentSegment.description);
-            $("#segment-tags").val("");
+            var segment_tags = $("#segment-tags");
+            segment_tags.tagit("option","onTagRemoved",function(){});
+            segment_tags.tagit("option","onTagAdded",function(){});
+            segment_tags.tagit("removeAll");
+            _(currentSegment.keywords).each(function(tag) {
+                segment_tags.tagit("createTag",tag);
+            });
+            segment_tags.tagit("option","onTagRemoved",updateSegmentTags);
+            segment_tags.tagit("option","onTagAdded",updateSegmentTags);
+            updateSegmentUI();
             var relatedSegments = mashup.segments.filter(function(_s) {
                 return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
             });
@@ -652,254 +357,15 @@
             } else {
                 $(".self-media-segments").hide();
             }
+            
+            //TODO: Show Related Segments from http://capsicum/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/f72aa2f4-29bb-11e2-a193-08002791f1b7/0/674000?format=json
+            
         }
         $(".self-media-segments .media-segments-list").html(html);
         if (currentMedia.elementType === "mashup") {
             showPreview();
-            mashup.checkLoaded();
         }
-        $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());
-        // TODO: Do something with the tags !
-        onCurrentMediaTimeupdate(currentMedia.getCurrentTime());
-        onCurrentMediaPause();
-        highlightCurrentSegment();
     }
-    
-    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);
-        
-        media.show = function() {
-            videoEl.show();
-        }
-        media.hide = function() {
-            videoEl.hide();
-        }
-        
-        var popcorn = Popcorn("#" + videoid);
-        
-        // Binding functions to Popcorn
-        
-        media.on("setcurrenttime", function(_milliseconds) {
-            if (media.loaded) {
-                popcorn.currentTime(_milliseconds / 1000);
-            }
-        });
-        
-        media.on("setvolume", function(_vol) {
-            media.volume = _vol;
-            if (media.loaded) {
-                popcorn.volume(_vol);
-            }
-        });
-        
-        media.on("setmuted", function(_muted) {
-            media.muted = _muted;
-            if (media.loaded) {
-                popcorn.muted(_muted);
-            }
-        });
-        
-        media.on("setplay", function() {
-            if (media.loaded) {
-                popcorn.play();
-            }
-        });
-        
-        media.on("setpause", function() {
-            if (media.loaded) {
-                popcorn.pause();
-            }
-        });
-        
-        // Binding Popcorn events to media
-        
-        function getVolume() {
-            media.muted = popcorn.muted();
-            media.volume = popcorn.volume();
-        }
-        
-        popcorn.on("loadedmetadata", function() {
-            getVolume();
-            media.loaded = true;
-            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 and Mashup Playing to Media
-        
-        media.on("loadedmetadata", function() {
-            if (media === currentMedia) {
-                seekdiv.hide();
-            }
-            mashup.checkLoaded();
-        });
-        
-        media.on("play", function() {
-            if (media === currentMedia) {
-                onCurrentMediaPlay();
-            }
-            if (mashup === currentMedia && media === mashupCurrentMedia) {
-                mashup.trigger("play");
-            }
-        });
-        
-        media.on("pause", function() {
-            if (media === currentMedia) {
-                onCurrentMediaPause();
-            }
-            if (mashup === currentMedia && media === mashupCurrentMedia) {
-                mashup.trigger("pause");
-            }
-        });
-        
-        media.on("timeupdate", function(_time) {
-            if (media === currentMedia) {
-                onCurrentMediaTimeupdate(_time);
-            }
-            if (mashup === currentMedia && !mashup.paused && media === mashupCurrentMedia && !media.seeking) {
-                if ( _time < mashupSegmentEnd ) {
-                    if ( _time >= mashupSegmentBegin ) {
-                        mashupTimecode = _time - mashupTimedelta;
-                    } else {
-                        mashupTimecode = mashupSegmentBegin - mashupTimedelta;
-                        media.setCurrentTime(mashupSegmentBegin);
-                    }
-                } else {
-                    mashupTimecode = mashupSegmentEnd - mashupTimedelta;
-                    media.pause();
-                    changeCurrentAnnotation();
-                }
-                mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
-            }
-        });
-        
-        media.on("seeked", function() {
-            media.seeking = false;
-            if (mashup === currentMedia && media === mashupCurrentMedia && mashupSeeking) {
-                mashupSeeking = false;
-                seekdiv.hide();
-            }
-        });
-        
-        media.on("volumechange", function() {
-            if (media === currentMedia) {
-                ctrlVolumeUpdater();
-            }
-            mashup.muted = media.muted;
-            mashup.volume = media.volume;
-            mashup.trigger("volumechange");
-        })
-        
-    }
-
-    // Mashup Events
-    
-    mashup.on("setcurrenttime", function(_milliseconds) {
-        mashupTimecode = _milliseconds;
-        changeCurrentAnnotation();
-    });
-    
-    mashup.on("setvolume", function(_vol) {
-        mashup.getMedias().forEach(function(_media) {
-            _media.setVolume(_vol);
-        });
-        mashup.volume = _vol;
-    });
-    
-    mashup.on("setmuted", function(_muted) {
-        mashup.getMedias().forEach(function(_media) {
-            _media.setMuted(_muted);
-        });
-        mashup.muted = _muted;
-    });
-    
-    mashup.on("setplay", function() {
-        mashup.paused = false;
-        changeCurrentAnnotation();
-    });
-    
-    mashup.on("setpause", function() {
-        mashup.paused = true;
-        if (mashupCurrentMedia) {
-            mashupCurrentMedia.pause();
-        }
-    });
-    
-    mashup.on("loadedmetadata", function() {
-        if (mashup === currentMedia) {
-            changeCurrentAnnotation();
-        }
-    });
-    
-    /* Mashup Events to UI */
-   
-    mashup.on("play", function() {
-        if (mashup === currentMedia) {
-            onCurrentMediaPlay();
-        }
-    });
-    
-    mashup.on("pause", function() {
-        if (mashup === currentMedia) {
-            onCurrentMediaPause();
-        }
-    });
-    
-    mashup.on("timeupdate", function(_time) {
-        if (mashup === currentMedia) {
-            $(".frise-position").css("left",(100*_time/mashup.duration)+"%");
-            onCurrentMediaTimeupdate(_time);
-        }
-    });
         
     /* Segment Form interaction */
    
@@ -907,29 +373,43 @@
         if (currentMedia && currentSegment) {
             currentSegment.title = $(this).val();
             updateSegmentUI();
-            updateMashupUI();
+            mashup.trigger("change");
         }
     });
     $("#segment-description").on("keyup change input paste", function() {
         if (currentMedia && currentSegment) {
             currentSegment.description = $(this).val();
-            updateSegmentUI();
+            mashup.trigger("change");
         }
     });
     $("#segment-form").submit(function() {
         if (addMode) {
             mashup.addAnnotation(currentSegment);
         } else {
-            updateMashupUI();
+            mashup.trigger("change");
         }
         var segment = mashup.getAnnotation(currentSegment);
         currentSegment = undefined;
         setMedia(mashup);
         if (segment) {
             mashup.setCurrentTime(segment.begin);
+            mashup.trigger("enter-annotation",segment);
         }
         return false;
-    })
+    });
+    
+    $("#segment-tags").tagit();
+    
+    
+    /* We have to defer this function because the tagit events
+     * are triggered before the data are updated */
+    function updateSegmentTags() {
+        window.setTimeout(function() {
+            if (currentMedia && currentSegment) {
+                currentSegment.keywords = $("#segment-tags").tagit("assignedTags");
+            }
+        }, 0);
+    }
     
     /* Click on media items */
    
@@ -967,50 +447,40 @@
         mashup.setAnnotationsById(ids);
     }
     
-    function highlightCurrentSegment() {
-        $(".organize-segments .item-video, .col-left .item-video, .frise-segment").removeClass("active");
-        var segmentid = undefined;
-        if (currentMedia && currentSegment) {
-            segmentid = currentSegment.id;
-        }
-        if (currentMedia === mashup && mashupCurrentAnnotation) {
-            segmentid = mashupCurrentAnnotation.annotation.id;
-        }
-        $(".item-video[data-segment-id='" + segmentid + "']").addClass("active");
+    project.on("mouseover-annotation", function(annotation) {
+        var mediaid = annotation.getMedia().id;
+        $(".media").removeClass("active");
+        $(".media[data-media-id='" + mediaid + "']").addClass("active");
+    });
+    
+    project.on("mouseout-annotation", function(annotation) {
+        $(".media").removeClass("active");
         var mediaid = undefined;
-        if (currentMedia) {
+        if (currentMedia && currentMedia.elementType === "media") {
             mediaid = currentMedia.id;
+            if (currentSegment) {
+                $(".annotation").removeClass("active");
+                $(".annotation[data-segment-id='" + currentSegment.id + "']").addClass("active");
+            }
         }
-        if (currentMedia === mashup && mashupCurrentMedia) {
-            mediaid = mashupCurrentMedia.id
+        if (currentMedia === mashup && mashup.currentMedia) {
+            mediaid = mashup.currentMedia.id
         }
-        $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active");
-    }
-    
-    function hoverSegment() {
-        var segmentid = $(this).attr("data-segment-id");
-        $(".organize-segments .item-video, .frise-segment").removeClass("active");
-        $(".item-video[data-segment-id='" + segmentid + "'], .frise-segment[data-segment-id='" + segmentid + "']").addClass("active");
-    }
-    
-    $(".frise")
-    .on("mouseover", ".frise-segment", hoverSegment)
-    .on("mouseout", ".frise-segment", highlightCurrentSegment)
+        $(".media[data-media-id='" + mediaid + "']").addClass("active");
+    });
     
     $(".organize-segments")
     .sortable({
         stop : reorganizeMashup
     })
-    .on("mouseover", ".item-video", hoverSegment)
-    .on("mouseout", ".item-video", highlightCurrentSegment)
-    .on("click", ".item-video", function(e) {
-        var el = $(this),
-            segment = mashup.getAnnotationById(el.attr("data-segment-id"));
-        setMedia(mashup);
-        if (segment) {
-            mashup.setCurrentTime(segment.begin);
-        }
-        return false;
+    .on("mouseover", ".item-video", function() {
+        project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id")));
+    })
+    .on("mouseout", ".item-video", function() {
+        project.trigger("mouseout-annotation");
+    })
+    .on("click", ".item-video", function() {
+        project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id")));
     })
     .on("click", ".edit", function(e) {
         var currentItem = $(this).parents(".item-video"),
@@ -1130,6 +600,11 @@
     
     /* Changing Hashcut Title and description */
     
+    $("#hashcut-tags").tagit({
+        onTagRemoved: updateSegmentTags,
+        onTagAdded: updateSegmentTags
+    });
+    
     mashup.title = IriSP.hc_messages.mashup_title_placeholder;
     $(".title-video-wrap a").text(mashup.title);
     $("#hashcut-title").val(mashup.title);
@@ -1137,13 +612,19 @@
     $("#hashcut-title").on("keyup change input paste", function() {
         mashup.title = $(this).val();
         $(".title-video-wrap a").text(mashup.title);
-        updateMashupUI();
+        mashup.trigger("change");
     });
     
     $("#hashcut-description").on("keyup change input paste", function() {
         mashup.description = $(this).val();
-        updateMashupUI();
+        mashup.trigger("change");
     });
     
-    updateMashupUI();
+    function updateMashupTags() {
+        window.setTimeout(function() {
+            mashup.keywords = $("#segment-tags").tagit("assignedTags");
+        }, 0);
+    }
+    
+    mashup.trigger("change");
 }