IriSP.editor = function(options) {

    /* Load Media List */

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

        apidirectory = new IriSP.Model.Directory(),

        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>'

        ),

        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>'

        ),

        mediasegmenttemplate = _.template(

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

            + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'

            + '</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>'

            + '<div class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'

            + '</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;

        var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];

    IriSP.mashupcore(project, mashup);

    /* Validation of segments and mashup */

    var segmentcritical = [

        {

            validate: function(_s) {

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

            },

        },

        {

            validate: function(_s) {

                return (_s.getDuration() < 180000);

            },

        },

        {

            validate: function(_s) {

            },

        }

    ];

    var segmentwarning = [

        {

            validate: function(_s) {

                return (!!_s.description);

            },

        },

        {

            validate: function(_s) {

                return (!!_s.keywords.length);

            },

        }

    ];

    var mashupcritical = [

        {

            validate: function(_m) {

                return _m.segments.length > 2;

            },

        },

        {

            validate: function(_m) {

            },

        }

    ];

    var mashupwarning = [

        {

            validate: function(_m) {

                return !!_m.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_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: colors[i % colors.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) {

        }

        _(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) {

        }

        $(".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) + "%",