IriSP.editor = function(options) {

    /* Load Media List */

    var directory = new IriSP.Model.Directory(),

        apidirectory = new IriSP.Model.Directory(),

        project = directory.remoteSource({

            url: IriSP.endpoints.content,

            url_params: _({}).extend(options.filter),

            serializer: IriSP.serializers.content

        }),

/*        project = directory.remoteSource({

            url: options.url,

            serializer: IriSP.serializers.medialist

        }),

*/

        mashup = new IriSP.Model.Mashup(false, project),

        mediatemplate = _.template(

            '<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'

            + '<img class="thumbnail" src="<%= thumbnail %>" alt="<%= title %>" />'

            + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>'

            + '<p class="time-length"><%= IriSP.translate("Duration:") %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>'

        ),

        segmenttemplate = _.template(

            '<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'

            + '<img class="thumbnail" src="<%= annotation.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><div class="video-info"><h3 class="title-video"><%= annotation.getMedia().title %></h3>'

            + '<p class="subtitle"><%= annotation.title %></p><p class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</p>'

            + '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.translate("Edit segment") %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.translate("Move segment down") %>"></a></li>'

            + '<li><a class="top" href="#" title="<%= IriSP.translate("Move segment up") %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.translate("Delete segment") %>"></a></li></ul></div></li>'

        ),

        mediasegmenttemplate = _.template(

            '<div class="media-segment">'

            + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>'

            + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("Clone segment") %></a>'

            + '<p><%= IriSP.translate("From:") %> <span><%= annotation.begin.toString() %></span> <%= IriSP.translate("to:") %> <span><%= annotation.end.toString() %></span> (<%= IriSP.translate("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>'

            + '</div></div></div>'

        ),

        mediasegmentlisttemplate = _.template(

            '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-current-section" style="left: <%= left %>px; width: <%= width %>px;"></div><div class="media-segment-list-inner"></div><%= segments %></div>'

        ),

        mediafoundtemplate = _.template(

            '<div class="media-segment"><div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>'

            + '<h3><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("Clone segment") %></a>'

            + '</div></div></div>'

        ),

        mediafoundlisttemplate = _.template(

            '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>'

        ),

        mashupstatus = '',

        addMode, currentMedia, currentSegment;

    IriSP.mashupcore(project, mashup);

    /* Validation of segments and mashup */

    var segmentcritical = [

        {

            validate: function(_s) {

                return (_s.getDuration() >= 1000);

            },

            message: "A segment must be at least one second long"

        },

        {

            validate: function(_s) {

                return (_s.getDuration() < 180000);

            },

            message: "A segment must be at most three minutes long"

        },

        {

            validate: function(_s) {

                return (!!_s.title && _s.title !== IriSP.translate("Untitled segment"));

            },

            message: "A segment must have a title"

        }

    ];

    var segmentwarning = [

        {

            validate: function(_s) {

                return (!!_s.description);

            },

            message: "A segment should have a description"

        },

        {

            validate: function(_s) {

                return (!!_s.keywords.length);

            },

            message: "A segment should have tags"

        }

    ];

    var mashupcritical = [

        {

            validate: function(_m) {

                return _m.segments.length > 2;

            },

            message: "A hashcut must be made from at least three segments"

        },

        {

            validate: function(_m) {

                return (!!_m.title && _m.title !== IriSP.translate("Untitled Hashcut"));

            },

            message: "A hashcut must have a title"

        }

    ];

    var mashupwarning = [

        {

            validate: function(_m) {

                return !!_m.description

            },

            message: "A hashcut should have a description"

        }

    ];

    /* Fill left column with Media List */

    project.onLoad(function() {

        var html = '';

        project.getMedias().forEach(function(_m) {

            html += mediatemplate(_m);

        });

        $(".col-left .list-video").html(html);

        project.getMedias().forEach(function(_m) {

            apidirectory.remoteSource({

                url: IriSP.endpoints.segment,

                url_params: {

                    iri_id: _m.id,

                    limit: 0

                },

                serializer: IriSP.serializers.segmentapi

            }).onLoad(function() {

                var medias = this.getMedias(),

                    annotations = this.getAnnotations();

                if (medias && medias.length) {

                    var mediaid = medias[0].id;

                    el = $(".item-video[data-media-id='" + mediaid + "'] .media-count");

                    el.text(annotations.length).parent().show();

                    mediasegmentscache[mediaid] = annotations;

                    if (currentMedia && mediaid === currentMedia.id && currentSegment) {

                        showOtherSegments();

                    }

                }

            });

        });

    });

    /* Search Media with left column form */

    $(".col-left input").on("keyup change input paste", function() {

        var val = $(this).val();

        if (val) {

            var find = IriSP.Model.regexpFromTextOrArray(val, true),

                replace = IriSP.Model.regexpFromTextOrArray(val, false);

        }

        $(".col-left .item-video").each(function() {

            var li = $(this),

                mediaid = li.attr("data-media-id"),

                media = directory.getElement(mediaid);

            if (!val) {

                li.find(".title-video").text(media.title);

                li.find(".description").text(media.description);

                li.find(".media-found-segments").html("");

                li.show();

            } else {

                var apimedia = apidirectory.getElement(mediaid);

                if (apimedia) {

                    var annotations = apimedia.getAnnotations().searchByTextFields(val);

                } else {

                    var annotations = [];

                }   

                var found = find.test(media.title) || find.test(media.description) || annotations.length;

                if (found) {

                    li.find(".title-video").html(media.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));

                    li.find(".description").html(media.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));

                    var html = '',

                        k = 230 / media.duration,

                        lines = [];

                    _(annotations).each(function(_a, i) {

                        var pos = k * (_a.begin + _a.end) / 2,

                            corrpos = Math.max(76, Math.min(156, pos)),

                            line = IriSP._(lines).find(function(line) {

                                return !IriSP._(line.annotations).find(function(ann) {

                                    return ann.begin < _a.end && ann.end > _a.begin

                                });

                            });

                        if (!line) {

                            line = { index: lines.length, annotations: []};

                            lines.push(line); 

                        }

                        line.annotations.push(_a);

                        vizdata = {

                            annotation : _a,

                            left : k * _a.begin,

                            width : k * _a.getDuration(),

                            top: 8 * line.index,

                            color: IriSP.vizcolors[i % IriSP.vizcolors.length],

                            title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),

                            popleft : corrpos,

                            pointerpos : (pos - corrpos),

                        }

                        html += mediafoundtemplate(vizdata);

                    });

                    html = mediafoundlisttemplate({

                        height: 8 * lines.length,

                        segments: html

                    });

                    li.find(".media-found-segments").html(html);

                    li.show();

                } else {

                    li.hide();

                }

            }

        })

    });

    /* Fill right column when mashup is updated */

    function updateMashupUI() {

        var listhtml = '', critical = false, warning = false, messages = [];

        mashup.segments.forEach(function(_s) {

            listhtml += segmenttemplate(_s);

            if (_s.annotation.status === "critical") {

                critical = true;

            }

        });

        if (critical) {

            messages.push("One or more segments are invalid");

        }

        _(mashupcritical).each(function(sc) {

            if (!sc.validate(mashup)) {

                critical = true;

                messages.push(sc.message);

            }

        });

        _(mashupwarning).each(function(sc) {

            if (!sc.validate(mashup)) {

                warning = true;

                messages.push(sc.message);

            }

        });

        mashup.status = critical ? "critical" : (warning ? "warning" : "valid");

        if (!messages.length) {

            messages.push("Your hashcut is valid!");

        }

        mashupstatus = ' - ' + _(messages).map(IriSP.translate).join('\n - ');

        $(".publier-button").toggleClass("disable", critical);

        $(".liste-segment .validate").removeClass("critical warning valid").addClass(mashup.status);

        $(".liste-segment .validate-tooltip").html("<ul><li>" + messages.join("</li><li>")+"</li></ul>");

        $(".col-right .list-video").html(listhtml).find(".item-video:last-child .bottom, .item-video:first-child .top").addClass("disable");

        project.trigger("mouseout-annotation");

    }

    mashup.on("setcurrent", function() {

        currentMedia = mashup;

    });

    mashup.on("change",updateMashupUI);

    /* Slice Widget */

    var sliceSlider = $(".Ldt-Slice"),

        sliceStartTime,

        slidersRange = 920;

    sliceSlider.slider({

        range: true,

        values: [0, slidersRange],

        min: 0,

        max: slidersRange,

        start: function() {

            if (currentMedia) {

                if (!currentMedia.getPaused()) {

                    currentMedia.pause();

                }

            }

        },

        slide: function(event, ui) {

            if (currentMedia && currentSegment) {

                var t = currentMedia.duration * ui.value / slidersRange;

                if (ui.value === ui.values[0]) {

                    currentSegment.setBegin(t);

                } else {

                    currentSegment.setEnd(t);

                }

            }

        }

    });

    sliceSlider.find(".ui-slider-handle:first")

        .addClass("Ldt-Slice-left-handle")

        .click(function() {

            if (currentMedia && currentSegment) {

                currentMedia.setCurrentTime(currentSegment.begin);

            }

        });

    sliceSlider.find(".ui-slider-handle:last")

        .addClass("Ldt-Slice-right-handle")

        .click(function() {

            if (currentMedia && currentSegment) {

                currentMedia.setCurrentTime(currentSegment.end);

            }

        });

    /* Update Segment UI */

    function updateSegmentUI() {

        if (currentMedia && currentSegment) {

            var start = currentSegment.begin,

                end = currentSegment.end,

                dur = currentSegment.getDuration(),

                f = slidersRange / currentMedia.duration,

                tangleStart = $(".tangle-start"),

                tangleEnd = $(".tangle-end"),

                tangleDuration = $(".tangle-duration"),

                k = 100 / currentMedia.duration,

                p = k * (start + end) / 2;

            sliceSlider.slider( "values", [ f * start, f * end ] );

            tangleStart.text(start.toString(tangleStart.hasClass("active"))).attr("data-milliseconds",start.milliseconds);

            tangleEnd.text(end.toString(tangleEnd.hasClass("active"))).attr("data-milliseconds",end.milliseconds);

            tangleDuration.text(dur.toString(tangleDuration.hasClass("active"))).attr("data-milliseconds",dur.milliseconds);

            $(".segmentation .pointer").css("left", p + "%");

            $(".media-current-section").css({

                left: (k * start) + "%",

                width: (k * dur) + "%"

            });