IriSP.mashupplayer = function(options) {

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

        project = directory.remoteSource({

            serializer: IriSP.serializers.ldt

        }),

        apidirectory = new IriSP.Model.Directory(),

        mashup,

        mediatemplate = _.template('<li class="item-video media" data-media-id="<%= media.id %>">'

            + '<p class="time-length">Durée : <span><%= media.duration.toString() %></span></p><div class="frise">'

            + '<div class="frise-overflow"><div class="frise-segments"><%= segments %></div></div></div></div></li>');

        segmenttemplate = _.template('<div style="background-color:<%= annotation.color %>; left:<%= left %>%; width: <%= width %>%;"'

            + ' class="frise-segment annotation" data-segment-id="<%= annotation.id %>" title="<%= annotation.title %>"></div>')

    project.onLoad(function() {

        mashup = project.getMashups()[0];

        IriSP.mashupcore(project, mashup);

        project.trigger("set-current",mashup);

        $(".info-duration td").text(mashup.duration.toString());

        $(".info-description td").text(mashup.description);

        mashup.getMedias().forEach(function(media) {

            apidirectory.remoteSource({

                url: IriSP.endpoints.content + media.id,

                serializer: IriSP.serializers.content

            }).onLoad(function() {

                var m = apidirectory.getElement(media.id);

                if (m) {

                    media.thumbnail = m.thumbnail;

                }

                var segments = mashup.segments.filter(function(segment) {

                    return segment.getMedia() === media;

                });

                var segmentshtml = '', k = media.duration ? (100 / media.duration) : 0;

                segments.forEach(function(segment) {

                    var vizdata = {

                        annotation: segment.annotation,

                        left: k * segment.annotation.begin,

                        width: k * segment.annotation.getDuration()

                    }

                    segmentshtml += segmenttemplate(vizdata);

                });

                var mediadata = {

                    media: media,

                    segments: segmentshtml

                }

                $(".list-video").append(mediatemplate(mediadata));

            });

        });

        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 = mashup.currentMedia.id;

            $(".media[data-media-id='" + mediaid + "']").addClass("active");

        });

        $(".list-video")

        .on("mouseover", ".frise-segment", function() {

            project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id")));

        })

        .on("click", ".frise-segment", function() {

            project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id")));

        })

        .on("mouseover", ".item-video", function() {

            $(".media").removeClass("active");

        })

        .on("mouseout", ".item-video", function() {

            project.trigger("mouseout-annotation");

        });

        $(".mashup-frise")

        .click(function(evt) {

            if (!mashup.duration.milliseconds) {

                return;

            }

            var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);

            if (segment) {

                project.trigger("click-annotation", segment.annotation);

            }

        });

    });

}

/* END mashupplayer.js */