--- a/integration/css/edition.css	Tue Jan 29 17:26:56 2013 +0100
+++ b/integration/css/edition.css	Mon May 06 16:06:47 2013 +0200
@@ -206,12 +206,18 @@
 }
 
 .media-found-popin {
-    top: 2px; width: 170px; display: none;
+    width: 170px; display: none;
     margin-left: -86px;
 }
 
 .media-found-popin .pointer {
     margin-left: 75px;
+    position: absolute; top: -15px; background: url(../img/inv-triangle.png);
+    width: 20px; height: 13px;
+}
+
+.media-found-popin .popin-content {
+    position: absolute; bottom: 14px;
 }
 
 .reprendre-segment{

--- a/integration/js/editor.js	Tue Jan 29 17:26:56 2013 +0100
+++ b/integration/js/editor.js	Mon May 06 16:06:47 2013 +0200
@@ -1,5 +1,12 @@
 IriSP.editor = function(options) {
     
+    window.shortenText = function(text, minlength, maxlength) {
+        var min = (typeof minlength === "undefined" ? 100 : minlength),
+            max = (typeof maxlength === "undefined" ? min + 20 : maxlength),
+            rx = new RegExp("(^.{" + min + "," + max + "})[\s].+$");
+        return text.replace(/[\n\r\s]+/mg,' ').replace(rx,'$1…');
+    }
+    
     /* Load Media List */
     
     var directory = new IriSP.Model.Directory(),
@@ -13,7 +20,7 @@
         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>'
+            + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= shortenText(description) %></p>'
             + '<p class="time-length"><%= gettext("Duration:") %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>'
         ),
         segmenttemplate = _.template(
@@ -29,7 +36,7 @@
             + '<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;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
             + '<h3 class="segment-title"><%= annotation.title %></h3>'
-            + '<p><%= annotation.description %></p><% if (annotation.keywords.length) { print("<p><strong>" + gettext("Tags:") + "</strong> " + annotation.keywords.join(", ") + "</p>"); } %>'
+            + '<p><%= shortenText(annotation.description) %></p><% if (annotation.keywords.length) { print("<p><strong>" + gettext("Tags:") + "</strong> " + annotation.keywords.join(", ") + "</p>"); } %>'
             + '<a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>'
             + '<p><%= gettext("From:") %> <span><%= annotation.begin.toString() %></span> <%= gettext("to:") %> <span><%= annotation.end.toString() %></span> (<%= gettext("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>'
             + '</div></div></div>'
@@ -39,11 +46,11 @@
         ),
         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;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
+            + '<div class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= top-5 %>px;"><div class="popin-content">'
             + '<h3 class="segment-title"><%= title %></h3>'
             + '<p><%= description %></p><% if (tags) { print("<p><strong>" + gettext("Tags:") + "</strong> " + tags + "</p>"); } %>'
             + '<a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>'
-            + '</div></div></div>'
+            + '</div><div style="left:<%= pointerpos %>px;" class="pointer"></div></div></div>'
         ),
         mediafoundlisttemplate = _.template(
             '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>'
@@ -67,12 +74,6 @@
         },
         {
             validate: function(_s) {
-                return (_s.getDuration() < 180000);
-            },
-            message: gettext("A segment must be at most three minutes long")
-        },
-        {
-            validate: function(_s) {
                 return (!!_s.title && _s.title !== gettext("Untitled segment"));
             },
             message: gettext("A segment must have a title")
@@ -167,7 +168,7 @@
                 media = directory.getElement(mediaid);
             if (!val) {
                 li.find(".title-video").text(media.title);
-                li.find(".description").text(media.description);
+                li.find(".description").text(shortenText(media.description));
                 li.find(".media-found-segments").html("");
                 li.show();
             } else {
@@ -180,7 +181,7 @@
                 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>'));
+                    li.find(".description").html(shortenText(media.description).replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));
                     var html = '',
                         k = 230 / media.duration,
                         lines = [];
@@ -204,7 +205,7 @@
                             top: 8 * line.index,
                             color: IriSP.vizcolors[i % IriSP.vizcolors.length],
                             title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
-                            description: _a.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
+                            description: shortenText(_a.description).replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
                             tags: _a.keywords.join(", ").replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
                             popleft : corrpos,
                             pointerpos : (pos - corrpos),

--- a/integration/js/model.js	Tue Jan 29 17:26:56 2013 +0100
+++ b/integration/js/model.js	Mon May 06 16:06:47 2013 +0200
@@ -19,11 +19,12 @@
     var uidbase = rand16(8) + "-" + rand16(4) + "-", uidincrement = Math.floor(Math.random()*0x10000);
     
     var charsub = [
-        [ 'a', 'á', 'à', 'â', 'ä' ],
-        [ 'c', 'ç' ],
-        [ 'e', 'é', 'è', 'ê', 'ë' ],
-        [ 'i', 'í', 'ì', 'î', 'ï' ],
-        [ 'o', 'ó', 'ò', 'ô', 'ö' ]
+        '[aáàâä]',
+        '[cç]',
+        '[eéèêë]',
+        '[iíìîï]',
+        '[oóòôö]',
+        '[uùûü]'
     ];
     
     var removeChars = [
@@ -71,10 +72,7 @@
             remrx = new RegExp(remsrc,"gm"),
             txt = _text.toLowerCase().replace(remrx,"")
             res = [],
-            charsrc = ns._(charsub).map(function(c) {
-                return "(" + c.join("|") + ")";
-            }),
-            charsrx = ns._(charsrc).map(function(c) {
+            charsrx = ns._(charsub).map(function(c) {
                 return new RegExp(c);
             }),
             src = "";
@@ -83,7 +81,7 @@
                 src += remsrc + "*";
             }
             var l = txt[j];
-            ns._(charsrc).each(function(v, k) {
+            ns._(charsub).each(function(v, k) {
                 l = l.replace(charsrx[k], v);
             });
             src += l;
@@ -223,7 +221,7 @@
  */
 Model.List.prototype.searchByTitle = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp = Model.regexpFromTextOrArray(_text, true);
+        _rgxp = Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         return _rgxp.test(_element.title);
     });
@@ -231,7 +229,7 @@
 
 Model.List.prototype.searchByDescription = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp = Model.regexpFromTextOrArray(_text, true);
+        _rgxp = Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         return _rgxp.test(_element.description);
     });
@@ -239,7 +237,7 @@
 
 Model.List.prototype.searchByTextFields = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp =  Model.regexpFromTextOrArray(_text, true);
+        _rgxp =  Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         var keywords = (_element.keywords || _element.getTagTexts() || []).join(", ");
         return _rgxp.test(_element.description) || _rgxp.test(_element.title) || _rgxp.test(keywords);

--- a/src/hashcut/static/hashcut/bpi/css/edition.css	Tue Jan 29 17:26:56 2013 +0100
+++ b/src/hashcut/static/hashcut/bpi/css/edition.css	Mon May 06 16:06:47 2013 +0200
@@ -206,12 +206,18 @@
 }
 
 .media-found-popin {
-    top: 2px; width: 170px; display: none;
+    width: 170px; display: none;
     margin-left: -86px;
 }
 
 .media-found-popin .pointer {
     margin-left: 75px;
+    position: absolute; top: -15px; background: url(../img/inv-triangle.png);
+    width: 20px; height: 13px;
+}
+
+.media-found-popin .popin-content {
+    position: absolute; bottom: 14px;
 }
 
 .reprendre-segment{

--- a/src/hashcut/static/hashcut/iri/css/edition.css	Tue Jan 29 17:26:56 2013 +0100
+++ b/src/hashcut/static/hashcut/iri/css/edition.css	Mon May 06 16:06:47 2013 +0200
@@ -206,12 +206,18 @@
 }
 
 .media-found-popin {
-    top: 2px; width: 170px; display: none;
+    width: 170px; display: none;
     margin-left: -86px;
 }
 
 .media-found-popin .pointer {
     margin-left: 75px;
+    position: absolute; top: -15px; background: url(../img/inv-triangle.png);
+    width: 20px; height: 13px;
+}
+
+.media-found-popin .popin-content {
+    position: absolute; bottom: 14px;
 }
 
 .reprendre-segment{

--- a/src/hashcut/static/hashcut/js/hashcut.js	Tue Jan 29 17:26:56 2013 +0100
+++ b/src/hashcut/static/hashcut/js/hashcut.js	Mon May 06 16:06:47 2013 +0200
@@ -60,11 +60,12 @@
     var uidbase = rand16(8) + "-" + rand16(4) + "-", uidincrement = Math.floor(Math.random()*0x10000);
     
     var charsub = [
-        [ 'a', 'á', 'à', 'â', 'ä' ],
-        [ 'c', 'ç' ],
-        [ 'e', 'é', 'è', 'ê', 'ë' ],
-        [ 'i', 'í', 'ì', 'î', 'ï' ],
-        [ 'o', 'ó', 'ò', 'ô', 'ö' ]
+        '[aáàâä]',
+        '[cç]',
+        '[eéèêë]',
+        '[iíìîï]',
+        '[oóòôö]',
+        '[uùûü]'
     ];
     
     var removeChars = [
@@ -112,10 +113,7 @@
             remrx = new RegExp(remsrc,"gm"),
             txt = _text.toLowerCase().replace(remrx,"")
             res = [],
-            charsrc = ns._(charsub).map(function(c) {
-                return "(" + c.join("|") + ")";
-            }),
-            charsrx = ns._(charsrc).map(function(c) {
+            charsrx = ns._(charsub).map(function(c) {
                 return new RegExp(c);
             }),
             src = "";
@@ -124,7 +122,7 @@
                 src += remsrc + "*";
             }
             var l = txt[j];
-            ns._(charsrc).each(function(v, k) {
+            ns._(charsub).each(function(v, k) {
                 l = l.replace(charsrx[k], v);
             });
             src += l;
@@ -264,7 +262,7 @@
  */
 Model.List.prototype.searchByTitle = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp = Model.regexpFromTextOrArray(_text, true);
+        _rgxp = Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         return _rgxp.test(_element.title);
     });
@@ -272,7 +270,7 @@
 
 Model.List.prototype.searchByDescription = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp = Model.regexpFromTextOrArray(_text, true);
+        _rgxp = Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         return _rgxp.test(_element.description);
     });
@@ -280,7 +278,7 @@
 
 Model.List.prototype.searchByTextFields = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp =  Model.regexpFromTextOrArray(_text, true);
+        _rgxp =  Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         var keywords = (_element.keywords || _element.getTagTexts() || []).join(", ");
         return _rgxp.test(_element.description) || _rgxp.test(_element.title) || _rgxp.test(keywords);
@@ -2281,6 +2279,13 @@
 
 IriSP.editor = function(options) {
     
+    window.shortenText = function(text, minlength, maxlength) {
+        var min = (typeof minlength === "undefined" ? 100 : minlength),
+            max = (typeof maxlength === "undefined" ? min + 20 : maxlength),
+            rx = new RegExp("(^.{" + min + "," + max + "})[\s].+$");
+        return text.replace(/[\n\r\s]+/mg,' ').replace(rx,'$1…');
+    }
+    
     /* Load Media List */
     
     var directory = new IriSP.Model.Directory(),
@@ -2294,7 +2299,7 @@
         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>'
+            + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= shortenText(description) %></p>'
             + '<p class="time-length"><%= gettext("Duration:") %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>'
         ),
         segmenttemplate = _.template(
@@ -2310,7 +2315,7 @@
             + '<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;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
             + '<h3 class="segment-title"><%= annotation.title %></h3>'
-            + '<p><%= annotation.description %></p><% if (annotation.keywords.length) { print("<p><strong>" + gettext("Tags:") + "</strong> " + annotation.keywords.join(", ") + "</p>"); } %>'
+            + '<p><%= shortenText(annotation.description) %></p><% if (annotation.keywords.length) { print("<p><strong>" + gettext("Tags:") + "</strong> " + annotation.keywords.join(", ") + "</p>"); } %>'
             + '<a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>'
             + '<p><%= gettext("From:") %> <span><%= annotation.begin.toString() %></span> <%= gettext("to:") %> <span><%= annotation.end.toString() %></span> (<%= gettext("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>'
             + '</div></div></div>'
@@ -2320,11 +2325,11 @@
         ),
         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;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">'
+            + '<div class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= top-5 %>px;"><div class="popin-content">'
             + '<h3 class="segment-title"><%= title %></h3>'
             + '<p><%= description %></p><% if (tags) { print("<p><strong>" + gettext("Tags:") + "</strong> " + tags + "</p>"); } %>'
             + '<a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>'
-            + '</div></div></div>'
+            + '</div><div style="left:<%= pointerpos %>px;" class="pointer"></div></div></div>'
         ),
         mediafoundlisttemplate = _.template(
             '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>'
@@ -2348,12 +2353,6 @@
         },
         {
             validate: function(_s) {
-                return (_s.getDuration() < 180000);
-            },
-            message: gettext("A segment must be at most three minutes long")
-        },
-        {
-            validate: function(_s) {
                 return (!!_s.title && _s.title !== gettext("Untitled segment"));
             },
             message: gettext("A segment must have a title")
@@ -2448,7 +2447,7 @@
                 media = directory.getElement(mediaid);
             if (!val) {
                 li.find(".title-video").text(media.title);
-                li.find(".description").text(media.description);
+                li.find(".description").text(shortenText(media.description));
                 li.find(".media-found-segments").html("");
                 li.show();
             } else {
@@ -2461,7 +2460,7 @@
                 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>'));
+                    li.find(".description").html(shortenText(media.description).replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'));
                     var html = '',
                         k = 230 / media.duration,
                         lines = [];
@@ -2485,7 +2484,7 @@
                             top: 8 * line.index,
                             color: IriSP.vizcolors[i % IriSP.vizcolors.length],
                             title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
-                            description: _a.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
+                            description: shortenText(_a.description).replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
                             tags: _a.keywords.join(", ").replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
                             popleft : corrpos,
                             pointerpos : (pos - corrpos),