--- a/integration/css/common.css	Tue Nov 27 18:58:38 2012 +0100
+++ b/integration/css/common.css	Wed Nov 28 12:19:21 2012 +0100
@@ -216,6 +216,9 @@
 }
 .pointer{
 	position: absolute;
+	width: 20px;
+	height: 13px;
+	background: url(../img/popin-triangle.png);
 	top: 0;
 }
 .popin-content{
@@ -245,10 +248,10 @@
 }
 
 .user.popin{
-	top: 48px;
+	top: 55px;
 	right: 0;
 }
-.user.popin img.pointer{
+.user.popin .pointer{
 	right: 36px;
 }
 .button {

--- a/integration/edition.html	Tue Nov 27 18:58:38 2012 +0100
+++ b/integration/edition.html	Wed Nov 28 12:19:21 2012 +0100
@@ -28,7 +28,7 @@
             <!-- popin user -->
             
                 <div class="popin user info" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Mashup75</h2>
                         <h3>mash@cinecast.fr</h3>
@@ -40,7 +40,7 @@
                 </div><!-- popin user info-->
 
                 <div class="popin user signup" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Créer un compte :</h2>
                         <form action="#" class="signup-form">
@@ -69,7 +69,7 @@
                 </div><!-- popin user signup-->
 
                 <div class="popin user login" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Connexion :</h2>
                         <form action="#" class="login-form">
@@ -96,7 +96,7 @@
             
             <!-- popin update-title -->
                 <div class="popin update-title" id="update-title">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <form class="clearfix" action="#" id="hashcut-form" method="">
                             <p>
@@ -204,7 +204,7 @@
                             <div class="Ldt-Slice"></div>
                             <div class="segmentation">
                                 <div class="pointer-padder">
-                                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                                    <div class="pointer"></div>
                                 </div>
                                 <div class="popin-content">
                                     <div class="validate">
@@ -275,7 +275,7 @@
                                 
                                 <div class="segment-info mashup-description">
                                     <div class="pointer-padder">
-                                        <img class="pointer" src="img/popin-triangle.png" alt="" />
+                                        <div class="pointer"></div>
                                     </div>
                                     <div class="popin-content">
                                         <ul class="tools">

--- a/integration/hashcut.html	Tue Nov 27 18:58:38 2012 +0100
+++ b/integration/hashcut.html	Wed Nov 28 12:19:21 2012 +0100
@@ -25,7 +25,7 @@
 
             <!-- popin user -->
                 <div class="popin user info" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Mashup75</h2>
                         <h3>mash@cinecast.fr</h3>
@@ -37,7 +37,7 @@
                 </div><!-- popin user info-->
 
                 <div class="popin user signup" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Créer un compte :</h2>
                         <form action="#" class="signup-form">
@@ -66,7 +66,7 @@
                 </div><!-- popin user signup-->
 
                 <div class="popin user login" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Connexion :</h2>
                         <form action="#" class="login-form">
@@ -179,7 +179,7 @@
                                 
                             </div>
                             <div class="segment-info mashup-description">
-                                <img alt="" src="img/popin-triangle.png" class="pointer" style="left: 50%;">
+                                <div class="pointer" style="left: 50%;"></div>
                                 <div class="popin-content">
                                     <h2><span class="annotation-title">Segment sans titre</span></h2>
                                     <table>

--- a/integration/home.html	Tue Nov 27 18:58:38 2012 +0100
+++ b/integration/home.html	Wed Nov 28 12:19:21 2012 +0100
@@ -26,7 +26,7 @@
             <!-- popin user -->
             
                 <div class="popin user info" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Mashup75</h2>
                         <h3>mash@cinecast.fr</h3>
@@ -38,7 +38,7 @@
                 </div><!-- popin user info-->
 
                 <div class="popin user signup" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Créer un compte :</h2>
                         <form action="#" class="signup-form">
@@ -67,7 +67,7 @@
                 </div><!-- popin user signup-->
 
                 <div class="popin user login" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Connexion :</h2>
                         <form action="#" class="login-form">

--- a/integration/js/editor.js	Tue Nov 27 18:58:38 2012 +0100
+++ b/integration/js/editor.js	Wed Nov 28 12:19:21 2012 +0100
@@ -32,7 +32,7 @@
         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>'
-            + '<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 class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
             + '<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>'
@@ -42,7 +42,7 @@
         ),
         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 class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
             + '<h3><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("Clone segment") %></a>'
             + '</div></div></div>'
         ),

--- a/integration/js/mediaplayer.js	Tue Nov 27 18:58:38 2012 +0100
+++ b/integration/js/mediaplayer.js	Wed Nov 28 12:19:21 2012 +0100
@@ -9,7 +9,7 @@
         segmenttemplate = _.template(
             '<div class="media-segment" data-mashup-id="<%= annotation.project_id %>">'
             + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>'
-            + '<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 class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
             + '<h3><%= annotation.title %></h3>'
             + '<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>'
             + '<p class="mashup-link"><%= IriSP.translate("From hashcut:") %> <a href="<%= IriSP.endpoints.hashcut_page + annotation.project_id %>"></a></p>'

--- a/integration/media.html	Tue Nov 27 18:58:38 2012 +0100
+++ b/integration/media.html	Wed Nov 28 12:19:21 2012 +0100
@@ -24,7 +24,7 @@
 
             <!-- popin user -->
                 <div class="popin user info" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Mashup75</h2>
                         <h3>mash@cinecast.fr</h3>
@@ -36,7 +36,7 @@
                 </div><!-- popin user info-->
 
                 <div class="popin user signup" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Créer un compte :</h2>
                         <form action="#" class="signup-form">
@@ -65,7 +65,7 @@
                 </div><!-- popin user signup-->
 
                 <div class="popin user login" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Connexion :</h2>
                         <form action="#" class="login-form">

--- a/integration/profil.html	Tue Nov 27 18:58:38 2012 +0100
+++ b/integration/profil.html	Wed Nov 28 12:19:21 2012 +0100
@@ -26,7 +26,7 @@
             <!-- popin user -->
             
                 <div class="popin user info" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Mashup75</h2>
                         <h3>mash@cinecast.fr</h3>
@@ -38,7 +38,7 @@
                 </div><!-- popin user info-->
 
                 <div class="popin user signup" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Créer un compte :</h2>
                         <form action="#" class="signup-form">
@@ -67,7 +67,7 @@
                 </div><!-- popin user signup-->
 
                 <div class="popin user login" id="user">
-                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Connexion :</h2>
                         <form action="#" class="login-form">

--- a/src/hashcut/static/hashcut/js/hashcut.js	Tue Nov 27 18:58:38 2012 +0100
+++ b/src/hashcut/static/hashcut/js/hashcut.js	Wed Nov 28 12:19:21 2012 +0100
@@ -2273,7 +2273,7 @@
         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>'
-            + '<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 class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
             + '<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>'
@@ -2283,7 +2283,7 @@
         ),
         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 class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
             + '<h3><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.translate("Clone segment") %></a>'
             + '</div></div></div>'
         ),
@@ -2750,10 +2750,15 @@
     $("#segment-description").on("keyup change input paste", function() {
         if (currentMedia && currentSegment) {
             currentSegment.description = $(this).val();
+            updateSegmentUI();
             mashup.trigger("change");
         }
     });
     $("#segment-form").submit(function() {
+        currentSegment.title = $("#segment-title").val();
+        currentSegment.description = $("#segment-description").val();
+        currentSegment.keywords = $("#segment-tags").tagit("assignedTags");
+        updateSegmentUI();
         if (addMode) {
             mashup.addAnnotation(currentSegment);
             currentSegment = undefined;
@@ -2780,6 +2785,8 @@
         window.setTimeout(function() {
             if (currentMedia && currentSegment) {
                 currentSegment.keywords = $("#segment-tags").tagit("assignedTags");
+                updateSegmentUI();
+                mashup.trigger("change");
             }
         }, 0);
     }
@@ -3215,7 +3222,7 @@
         segmenttemplate = _.template(
             '<div class="media-segment" data-mashup-id="<%= annotation.project_id %>">'
             + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>'
-            + '<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 class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
             + '<h3><%= annotation.title %></h3>'
             + '<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>'
             + '<p class="mashup-link"><%= IriSP.translate("From hashcut:") %> <a href="<%= IriSP.endpoints.hashcut_page + annotation.project_id %>"></a></p>'