# HG changeset patch
# User veltr
# Date 1353951776 -3600
# Node ID 89e152523cb686787a20c92366e943e5f4107395
# Parent  a21b851538b20f588993779dade9684fa7a9c5de
Improving media page

diff -r a21b851538b2 -r 89e152523cb6 .hgignore
--- a/.hgignore	Fri Nov 23 19:13:50 2012 +0100
+++ b/.hgignore	Mon Nov 26 18:42:56 2012 +0100
@@ -2,4 +2,6 @@
 syntax: regexp
 ^\.project$
 syntax: regexp
-^\.hgcheck$
\ No newline at end of file
+^\.hgcheck$
+syntax: regexp
+^integration/js/hashcut\.js$
\ No newline at end of file
diff -r a21b851538b2 -r 89e152523cb6 integration/css/common.css
--- a/integration/css/common.css	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/css/common.css	Mon Nov 26 18:42:56 2012 +0100
@@ -194,7 +194,6 @@
 .content{
 	width: 960px;
 	min-height: 750px;
-	background: url(../img/bg-degrade.png) 0 0 repeat-x;
 }
 /* popin */
 .popin{
@@ -533,20 +532,9 @@
 	height: 100%;
 }
 .mashup-frise .frise-segment {
-	background-image: url(../img/border-right-segment.png);
-	background-repeat: repeat-y;
-	background-position: right top;
-	-moz-box-shadow: inset 0px 1px 1px 0px #666;
-  	-webkit-box-shadow: inset 0px 1px 1px 0px #666;
-  	box-shadow: inset 0px 1px 1px 0px #666;  
-}
-.mashup-frise .frise-segment:first-child{
-	-moz-box-shadow: inset 1px 1px 1px 0px #666;
-  	-webkit-box-shadow: inset 1px 1px 1px 0px #666;
-  	box-shadow: inset 1px 1px 1px 0px #666;
-}
-.mashup-frise .frise-segment:last-child{
-	background-image: none;
+	-moz-box-shadow: inset 1px 1px 1px #333333;
+  	-webkit-box-shadow: inset 1px 1px 1px #333333;
+  	box-shadow: inset 1px 1px 1px #333333;
 }
 .frise-segment.active, .mashup-frise .frise-segment.active {
     background-image: url(../img/pinstripe-purple.png);
@@ -948,3 +936,30 @@
 a.Ldt-Social-Mail:hover {
     background-position: -72px -24px;
 }
+
+
+.media-segment-list-inner {
+    position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/bg-segments.png);
+}
+
+.media-segment-section {
+    position: absolute; height: 8px; cursor: pointer;
+    -moz-box-shadow: inset 1px 1px 1px #808080;
+    -webkit-box-shadow: inset 1px 1px 1px #808080;
+    box-shadow: inset 1px 1px 1px #808080;
+}
+
+.media-segment-popin h3, .media-found-popin h3{
+    padding: 0;
+    color: #de2500;
+    margin-bottom: 4px;
+    font-weight: 600;
+}
+
+.media-segment-popin p{
+    font-size: 12px;
+}
+
+.media-segment-popin span{
+    color: #7628df;
+}
diff -r a21b851538b2 -r 89e152523cb6 integration/css/edition.css
--- a/integration/css/edition.css	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/css/edition.css	Mon Nov 26 18:42:56 2012 +0100
@@ -163,7 +163,6 @@
     position: absolute; right: 10px; bottom: 10px;
 }
 
-
 .media-segments h2{
     color: #30036d;
     font-size: 14px;
@@ -177,6 +176,21 @@
     position: relative;
 }
 
+.media-segment-popin .pointer{
+    margin-left: 140px
+}
+
+.media-segment-popin {
+    padding-top: 12px; overflow: hidden;
+    top: 2px; width: 300px; margin-left: -151px;
+    display: none;
+}
+
+.media-segment-popin p{
+    margin-right: 155px;
+    font-size: 12px;
+}
+
 .media-found-segments {
     clear: both; padding-top: 5px;
 }
@@ -189,42 +203,12 @@
     padding-bottom: 1px; position: relative;
 }
 
-.media-segment-list-inner {
-    position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/bg-segments.png);
-}
-
-.media-segment-section {
-    position: absolute; height: 8px;
-}
-
 .media-current-section {
     background: url(../img/pinstripe-purple.png);
     top: -2px; bottom: -2px; margin-left: -1px; padding: 2px 1px;
     position: absolute;
 }
 
-.media-segment-popin .pointer{
-    margin-left: 140px
-}
-.media-segment-popin {
-    padding-top: 12px; overflow: hidden;
-    top: 2px; width: 300px; margin-left: -151px;
-    display: none;
-}
-.media-segment-popin h3, .media-found-popin h3{
-	padding: 0;
-	color: #de2500;
-	margin-bottom: 4px;
-	font-weight: 600;
-}
-.media-segment-popin p{
-    margin-right: 155px;
-	font-size: 12px;
-}
-.media-segment-popin span{
-	color: #7628df;
-}
-
 .media-found-popin {
     padding-top: 12px; overflow: hidden;
     top: 2px; width: 170px; display: none;
diff -r a21b851538b2 -r 89e152523cb6 integration/css/hashcut.css
--- a/integration/css/hashcut.css	Fri Nov 23 19:13:50 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,88 +0,0 @@
-.more-info-wrap{
-	padding-right: 10px;
-}
-.more-info{
-	text-align: left;
-}
-.more-info th{
-	font-weight: 600;
-	font-style: normal;
-	font-size: 12px;
-	width: 78px;
-}
-.more-info td{
-	padding-bottom: 12px;
-	font-size: 12px;
-}
-.more-info a{
-	text-decoration: underline;
-}
-.more-info a:hover{
-	text-decoration: none;
-}
-.info-title a{
-	color:#30036d;
-	font-size: 14px;
-	font-weight: bold;
-}
-.info-duration td{
-	color: #de2500;
-}
-.info-author a{
-	color: #7628df;
-}
-.cloner{
-	float: right; margin-bottom: 8px;
-}
-.list-video{
-    height: auto;
-    margin-left: -10px;
-}
-.item-video:hover,
-.item-video.active{
-	background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
-}
-.time-length{
-	margin-bottom: 5px;
-}
-.item-video .frise{
-	width: 100%;
-	height: 8px;
-	background-color: #999999;
-	display: block;
-}
-.title-video a {
-    color: #30036d;
-}
-.item-video .title-video a:hover {
-    text-decoration: underline;
-}
-.item-video .frise{
-	border:none;
-}
-.bloc-video{
-	padding-left: 10px;
-}
-.video {
-    height: 400px;
-    width: 620px;
-}
-.bloc-pvw{
-	margin-top: 7px;
-}
-.popin-content h2{
-	margin: 0;
-	border:none;
-}
-.Ldt-Ctrl {
-    margin-bottom: 6px;
-}
-.Ldt-Slider {
-    margin: 0;
-}
-.frise-segment {
-    cursor: pointer;
-}
-.segment-info .pointer {
-    margin-left: -10px;
-}
diff -r a21b851538b2 -r 89e152523cb6 integration/css/players.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/css/players.css	Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,128 @@
+.more-info-wrap{
+	padding-right: 10px;
+}
+.more-info{
+	text-align: left;
+}
+.more-info th{
+	font-weight: 600;
+	font-style: normal;
+	font-size: 12px;
+	width: 78px;
+}
+.more-info td{
+	padding-bottom: 12px;
+	font-size: 12px;
+}
+.more-info a{
+	text-decoration: underline;
+}
+.more-info a:hover{
+	text-decoration: none;
+}
+.info-title a{
+	color:#30036d;
+	font-size: 14px;
+	font-weight: bold;
+}
+.info-duration td{
+	color: #de2500;
+}
+.info-author a{
+	color: #7628df;
+}
+.cloner{
+	float: right; margin-bottom: 8px;
+}
+.list-video{
+    height: auto;
+    margin-left: -10px;
+    max-height: 450px;
+}
+.item-video:hover,
+.item-video.active{
+	background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
+}
+.time-length{
+	margin-bottom: 5px;
+}
+.item-video .frise{
+	width: 100%;
+	height: 8px;
+	background-color: #999999;
+	display: block;
+}
+.title-video a {
+    color: #30036d;
+}
+.item-video .title-video a:hover {
+    text-decoration: underline;
+}
+.item-video .frise{
+	border:none;
+}
+.bloc-video{
+	padding-left: 10px;
+}
+.video {
+    height: 400px;
+    width: 620px;
+}
+.bloc-pvw{
+	margin-top: 7px;
+}
+.popin-content h2{
+	margin: 0;
+	border:none;
+}
+.Ldt-Ctrl {
+    margin-bottom: 6px;
+}
+.Ldt-Slider {
+    margin: 0;
+}
+.frise-segment {
+    cursor: pointer;
+}
+.segment-info .pointer {
+    margin-left: -10px;
+}
+
+.media-segment-popin .pointer{
+    margin-left: 105px
+}
+
+.media-segment-popin {
+    padding-top: 12px; overflow: hidden;
+    top: 2px; width: 230px; margin-left: -116px;
+    display: none;
+}
+
+.media-segment-list {
+    margin: 8px 0 0;
+    padding-bottom: 1px;
+    position: relative;
+}
+
+.active .media-segment-section, .media-segment:hover .media-segment-section {
+    -moz-box-shadow: inset 0 0 2px 2px #fc00ff, 0 0 2px #fc00ff;
+    -webkit-box-shadow: inset 0 0 2px 2px #fc00ff, 0 0 2px #fc00ff;
+    box-shadow: inset 0 0 2px 2px #fc00ff, 0 0 2px #fc00ff;
+}
+
+.mashup-link {
+    display: none;
+    font-size: 13px;
+    color: #30036D;
+    margin-top: 5px;
+}
+
+.mashup-link a {
+    color: #30036D;
+    font-weight: 600;
+    text-decoration: underline;
+}
+
+.mashup-link a:hover {
+    text-decoration: none;
+}
diff -r a21b851538b2 -r 89e152523cb6 integration/edition.html
--- a/integration/edition.html	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/edition.html	Mon Nov 26 18:42:56 2012 +0100
@@ -352,16 +352,7 @@
         <script type="text/javascript" src="lib/tag-it.js"></script>
         <script type="text/javascript" src="lib/underscore-min.js"></script>
         <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
-        <script type="text/javascript" src="js/init.js"></script>
-        <script type="text/javascript" src="js/i18n.js"></script>
-        <script type="text/javascript" src="js/ldt-serializer.js"></script>
-        <script type="text/javascript" src="js/medialist-serializer.js"></script>
-        <script type="text/javascript" src="js/contentapi-serializer.js"></script>
-        <script type="text/javascript" src="js/segmentapi-serializer.js"></script>
-        <script type="text/javascript" src="js/model.js"></script>
-        <script type="text/javascript" src="js/mashupcore.js"></script>
-        <script type="text/javascript" src="js/editor.js"></script>
-        <script type="text/javascript" src="js/common.js"></script>
+        <script type="text/javascript" src="js/hashcut.js"></script>
         <script type="text/javascript">
         
     IriSP.endpoints = {
diff -r a21b851538b2 -r 89e152523cb6 integration/hashcut.html
--- a/integration/hashcut.html	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/hashcut.html	Mon Nov 26 18:42:56 2012 +0100
@@ -10,7 +10,7 @@
         <link rel="stylesheet" href="lib/jquery-ui.css" />
         <link rel="stylesheet" href="css/reset.css" />
         <link rel="stylesheet" href="css/common.css" />
-        <link rel="stylesheet" href="css/hashcut.css" />
+        <link rel="stylesheet" href="css/players.css" />
     </head>
     <body>
         
@@ -183,15 +183,15 @@
                                         <tbody>
                                             <tr>
                                                 <th>Extrait de :</th>
-                                                <td><span class="annotation-media-title">Firminy, le maire et l'architecte</span> (<span class="annotation-time annotation-begin">00:00</span> - <span class="annotation-time annotation-end">53:50</span>)</td>
+                                                <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>
                                             </tr>
                                             <tr>
                                                 <th>Description :</th>
-                                                <td><span class="annotation-description">Extrait de «&nbsp;Firminy, le maire et l'architecte&nbsp;»</span></td>
+                                                <td><span class="annotation-description"></span></td>
                                             </tr>
                                             <tr>
                                                 <th>Tags :</th>
-                                                <td><span class="annotation-tags">(fonctionnalité à venir)</span></td>
+                                                <td><span class="annotation-tags"></span></td>
                                             </tr>
                                         </tbody>
                                     </table>
@@ -258,14 +258,7 @@
         <script type="text/javascript" src="lib/underscore-min.js"></script>
         <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
         <script type="text/javascript" src="lib/ZeroClipboard.js"></script>
-        <script type="text/javascript" src="js/init.js"></script>
-        <script type="text/javascript" src="js/ldt-serializer.js"></script>
-        <script type="text/javascript" src="js/contentapi-serializer.js"></script>
-        <script type="text/javascript" src="js/model.js"></script>
-        <script type="text/javascript" src="js/mashupcore.js"></script>
-        <script type="text/javascript" src="js/mashupplayer.js"></script>
-        <script type="text/javascript" src="js/common.js"></script>
-        <script type="text/javascript" src="js/social.js"></script>
+        <script type="text/javascript" src="js/hashcut.js"></script>
         <script type="text/javascript">
         
     IriSP.endpoints = {
diff -r a21b851538b2 -r 89e152523cb6 integration/js/compile.bat
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/compile.bat	Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,9 @@
+@echo off
+
+type init.js > hashcut.js
+
+set jsfiles=i18n model ldt-serializer segmentapi-serializer contentapi-serializer mashupcore editor mashupplayer mediaplayer social
+
+FOR %%f IN (%jsfiles%) DO (type %%f.js >> hashcut.js)
+
+echo Hashcut.js compiled successfully!
diff -r a21b851538b2 -r 89e152523cb6 integration/js/compile.sh
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/compile.sh	Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,10 @@
+#!/bin/sh
+
+cat init.js > hashcut.js
+
+jsfiles="i18n model ldt-serializer segmentapi-serializer contentapi-serializer mashupcore editor mashupplayer mediaplayer social"
+
+for jsfile in $jsfiles
+do
+  cat $jsfile.js >> hashcut.js
+done
diff -r a21b851538b2 -r 89e152523cb6 integration/js/contentapi-serializer.js
--- a/integration/js/contentapi-serializer.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/contentapi-serializer.js	Mon Nov 26 18:42:56 2012 +0100
@@ -1,6 +1,5 @@
 IriSP.serializers.content = {
     deSerialize : function(_data, _source) {
-        var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
         var _medialist = new IriSP.Model.List(_source.directory);
         
         function deserializeObject(_m, i) {
@@ -10,7 +9,7 @@
             _media.description = _m.description;
             _media.setDuration(_m.duration);
             _media.thumbnail = _m.image;
-            _media.color = colors[i % colors.length];
+            _media.color = IriSP.vizcolors[i % IriSP.vizcolors.length];
             _media.keywords = _m.tags;
             _medialist.push(_media);
         }
@@ -23,4 +22,6 @@
         
         _source.addList("media", _medialist);
     }
-}
\ No newline at end of file
+};
+
+/* END contentapi-serializer.js */
diff -r a21b851538b2 -r 89e152523cb6 integration/js/editor.js
--- a/integration/js/editor.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/editor.js	Mon Nov 26 18:42:56 2012 +0100
@@ -52,8 +52,6 @@
         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 */
@@ -197,7 +195,7 @@
                             left : k * _a.begin,
                             width : k * _a.getDuration(),
                             top: 8 * line.index,
-                            color: colors[i % colors.length],
+                            color: IriSP.vizcolors[i % IriSP.vizcolors.length],
                             title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
                             popleft : corrpos,
                             pointerpos : (pos - corrpos),
@@ -457,7 +455,7 @@
                 height: 8,
                 top: 8 * line.index,
                 pointerpos : (pos - corrpos),
-                color: colors[i % colors.length]
+                color: IriSP.vizcolors[i % IriSP.vizcolors.length]
             }
             html += mediasegmenttemplate(vizdata);
         });
@@ -873,3 +871,5 @@
     
     mashup.trigger("change");
 }
+
+/* END editor.js */
diff -r a21b851538b2 -r 89e152523cb6 integration/js/i18n.js
--- a/integration/js/i18n.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/i18n.js	Mon Nov 26 18:42:56 2012 +0100
@@ -29,7 +29,8 @@
         "Edit existing segment": "Modifier le segment",
         "The hashcut can't be published because:": "Le Hashcut ne peut pas être publié pour les raisons suivantes :",
         "Server error\nYour hashcut couldn't be published": "Erreur serveur\nVotre hashcut n'a pas pu être publié",
-        "You haven't published your hashcut yet.\nIf you leave this page, it will be lost": "Vous n'avez pas encore publié votre Hashcut.\nSi vous quittez cette page, il sera perdu."
+        "You haven't published your hashcut yet.\nIf you leave this page, it will be lost": "Vous n'avez pas encore publié votre Hashcut.\nSi vous quittez cette page, il sera perdu.",
+        "From hashcut:": "Du hashcut :"
     }
 };
 
@@ -55,3 +56,5 @@
     }
     
 }) ());
+
+/* END i18n.js */
diff -r a21b851538b2 -r 89e152523cb6 integration/js/init.js
--- a/integration/js/init.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/init.js	Mon Nov 26 18:42:56 2012 +0100
@@ -1,6 +1,6 @@
 /* 
  *  Copyright 2012 Institut de recherche et d'innovation 
- *  contributor(s) : Raphael Velt, Karim Hamidou, Samuel Huron, Thibaut Cavalie
+ *  contributor(s) : Raphael Velt, Karim Hamidou, Samuel Huron, Thibaut Cavalie, Anthony Ly
  *   
  *  contact@iri.centrepompidou.fr
  *  http://www.iri.centrepompidou.fr 
@@ -23,3 +23,17 @@
 IriSP._ = _;
 
 IriSP.jQuery = jQuery;
+
+/* COLOR SCHEMES
+ * Color Brewer Set1 (9 classes): [ "#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999" ]
+ * Color Brewer Set3 (12 classes): ["#8DD3C7", "#FFFFB3", "#BEBADA", "#FB8072", "#80B1D3", "#FDB462", "#B3DE69", "#FCCDE5", "#D9D9D9", "#BC80BD", "#CCEBC5", "#FFED6F"]
+ * Color Brewer Paired (11 classes): ["#A6CEE3", "#1F78B4", "#B2DF8A", "#33A02C", "#FB9A99", "#E31A1C", "#FDBF6F", "#FF7F00", "#CAB2D6", "#6A3D9A", "#FFFF99" ]
+ * d3 Category10: ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
+ * d3 Category20: ["#1f77b4 ", "#aec7e8 ", "#ff7f0e ", "#ffbb78 ", "#2ca02c ", "#98df8a ", "#d62728 ", "#ff9896 ", "#9467bd ", "#c5b0d5 ", "#8c564b ", "#c49c94 ", "#e377c2 ", "#f7b6d2 ", "#7f7f7f ", "#c7c7c7 ", "#bcbd22 ", "#dbdb8d ", "#17becf ", "#9edae5"];
+ * d3 Category20b: ["#393b79 ", "#5254a3 ", "#6b6ecf ", "#9c9ede ", "#637939 ", "#8ca252 ", "#b5cf6b ", "#cedb9c ", "#8c6d31 ", "#bd9e39 ", "#e7ba52 ", "#e7cb94 ", "#843c39 ", "#ad494a ", "#d6616b ", "#e7969c ", "#7b4173 ", "#a55194 ", "#ce6dbd ", "#de9ed6"];
+ * d3 Category20c: ["#3182bd ", "#6baed6 ", "#9ecae1 ", "#c6dbef ", "#e6550d ", "#fd8d3c ", "#fdae6b ", "#fdd0a2 ", "#31a354 ", "#74c476 ", "#a1d99b ", "#c7e9c0 ", "#756bb1 ", "#9e9ac8 ", "#bcbddc ", "#dadaeb ", "#636363 ", "#969696 ", "#bdbdbd ", "#d9d9d9"];
+ */
+
+IriSP.vizcolors = ["#1f77b4 ", "#aec7e8 ", "#ff7f0e ", "#ffbb78 ", "#2ca02c ", "#98df8a ", "#d62728 ", "#ff9896 ", "#9467bd ", "#c5b0d5 ", "#8c564b ", "#c49c94 ", "#e377c2 ", "#f7b6d2 ", "#7f7f7f ", "#c7c7c7 ", "#bcbd22 ", "#dbdb8d ", "#17becf ", "#9edae5"];
+
+/* END init.js */
diff -r a21b851538b2 -r 89e152523cb6 integration/js/ldt-serializer.js
--- a/integration/js/ldt-serializer.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/ldt-serializer.js	Mon Nov 26 18:42:56 2012 +0100
@@ -283,3 +283,5 @@
     }
 }
 
+/* END ldt-serializer.js */
+
diff -r a21b851538b2 -r 89e152523cb6 integration/js/mashupcore.js
--- a/integration/js/mashupcore.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/mashupcore.js	Mon Nov 26 18:42:56 2012 +0100
@@ -442,6 +442,7 @@
         
         media.on("timeupdate", function(_time) {
             if (media === currentMedia) {
+                $(".frise-position").css("left",(100*_time/media.duration)+"%");
                 onCurrentMediaTimeupdate(_time);
             }
             if (mashup === currentMedia && !mashup.paused && media === mashup.currentMedia && !media.seeking) {
@@ -657,3 +658,6 @@
     mashup.trigger("add");
     
 }
+
+/* END mashupcore.js */
+
diff -r a21b851538b2 -r 89e152523cb6 integration/js/mashupplayer.js
--- a/integration/js/mashupplayer.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/mashupplayer.js	Mon Nov 26 18:42:56 2012 +0100
@@ -9,7 +9,7 @@
         mashup,
         mediatemplate = _.template('<li class="item-video media" data-media-id="<%= media.id %>">'
             + '<a href="<%= IriSP.endpoints.media_page + media.id %>"><img class="thumbnail" alt="<%= media.title %>" src="<%= media.thumbnail %>"></a><div class="video-info">'
-            + '<h3 class="title-video"><a href="#"><%= media.title %></a></h3><p class="description"><%= media.description %></p>'
+            + '<h3 class="title-video"><a href="<%= IriSP.endpoints.media_page + media.id %>"><%= media.title %></a></h3><p class="description"><%= media.description %></p>'
             + '<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 %>%;"'
@@ -86,3 +86,5 @@
         
     });
 }
+
+/* END mashupplayer.js */
diff -r a21b851538b2 -r 89e152523cb6 integration/js/medialist-serializer.js
--- a/integration/js/medialist-serializer.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/medialist-serializer.js	Mon Nov 26 18:42:56 2012 +0100
@@ -1,6 +1,5 @@
 IriSP.serializers.medialist = {
     deSerialize : function(_data, _source) {
-        var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
         var _medialist = new IriSP.Model.List(_source.directory);
         _data = IriSP._(_data).shuffle();
         IriSP._(_data).each(function(_m, i) {
@@ -10,9 +9,11 @@
             _media.description = "par " + _m.author;
             _media.setDuration(_m.duration);
             _media.thumbnail = _m.thumbnail;
-            _media.color = colors[i % colors.length];
+            _media.color = IriSP.vizcolors[i % IriSP.vizcolors.length];
             _medialist.push(_media);
         });
         _source.addList("media", _medialist);
     }
-}
\ No newline at end of file
+}
+
+/* END medialist-serializer.js */
diff -r a21b851538b2 -r 89e152523cb6 integration/js/mediaplayer.js
--- a/integration/js/mediaplayer.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/mediaplayer.js	Mon Nov 26 18:42:56 2012 +0100
@@ -5,14 +5,124 @@
             url: IriSP.endpoints.content + options.id,
             serializer: IriSP.serializers.content
         }),
-        apidirectory = new IriSP.Model.Directory();
+        apidirectory = new IriSP.Model.Directory(),
+        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">'
+            + '<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>'
+            + '</div></div></div>'
+        ),
+        segmentlisttemplate = _.template(
+            '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %><div class="frise-position"></div></div>'
+        ),
+        projtemplate = _.template(
+            '<li class="item-video mashup" data-mashup-id="<%= ldt_id %>">'
+            + '<a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><img class="thumbnail" alt="<%= title %>" src="<%= image %>"></a><div class="video-info">'
+            + '<h3 class="title-video"><a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><%= title %></a></h3><p class="description"><%= description %></p>'
+            + '</p></div></li>'
+        ),
+        media;
+    
+    function mediaSegmentList(_annotations) {
+        var html = '',
+            k = $(".Ldt-Slider").width() / media.duration,
+            lines = [];
+        _(_annotations).each(function(_a, i) {
+            var pos = k * (_a.begin + _a.end) / 2,
+                corrpos = Math.max(106, Math.min(516, 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,
+                popleft : corrpos,
+                left : k * _a.begin,
+                width : k * _a.getDuration(),
+                height: 8,
+                top: 8 * line.index,
+                pointerpos : (pos - corrpos),
+                color: IriSP.vizcolors[i % IriSP.vizcolors.length]
+            }
+            html += segmenttemplate(vizdata);
+        });
+        return segmentlisttemplate({
+            height: 8 * lines.length,
+            segments: html
+        });
+    }
     
     content.onLoad(function() {
         
         IriSP.mashupcore(content, new IriSP.Model.Mashup(false, content));
         
-        var media = content.getMedias()[0];
+        media = content.getMedias()[0];
         
+        apidirectory.remoteSource({
+            url: IriSP.endpoints.segment,
+            url_params: {
+                iri_id: options.id,
+                limit: 0
+            },
+            serializer: IriSP.serializers.segmentapi
+        }).onLoad(function() {
+            var medias = this.getMedias(),
+                annotations = this.getAnnotations(),
+                projlist = {};
+            $(".media-segments").html(mediaSegmentList(annotations));
+            annotations.forEach(function(a) {
+                projlist[a.project_id] = 1 + (projlist[a.project_id] || 0);
+            });
+            var projkeys = _(projlist)
+                .chain()
+                .keys()
+                .sortBy(function(v) {
+                    return - projlist[v];
+                })
+                .first(8)
+                .value();
+            $.ajax({
+                url: IriSP.endpoints.project,
+                dataType: "json",
+                data: {
+                    format: "json",
+                    ldt_id__in: projkeys
+                },
+                traditional: true,
+                success: function(data) {
+                    var proj = _(data.objects)
+                        .filter(function(p) {
+                            return /<inst/gm.test(p.ldt);
+                        });
+                    _(proj).each(function(p) {
+                        $(".media-segment[data-mashup-id='" + p.ldt_id + "']").each(function() {
+                            $(this)
+                                .find(".mashup-link").show()
+                                .find("a").text(p.title);
+                        });
+                    });
+                    var html = _(proj)
+                        .chain()
+                        .sortBy(function(p) {
+                            return - projlist[p.ldt_id];
+                        })
+                        .map(projtemplate)
+                        .value()
+                        .join("");
+                    $(".list-video").html(html);
+                }
+            });
+        });
+    
         content.trigger("set-current", media);
         
         $(".info-title a").text(media.title);
@@ -22,4 +132,28 @@
         $(".info-tags td").text(media.keywords);
         
     });
+    
+    $(".media-segments").on("mouseover", ".media-segment", function() {
+        var el = $(this);
+        el.find(".media-segment-popin").show();
+        var pid = el.attr("data-mashup-id");
+        $(".item-video[data-mashup-id='" + pid + "']").addClass("active");
+    }).on("mouseout", ".media-segment", function() {
+        $(this).find(".media-segment-popin").hide();
+        $(".item-video").removeClass("active");
+    }).on("click", ".media-segment-section", function() {
+        var sid = $(this).attr("data-segment-id"),
+            s = apidirectory.getElement(sid);
+        media.setCurrentTime(s.begin);
+    });
+    
+    $(".list-video").on("mouseover", ".item-video", function() {
+        var pid = $(this).attr("data-mashup-id");
+        $(".media-segment[data-mashup-id='" + pid + "']").addClass("active");
+    }).on("mouseout", ".item-video", function() {
+        $(".media-segment").removeClass("active");
+    });
 }
+
+/* END mediaplayer.js */
+
diff -r a21b851538b2 -r 89e152523cb6 integration/js/model.js
--- a/integration/js/model.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/model.js	Mon Nov 26 18:42:56 2012 +0100
@@ -1072,6 +1072,7 @@
         url: this.url,
         dataType: dataType,
         data: urlparams,
+        traditional: true,
         success: function(_result) {
             _this.deSerialize(_result);
             _this.handleCallbacks();
@@ -1122,3 +1123,6 @@
 return Model;
 
 })(IriSP);
+
+/* END model.js */
+
diff -r a21b851538b2 -r 89e152523cb6 integration/js/segmentapi-serializer.js
--- a/integration/js/segmentapi-serializer.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/segmentapi-serializer.js	Mon Nov 26 18:42:56 2012 +0100
@@ -17,6 +17,7 @@
             _ann.begin = new IriSP.Model.Time(_s.start_ts);
             _ann.end = new IriSP.Model.Time(_s.start_ts + _s.duration);
             _ann.keywords = _s.tags.split(",");
+            _ann.project_id = _s.project_id;
             _annotationlist.push(_ann);
         }
         
@@ -27,4 +28,6 @@
         }
         _source.addList("annotation", _annotationlist);
     }
-}
\ No newline at end of file
+}
+
+/* END segmentapi-serializer.js */
diff -r a21b851538b2 -r 89e152523cb6 integration/js/social.js
--- a/integration/js/social.js	Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/social.js	Mon Nov 26 18:42:56 2012 +0100
@@ -46,3 +46,5 @@
     sel.find(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + $.param({ url: url, title: text }));
     sel.find(".Ldt-Social-Mail").attr("href", "mailto:?" + $.param({ subject: text, body: text + ": " + url }));
 }
+
+/* END social.js */
diff -r a21b851538b2 -r 89e152523cb6 integration/lib/ZeroClipboard.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/lib/ZeroClipboard.js	Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,311 @@
+// Simple Set Clipboard System
+// Author: Joseph Huckaby
+
+var ZeroClipboard = {
+	
+	version: "1.0.7",
+	clients: {}, // registered upload clients on page, indexed by id
+	moviePath: 'ZeroClipboard.swf', // URL to movie
+	nextId: 1, // ID of next movie
+	
+	$: function(thingy) {
+		// simple DOM lookup utility function
+		if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
+		if (!thingy.addClass) {
+			// extend element with a few useful methods
+			thingy.hide = function() { this.style.display = 'none'; };
+			thingy.show = function() { this.style.display = ''; };
+			thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; };
+			thingy.removeClass = function(name) {
+				var classes = this.className.split(/\s+/);
+				var idx = -1;
+				for (var k = 0; k < classes.length; k++) {
+					if (classes[k] == name) { idx = k; k = classes.length; }
+				}
+				if (idx > -1) {
+					classes.splice( idx, 1 );
+					this.className = classes.join(' ');
+				}
+				return this;
+			};
+			thingy.hasClass = function(name) {
+				return !!this.className.match( new RegExp("\\s*" + name + "\\s*") );
+			};
+		}
+		return thingy;
+	},
+	
+	setMoviePath: function(path) {
+		// set path to ZeroClipboard.swf
+		this.moviePath = path;
+	},
+	
+	dispatch: function(id, eventName, args) {
+		// receive event from flash movie, send to client		
+		var client = this.clients[id];
+		if (client) {
+			client.receiveEvent(eventName, args);
+		}
+	},
+	
+	register: function(id, client) {
+		// register new client to receive events
+		this.clients[id] = client;
+	},
+	
+	getDOMObjectPosition: function(obj, stopObj) {
+		// get absolute coordinates for dom element
+		var info = {
+			left: 0, 
+			top: 0, 
+			width: obj.width ? obj.width : obj.offsetWidth, 
+			height: obj.height ? obj.height : obj.offsetHeight
+		};
+
+		while (obj && (obj != stopObj)) {
+			info.left += obj.offsetLeft;
+			info.top += obj.offsetTop;
+			obj = obj.offsetParent;
+		}
+
+		return info;
+	},
+	
+	Client: function(elem) {
+		// constructor for new simple upload client
+		this.handlers = {};
+		
+		// unique ID
+		this.id = ZeroClipboard.nextId++;
+		this.movieId = 'ZeroClipboardMovie_' + this.id;
+		
+		// register client with singleton to receive flash events
+		ZeroClipboard.register(this.id, this);
+		
+		// create movie
+		if (elem) this.glue(elem);
+	}
+};
+
+ZeroClipboard.Client.prototype = {
+	
+	id: 0, // unique ID for us
+	ready: false, // whether movie is ready to receive events or not
+	movie: null, // reference to movie object
+	clipText: '', // text to copy to clipboard
+	handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor
+	cssEffects: true, // enable CSS mouse effects on dom container
+	handlers: null, // user event handlers
+	
+	glue: function(elem, appendElem, stylesToAdd) {
+		// glue to DOM element
+		// elem can be ID or actual DOM element object
+		this.domElement = ZeroClipboard.$(elem);
+		
+		// float just above object, or zIndex 99 if dom element isn't set
+		var zIndex = 99;
+		if (this.domElement.style.zIndex) {
+			zIndex = parseInt(this.domElement.style.zIndex, 10) + 1;
+		}
+		
+		if (typeof(appendElem) == 'string') {
+			appendElem = ZeroClipboard.$(appendElem);
+		}
+		else if (typeof(appendElem) == 'undefined') {
+			appendElem = document.getElementsByTagName('body')[0];
+		}
+		
+		// find X/Y position of domElement
+		var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem);
+		
+		// create floating DIV above element
+		this.div = document.createElement('div');
+		var style = this.div.style;
+		style.position = 'absolute';
+		style.left = '' + box.left + 'px';
+		style.top = '' + box.top + 'px';
+		style.width = '' + box.width + 'px';
+		style.height = '' + box.height + 'px';
+		style.zIndex = zIndex;
+		
+		if (typeof(stylesToAdd) == 'object') {
+			for (addedStyle in stylesToAdd) {
+				style[addedStyle] = stylesToAdd[addedStyle];
+			}
+		}
+		
+		// style.backgroundColor = '#f00'; // debug
+		
+		appendElem.appendChild(this.div);
+		
+		this.div.innerHTML = this.getHTML( box.width, box.height );
+	},
+	
+	getHTML: function(width, height) {
+		// return HTML for movie
+		var html = '';
+		var flashvars = 'id=' + this.id + 
+			'&width=' + width + 
+			'&height=' + height;
+			
+		if (navigator.userAgent.match(/MSIE/)) {
+			// IE gets an OBJECT tag
+			var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';
+			html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+protocol+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/><param name="wmode" value="transparent"/></object>';
+		}
+		else {
+			// all other browsers get an EMBED tag
+			html += '<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" wmode="transparent" />';
+		}
+		return html;
+	},
+	
+	hide: function() {
+		// temporarily hide floater offscreen
+		if (this.div) {
+			this.div.style.left = '-2000px';
+		}
+	},
+	
+	show: function() {
+		// show ourselves after a call to hide()
+		this.reposition();
+	},
+	
+	destroy: function() {
+		// destroy control and floater
+		if (this.domElement && this.div) {
+			this.hide();
+			this.div.innerHTML = '';
+			
+			var body = document.getElementsByTagName('body')[0];
+			try { body.removeChild( this.div ); } catch(e) {;}
+			
+			this.domElement = null;
+			this.div = null;
+		}
+	},
+	
+	reposition: function(elem) {
+		// reposition our floating div, optionally to new container
+		// warning: container CANNOT change size, only position
+		if (elem) {
+			this.domElement = ZeroClipboard.$(elem);
+			if (!this.domElement) this.hide();
+		}
+		
+		if (this.domElement && this.div) {
+			var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
+			var style = this.div.style;
+			style.left = '' + box.left + 'px';
+			style.top = '' + box.top + 'px';
+		}
+	},
+	
+	setText: function(newText) {
+		// set text to be copied to clipboard
+		this.clipText = newText;
+		if (this.ready) this.movie.setText(newText);
+	},
+	
+	addEventListener: function(eventName, func) {
+		// add user event listener for event
+		// event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel
+		eventName = eventName.toString().toLowerCase().replace(/^on/, '');
+		if (!this.handlers[eventName]) this.handlers[eventName] = [];
+		this.handlers[eventName].push(func);
+	},
+	
+	setHandCursor: function(enabled) {
+		// enable hand cursor (true), or default arrow cursor (false)
+		this.handCursorEnabled = enabled;
+		if (this.ready) this.movie.setHandCursor(enabled);
+	},
+	
+	setCSSEffects: function(enabled) {
+		// enable or disable CSS effects on DOM container
+		this.cssEffects = !!enabled;
+	},
+	
+	receiveEvent: function(eventName, args) {
+		// receive event from flash
+		eventName = eventName.toString().toLowerCase().replace(/^on/, '');
+				
+		// special behavior for certain events
+		switch (eventName) {
+			case 'load':
+				// movie claims it is ready, but in IE this isn't always the case...
+				// bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function
+				this.movie = document.getElementById(this.movieId);
+				if (!this.movie) {
+					var self = this;
+					setTimeout( function() { self.receiveEvent('load', null); }, 1 );
+					return;
+				}
+				
+				// firefox on pc needs a "kick" in order to set these in certain cases
+				if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
+					var self = this;
+					setTimeout( function() { self.receiveEvent('load', null); }, 100 );
+					this.ready = true;
+					return;
+				}
+				
+				this.ready = true;
+				this.movie.setText( this.clipText );
+				this.movie.setHandCursor( this.handCursorEnabled );
+				break;
+			
+			case 'mouseover':
+				if (this.domElement && this.cssEffects) {
+					this.domElement.addClass('hover');
+					if (this.recoverActive) this.domElement.addClass('active');
+				}
+				break;
+			
+			case 'mouseout':
+				if (this.domElement && this.cssEffects) {
+					this.recoverActive = false;
+					if (this.domElement.hasClass('active')) {
+						this.domElement.removeClass('active');
+						this.recoverActive = true;
+					}
+					this.domElement.removeClass('hover');
+				}
+				break;
+			
+			case 'mousedown':
+				if (this.domElement && this.cssEffects) {
+					this.domElement.addClass('active');
+				}
+				break;
+			
+			case 'mouseup':
+				if (this.domElement && this.cssEffects) {
+					this.domElement.removeClass('active');
+					this.recoverActive = false;
+				}
+				break;
+		} // switch eventName
+		
+		if (this.handlers[eventName]) {
+			for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {
+				var func = this.handlers[eventName][idx];
+			
+				if (typeof(func) == 'function') {
+					// actual function reference
+					func(this, args);
+				}
+				else if ((typeof(func) == 'object') && (func.length == 2)) {
+					// PHP style object + method, i.e. [myObject, 'myMethod']
+					func[0][ func[1] ](this, args);
+				}
+				else if (typeof(func) == 'string') {
+					// name of function
+					window[func](this, args);
+				}
+			} // foreach event handler defined
+		} // user defined handler for event
+	}
+	
+};
diff -r a21b851538b2 -r 89e152523cb6 integration/lib/ZeroClipboard.swf
Binary file integration/lib/ZeroClipboard.swf has changed
diff -r a21b851538b2 -r 89e152523cb6 integration/media.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/media.html	Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" />
+        <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
+        <meta name="author" content="Anthony Ly, Raphaël Velt" />
+        <title>Hashcut &gt; Media</title>
+        <link rel="stylesheet" href="lib/jquery-ui.css" />
+        <link rel="stylesheet" href="css/reset.css" />
+        <link rel="stylesheet" href="css/common.css" />
+        <link rel="stylesheet" href="css/players.css" />
+    </head>
+    <body>
+        
+        <div class="wrap-header-top">
+            <div class="wrap-header-top-content">
+                <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
+            </div>
+        </div><!-- wrap-header-top -->
+        
+        <div class="wrap-header">  
+            <div class="header">
+
+            <!-- popin user -->
+                <div class="popin user info" id="user">
+                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="popin-content">
+                        <h2>Mashup75</h2>
+                        <h3>mash@cinecast.fr</h3>
+                        <a href="#" class="nb-hashcut">12 Hashcuts</a>
+                        <p>
+                            <a href="#" class="change-account button">Changer de compte</a>
+                        </p>
+                    </div>
+                </div><!-- popin user info-->
+
+                <div class="popin user signup" id="user">
+                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="popin-content">
+                        <h2>Créer un compte :</h2>
+                        <form action="#" class="signup-form">
+                            <p>
+                                <label for="signup-pseudo">Pseudonyme : </label>
+                                <input type="text" id="signup-pseudo" name="" />
+                            </p>
+                            <p>
+                                <label for="signup-email">Email : </label>
+                                <input type="text" id="signup-email" name="" />
+                            </p>
+                            <p>
+                                <label for="signup-password">Mot de passe : </label>
+                                <input type="password" id="signup-password" name="" />
+                            </p>
+                            <p>
+                                <label for="signup-password">Confirmer le mot de passe : </label>
+                                <input type="password" id="signup-password" name="" />
+                            </p>
+                            <p>
+                                <input class="button" type="submit" value="Créer le compte">
+                            </p>
+                        </form>
+   
+                    </div>
+                </div><!-- popin user signup-->
+
+                <div class="popin user login" id="user">
+                    <img class="pointer" src="img/popin-triangle.png" alt="" />
+                    <div class="popin-content">
+                        <h2>Connexion :</h2>
+                        <form action="#" class="login-form">
+                            <p>
+                                <label for="signup-pseudo">E-mail : </label>
+                                <input type="text" id="signup-pseudo" name="" />
+                            </p>
+                            <p >
+                                <label for="signup-email">Mot de passe : </label>
+                                <input type="password" id="signup-email" name="" />
+                            </p>
+                            <p>
+                                <input class="button" type="submit" value="Se connecter">
+                            </p>
+                            <p>
+                                <a class="button signup-button" href="#">Créer un compte</a>
+                            </p>
+                        </form>
+   
+                    </div>
+                </div><!-- popin user login-->
+                
+            <!-- /popin user -->
+            
+                <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
+                    <img src="img/hashcut-logo.png" alt="Hashcut" />
+                    <span>Le Mashup<br />Cliquable</span>
+                </a></h1>
+                <div class="title-video-wrap">
+                    <div class="Ldt-Social">
+                        <div class="Ldt-Social-Url-Container">
+                            <a href="#" target="_blank" class="Ldt-Social-Square Ldt-Social-Url" title="Partager le lien"></a>
+                            <span class="Ldt-Social-UrlPop">
+                                <input class="Ldt-Social-Input"/>
+                                <div class="Ldt-Social-CopyBtn">Copier</div>
+                            </span>
+                        </div>
+                        <a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext" title="Partager sur Facebook"></a>
+                        <a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext" title="Partager sur Twitter"></a>
+                        <a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext" title="Partager sur Google+"></a>
+                        <a href="#" target="_blank" class="Ldt-Social-Mail" title="Partager par mail"></a>
+                    </div>
+                    <p class="title-video" href="#">Titre du Média</p>
+                </div>
+                <div class="profil-wrap">
+                    <a href="#" class="all-hashcut">Tous les Hashcuts</a>
+                    <a href="#user" class="my-profil open-popin">Mon profil</a>
+                </div>
+            </div><!-- header -->
+        </div><!-- wrap-header -->    
+            
+        <div class="wrapper">   
+            <div class="wrap">
+                <div class="content clearfix">
+
+                    <div class="left-content">
+                        <h2>Lire le Média</h2>
+                        <div class="bloc-video">
+                            <div class="video">
+                                <div class="video-wait"></div>
+                            </div>
+                            <div class="widget">
+                            <div class="Ldt-Slider-Container">
+                                <div class="Ldt-Slider"></div>
+                            </div>
+                            <div class="Ldt-Slider-Time"></div>
+        
+                            <div class="Ldt-Ctrl">
+                                <div class="Ldt-Ctrl-Left">
+                                    <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div>
+                                    <div class="Ldt-Ctrl-spacer"></div>
+                                    <div class="Ldt-Ctrl-InOutBlock">
+                                        <div title="Débuter le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetIn"></div>
+                                        <div class="Ldt-Ctrl-spacer"></div>
+                                        <div title="Finir le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetOut"></div>
+                                        <div class="Ldt-Ctrl-spacer"></div>
+                                    </div>
+                                </div>
+                                <div class="Ldt-Ctrl-Right">
+                                   <div class="Ldt-Ctrl-spacer"></div>
+                                   <div class="Ldt-Ctrl-Time">
+                                       <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div>
+                                       <div class="Ldt-Ctrl-Time-Separator">/</div>
+                                       <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div>
+                                   </div>
+                                   <div class="Ldt-Ctrl-spacer"></div>
+                                   <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full"></div>
+                                </div>
+                                <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control">
+                                   <div class="Ldt-Ctrl-Volume-Bar"></div>
+                                </div>
+                            </div>
+                            
+                        </div>
+                            <div class="media-segments"></div>
+                        </div><!-- bloc-video -->
+                    </div><!-- left-content -->
+                    
+                    <div class="right-content">
+                        <h2>Plus d’informations</h2>
+                        <div class="more-info-wrap">
+                            <table class="more-info ">
+                                <tbody>
+                                    <tr class="info-title">
+                                        <th>Titre :</th>
+                                        <td><a href="#">Titre du Média</a></td>
+                                    </tr>
+                                    <tr class="info-duration">
+                                        <th>Durée :</th>
+                                        <td></td>
+                                    </tr>
+                                    <tr class="info-description">
+                                        <th>Description : </th>
+                                        <td></td>
+                                    </tr>
+                                    <tr class="info-tags">
+                                        <th>Tags : </th>
+                                        <td></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+    <!--                        <a href="#" class="button cloner">Cloner le Hashcut</a> -->
+                        </div>
+                        </ul>
+                        <h2>Hashcuts utilisant le média</h2>
+                        <ul class="list-video">
+                            
+                        </ul>
+                    </div><!-- right-content -->
+
+
+
+                </div><!-- content -->
+
+                <div class="footer clearfix">
+                    <ul class="links-left">
+                        <li><a href="#">Mentions légales</a></li>
+                        <li><a href="#">Contacts</a></li>
+                    </ul>
+                    <ul class="links-right">
+                        <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li>
+                        <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
+                        <li>© 2012</li>
+                    </ul>
+                </div><!-- footer -->
+            </div><!-- wrap -->
+        </div><!-- wrapper --> 
+        <!-- JavaScript -->
+        <script type="text/javascript" src="lib/jquery.min.js"></script>
+        <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
+        <script type="text/javascript" src="lib/underscore-min.js"></script>
+        <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
+        <script type="text/javascript" src="lib/ZeroClipboard.js"></script>
+        <script type="text/javascript" src="js/hashcut.js"></script>
+        <script type="text/javascript">
+        
+    IriSP.endpoints = {
+        content: "/pf/ldtplatform/api/ldt/1.0/contents/",
+        project: "/pf/ldtplatform/api/ldt/1.0/projects/",
+        segment: "/pf/ldtplatform/api/ldt/1.0/segments/",
+        ldt: "http://capsicum//pf/ldtplatform/ldt/cljson/id/",
+        hashcut_page: "hashcut.html?project="
+    };
+    
+    var mediarx = /media=([^&#]+)/,
+        match = document.location.href.match(mediarx),
+        mediaid = match ? match[1] : "f72aa2f4-29bb-11e2-a193-08002791f1b7";
+    
+    $(function() {
+        IriSP.mediaplayer({
+            id: mediaid
+        });
+        IriSP.social();
+    });
+        </script>
+    </body>
+</html>