diff -r 3ec2343f2b85 -r 40909e8d6855 integration/js/editor.js
--- a/integration/js/editor.js	Thu Nov 08 18:24:47 2012 +0100
+++ b/integration/js/editor.js	Fri Nov 09 18:56:29 2012 +0100
@@ -18,6 +18,7 @@
     /* Load Media List */
     
     var directory = new IriSP.Model.Directory(),
+        apidirectory = new IriSP.Model.Directory(),
         project = directory.remoteSource({
             url: options.url,
             serializer: IriSP.serializers.medialist
@@ -279,6 +280,8 @@
         }
     }
     
+    var mediasegmentscache = {};
+    
     function setMedia(media) {
         if (currentMedia) {
             currentMedia.pause();
@@ -298,6 +301,7 @@
                 currentSegment.setEnd(currentMedia.duration);
                 currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
                 currentSegment.color = currentMedia.color;
+                currentSegment.created = new Date();
                 currentSegment.keywords = [];
                 currentSegment.description = "";
                 currentSegment.on("change-begin", function() {
@@ -334,11 +338,11 @@
             var relatedSegments = mashup.segments.filter(function(_s) {
                 return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
             });
-            var html = "";
+            var html = "",
+                k = $(".Ldt-Slider").width() / currentSegment.getMedia().duration,
+                currentleft = k * currentSegment.begin,
+                currentwidth = k * currentSegment.getDuration();
             if (relatedSegments.length) {
-                var k = $(".Ldt-Slider").width() / currentSegment.getMedia().duration,
-                    currentleft = k * currentSegment.begin,
-                    currentwidth = k * currentSegment.getDuration();
                 relatedSegments.forEach(function(_s) {
                     var pos = k * (_s.annotation.begin + _s.annotation.end) / 2,
                         corrpos = Math.max(145, Math.min(305, pos));
@@ -357,11 +361,36 @@
             } 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);
             
+            $(".other-media-segments").hide();
+            apidirectory.remoteSource({
+                url: options.segment_api_endpoint + currentMedia.id + "/0/" + currentMedia.duration.milliseconds + "?format=json",
+                serializer:  IriSP.serializers.ldt
+            }).onLoad(function() {
+                var medias = this.getMedias(),
+                    annotations = this.getAnnotations();
+                if (medias && medias.length && medias[0].id === currentMedia.id && annotations && annotations.length ) {
+                    var html = "";
+                    annotations.forEach(function(_a) {
+                        var pos = k * (_a.begin + _a.end) / 2,
+                            corrpos = Math.max(145, Math.min(305, pos));
+                        vizdata = {
+                            annotation : _a,
+                            currentleft : currentleft,
+                            currentwidth : currentwidth,
+                            popleft : corrpos,
+                            left : k * _a.begin,
+                            width : k * _a.getDuration(),
+                            pointerpos : (pos - corrpos)
+                        }
+                        html += mediasegmenttemplate(vizdata);
+                    });
+                    $(".other-media-segments").show();
+                    $(".other-media-segments .media-segments-list").html(html);
+                }
+            });
         }
-        $(".self-media-segments .media-segments-list").html(html);
         if (currentMedia.elementType === "mashup") {
             showPreview();
         }
@@ -588,7 +617,8 @@
     }).on("mouseout", ".media-segment", function() {
         $(this).find(".media-segment-popin").hide();
     }).on("click", ".reprendre-segment", function() {
-        var s = project.getElement($(this).attr("data-segment-id"));
+        var sid = $(this).attr("data-segment-id"),
+            s = directory.getElement(sid) || apidirectory.getElement(sid);
         currentSegment.title = s.title;
         currentSegment.description = s.description;
         $("#segment-title").val(s.title);
@@ -626,5 +656,39 @@
         }, 0);
     }
     
+    /* Publication */
+   
+    $(".publier-button").click(function() {
+        var postproject = directory.newLocalSource(),
+            anntype = new IriSP.Model.AnnotationType(false, postproject),
+            annotations = mashup.getOriginalAnnotations();
+        anntype.title = "hashcut-segments";
+        annotations.forEach(function(_a) {
+            _a.setAnnotationType(anntype.id);
+        });
+        postproject.addList("media",mashup.getMedias());
+        postproject.addList("annotationType",[anntype]);
+        postproject.addList("annotation",annotations);
+        postproject.addList("mashup",[mashup]);
+        postproject.addList("tag");
+        postproject.creator = "IRI";
+        postproject.title = mashup.title;
+        postproject.description = mashup.description;
+        console.log(IriSP.serializers.ldt.serialize(postproject));
+        $.ajax({
+            type: "POST",
+            url: options.project_api_endpoint,
+            data: IriSP.serializers.ldt.serialize(postproject),
+            contentType: "application/cinelab",
+//            headers: {"X-CSRFToken": "{{csrf_token}}"},
+            success: function(data, status, request){
+                    alert("api post success");
+            },
+            error: function(jqXHR, textStatus, errorThrown){
+                alert(errorThrown);
+            }
+        });
+    });
+    
     mashup.trigger("change");
 }