# HG changeset patch
# User veltr
# Date 1354290517 -3600
# Node ID 4857ac3892e3a2ff3f7b56a59c99e8bcf83b1714
# Parent  0c699d2767f839e3e5b7ccc5fc5f17c7c5ede47b
Minor changes

diff -r 0c699d2767f8 -r 4857ac3892e3 integration/css/common.css
--- a/integration/css/common.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/css/common.css	Fri Nov 30 16:48:37 2012 +0100
@@ -103,7 +103,7 @@
 }
 /* header - title-video-wrap */
 .title-video-wrap{
-	width: 380px;
+	width: 400px;
 }
 .title-video-wrap .title-video {
 	margin-top: 10px;
@@ -111,11 +111,22 @@
 	font-size: 18px;
 	font-weight: bold;
 	color: #30036d;
-	text-decoration: underline;
 }
-.title-video-wrap .title-video:hover {
+.title-video-wrap .title-video a {
+    text-decoration: underline;
+}
+.title-video-wrap .title-video a:hover {
     text-decoration: none;
 }
+
+.title-video-wrap .category {
+    color: #7628DF;
+}
+
+.tile-video-wrap .separator {
+    color: #333333;
+}
+
 .title-video-wrap .open-popin {
 	color: #30036d;
 	background-image: url(../img/pencil-icon.png);
@@ -167,7 +178,7 @@
 /* header - profil-wrap */
 .header .profil-wrap{
     float: right;
-	width: 250px;
+	width: 180px;
 }
 .header .profil-wrap a{
 	width: 160px;
@@ -878,7 +889,7 @@
 /* Social Share Widget */
 
 .Ldt-Social {
-    float: right; margin-top: 10px;
+    float: left; margin-top: 8px;
 }
 
 .Ldt-Social a {
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/css/players.css
--- a/integration/css/players.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/css/players.css	Fri Nov 30 16:48:37 2012 +0100
@@ -20,7 +20,7 @@
 .more-info a:hover{
 	text-decoration: none;
 }
-.info-title a{
+.info-title td{
 	color:#30036d;
 	font-size: 14px;
 	font-weight: bold;
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/css/profil.css
--- a/integration/css/profil.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/css/profil.css	Fri Nov 30 16:48:37 2012 +0100
@@ -1,14 +1,7 @@
-.title-content{
-	padding: 20px 0 6px;
-	border-bottom: 1px solid #333333;
-	color: #30036d;
-	font-size: 18px;
-	font-weight: 600;
-	margin-bottom: 14px;
+.profil {
+    padding-top: 15px;
 }
-.title-content a{
-	color: #ff00fc;
-}
+
 .profil .video-item{
 	margin-bottom: 16px;
 }
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/edition.html
--- a/integration/edition.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/edition.html	Fri Nov 30 16:48:37 2012 +0100
@@ -124,7 +124,7 @@
                 </div>
                 <div class="profil-wrap">
                     <ul class="space-top">
-                        <li><a href="#" class="all-hashcut">Tous les Hashcuts</a></li>
+                        <li><a href="#" class="all-hashcut">Accueil</a></li>
                         <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
                     </ul>
                 </div>
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/hashcut.html
--- a/integration/hashcut.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/hashcut.html	Fri Nov 30 16:48:37 2012 +0100
@@ -96,24 +96,24 @@
                     <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>
+                    <p class="title-video" href="#"><span class="category">Hashcut</span> <span class="separator">&raquo;</span> Hashcut sans titre</p>
+                </div>
+                <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>
-                    <p class="title-video" href="#">Hashcut sans titre</p>
+                    <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>
                 <div class="profil-wrap">
                     <ul>
-                        <li><a href="#" class="all-hashcut">Tous les Hashcuts</a></li>
+                        <li><a href="#" class="all-hashcut">Accueil</a></li>
                         <li><a href="edition.html" class="new-hashcut">Créer un Hashcut</a></li>
                         <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
                     </ul>
@@ -210,7 +210,7 @@
                                 <tbody>
                                     <tr class="info-title">
                                         <th>Titre :</th>
-                                        <td><a href="#">Titre du Hashcut</a></td>
+                                        <td>Titre du Hashcut</td>
                                     </tr>
                                     <tr class="info-duration">
                                         <th>Durée :</th>
@@ -218,19 +218,14 @@
                                     </tr>
                                     <tr class="info-author">
                                         <th>Auteur : </th>
-                                        <td><a href="#"></a></td>
+                                        <td><a href="profil.html">{{author}}</a></td>
                                     </tr>
                                     <tr class="info-description">
                                         <th>Description : </th>
                                         <td></td>
                                     </tr>
-    <!--                                <tr class="info-tags">
-                                        <th>Tags : </th>
-                                        <td>Mashup, Création, Art</td>
-                                    </tr> -->
                                 </tbody>
                             </table>
-    <!--                        <a href="#" class="button cloner">Cloner le Hashcut</a> -->
                         </div>
                         <h2>Médias utilisés dans le Hashcut</h2>
                         <ul class="list-video">
@@ -281,7 +276,7 @@
         IriSP.mashupplayer({
             id: projid
         });
-        IriSP.social();
+        social();
     });
         </script>
     </body>
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/js/compile.bat
--- a/integration/js/compile.bat	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/js/compile.bat	Fri Nov 30 16:48:37 2012 +0100
@@ -2,12 +2,16 @@
 
 type init.js > hashcut.js
 
-set jsfiles=i18n model ldt-serializer segmentapi-serializer contentapi-serializer mashupcore editor mashupplayer mediaplayer social
+set jsfiles=i18n model ldt-serializer segmentapi-serializer contentapi-serializer mashupcore editor mashupplayer mediaplayer
 
 FOR %%f IN (%jsfiles%) DO (type %%f.js >> hashcut.js)
 
 copy hashcut.js ..\..\src\hashcut\static\hashcut\js
 
+copy social.js ..\..\src\hashcut\static\hashcut\js
+
+copy common.js ..\..\src\hashcut\static\hashcut\js
+
 copy ..\css\*.css ..\..\src\hashcut\static\hashcut\bpi\css
 
 copy ..\css\*.css ..\..\src\hashcut\static\hashcut\iri\css
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/js/compile.sh
--- a/integration/js/compile.sh	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/js/compile.sh	Fri Nov 30 16:48:37 2012 +0100
@@ -2,7 +2,7 @@
 
 cat init.js > hashcut.js
 
-jsfiles="i18n model ldt-serializer segmentapi-serializer contentapi-serializer mashupcore editor mashupplayer mediaplayer social"
+jsfiles="i18n model ldt-serializer segmentapi-serializer contentapi-serializer mashupcore editor mashupplayer mediaplayer"
 
 for jsfile in $jsfiles
 do
@@ -11,6 +11,10 @@
 
 cp hashcut.js ../../src/hashcut/static/hashcut/js
 
+cp social.js ../../src/hashcut/static/hashcut/js
+
+cp common.js ../../src/hashcut/static/hashcut/js
+
 cp ../css/*.css ../../src/hashcut/static/hashcut/bpi/css
 
 cp ../css/*.css ../../src/hashcut/static/hashcut/iri/css
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/js/mashupplayer.js
--- a/integration/js/mashupplayer.js	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/js/mashupplayer.js	Fri Nov 30 16:48:37 2012 +0100
@@ -21,7 +21,7 @@
         project.trigger("set-current",mashup);
         
         $(".info-duration td").text(mashup.duration.toString());
-        $(".info-author a").text(mashup.creator);
+        
         $(".info-description td").text(mashup.description);
         
         mashup.getMedias().forEach(function(media) {
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/js/social.js
--- a/integration/js/social.js	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/js/social.js	Fri Nov 30 16:48:37 2012 +0100
@@ -1,4 +1,8 @@
-IriSP.social = function(opts) {
+(function() {
+
+var uid = 0;
+
+window.social = function(opts) {
     
     var opts = opts || {};
     opts.sel = opts.sel || $(".Ldt-Social");
@@ -9,7 +13,7 @@
     }
     
     var text = opts.sel.find("title").text(),
-        clipId = IriSP.Model.getUID(),
+        clipId = "Social-Clip-" + (++uid),
         clip;
 
     opts.sel.find(".Ldt-Social-CopyBtn").attr("id", clipId);
@@ -52,5 +56,5 @@
     opts.sel.find(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + $.param({ url: opts.url, title: text }));
     opts.sel.find(".Ldt-Social-Mail").attr("href", "mailto:?" + $.param({ subject: text, body: text + ": " + opts.url }));
 }
-
+}());
 /* END social.js */
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/media.html
--- a/integration/media.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/media.html	Fri Nov 30 16:48:37 2012 +0100
@@ -95,24 +95,28 @@
                     <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>
+                    <p class="title-video" href="#">
+                        <span class="category">Vidéo</span>
+                        <span class="separator">&raquo;</span>
+                        Titre du Média
+                    </p>
+                </div>
+                <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>
-                    <p class="title-video" href="#">Titre du Média</p>
+                    <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>
                 <div class="profil-wrap">
                     <ul>
-                        <li><a href="#" class="all-hashcut">Tous les Hashcuts</a></li>
+                        <li><a href="#" class="all-hashcut">Accueil</a></li>
                         <li><a href="edition.html" class="new-hashcut">Créer un Hashcut</a></li>
                         <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
                     </ul>
@@ -242,7 +246,7 @@
         IriSP.mediaplayer({
             id: mediaid
         });
-        IriSP.social();
+        social();
     });
         </script>
     </body>
diff -r 0c699d2767f8 -r 4857ac3892e3 integration/profil.html
--- a/integration/profil.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/integration/profil.html	Fri Nov 30 16:48:37 2012 +0100
@@ -96,10 +96,25 @@
                     <img src="img/hashcut-logo.png" alt="Hashcut" />
                     <span>Le Mashup<br />Cliquable</span>
                 </a></h1>
-                <div class="title-header"></div>
+                <div class="title-video-wrap">
+                    <p class="title-video" href="#"><span class="category">Profil</span> <span class="separator">&raquo;</span> Hashcutter75</p>
+                </div>
+                <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>
                 <div class="profil-wrap">
                     <ul>
-                        <li><a href="#" class="all-hashcut">Tous les Hashcuts</a></li>
+                        <li><a href="#" class="all-hashcut">Accueil</a></li>
                         <li><a href="edition.html" class="new-hashcut">Créer un Hashcut</a></li>
                         <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
                     </ul>
@@ -110,7 +125,6 @@
         <div class="wrapper">
             <div class="wrap">
                 <div class="content">
-                    <h2 class="title-content">Hashcuts de <a href="#">Hashcutter75</a></h2>
          
                     <div class="hashcut-video-wrap profil">
                         <div class="video-item">
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/static/hashcut/bpi/css/common.css
--- a/src/hashcut/static/hashcut/bpi/css/common.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/static/hashcut/bpi/css/common.css	Fri Nov 30 16:48:37 2012 +0100
@@ -103,7 +103,7 @@
 }
 /* header - title-video-wrap */
 .title-video-wrap{
-	width: 380px;
+	width: 400px;
 }
 .title-video-wrap .title-video {
 	margin-top: 10px;
@@ -111,11 +111,22 @@
 	font-size: 18px;
 	font-weight: bold;
 	color: #30036d;
-	text-decoration: underline;
 }
-.title-video-wrap .title-video:hover {
+.title-video-wrap .title-video a {
+    text-decoration: underline;
+}
+.title-video-wrap .title-video a:hover {
     text-decoration: none;
 }
+
+.title-video-wrap .category {
+    color: #7628DF;
+}
+
+.tile-video-wrap .separator {
+    color: #333333;
+}
+
 .title-video-wrap .open-popin {
 	color: #30036d;
 	background-image: url(../img/pencil-icon.png);
@@ -167,7 +178,7 @@
 /* header - profil-wrap */
 .header .profil-wrap{
     float: right;
-	width: 250px;
+	width: 180px;
 }
 .header .profil-wrap a{
 	width: 160px;
@@ -878,7 +889,7 @@
 /* Social Share Widget */
 
 .Ldt-Social {
-    float: right; margin-top: 10px;
+    float: left; margin-top: 10px;
 }
 
 .Ldt-Social a {
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/static/hashcut/bpi/css/players.css
--- a/src/hashcut/static/hashcut/bpi/css/players.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/static/hashcut/bpi/css/players.css	Fri Nov 30 16:48:37 2012 +0100
@@ -20,7 +20,7 @@
 .more-info a:hover{
 	text-decoration: none;
 }
-.info-title a{
+.info-title td{
 	color:#30036d;
 	font-size: 14px;
 	font-weight: bold;
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/static/hashcut/bpi/css/profil.css
--- a/src/hashcut/static/hashcut/bpi/css/profil.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/static/hashcut/bpi/css/profil.css	Fri Nov 30 16:48:37 2012 +0100
@@ -1,14 +1,7 @@
-.title-content{
-	padding: 20px 0 6px;
-	border-bottom: 1px solid #333333;
-	color: #30036d;
-	font-size: 18px;
-	font-weight: 600;
-	margin-bottom: 14px;
+.profil {
+    padding-top: 15px;
 }
-.title-content a{
-	color: #ff00fc;
-}
+
 .profil .video-item{
 	margin-bottom: 16px;
 }
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/static/hashcut/iri/css/common.css
--- a/src/hashcut/static/hashcut/iri/css/common.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/static/hashcut/iri/css/common.css	Fri Nov 30 16:48:37 2012 +0100
@@ -103,7 +103,7 @@
 }
 /* header - title-video-wrap */
 .title-video-wrap{
-	width: 380px;
+	width: 400px;
 }
 .title-video-wrap .title-video {
 	margin-top: 10px;
@@ -111,11 +111,22 @@
 	font-size: 18px;
 	font-weight: bold;
 	color: #30036d;
-	text-decoration: underline;
 }
-.title-video-wrap .title-video:hover {
+.title-video-wrap .title-video a {
+    text-decoration: underline;
+}
+.title-video-wrap .title-video a:hover {
     text-decoration: none;
 }
+
+.title-video-wrap .category {
+    color: #7628DF;
+}
+
+.tile-video-wrap .separator {
+    color: #333333;
+}
+
 .title-video-wrap .open-popin {
 	color: #30036d;
 	background-image: url(../img/pencil-icon.png);
@@ -167,7 +178,7 @@
 /* header - profil-wrap */
 .header .profil-wrap{
     float: right;
-	width: 250px;
+	width: 180px;
 }
 .header .profil-wrap a{
 	width: 160px;
@@ -878,7 +889,7 @@
 /* Social Share Widget */
 
 .Ldt-Social {
-    float: right; margin-top: 10px;
+    float: left; margin-top: 10px;
 }
 
 .Ldt-Social a {
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/static/hashcut/iri/css/players.css
--- a/src/hashcut/static/hashcut/iri/css/players.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/static/hashcut/iri/css/players.css	Fri Nov 30 16:48:37 2012 +0100
@@ -20,7 +20,7 @@
 .more-info a:hover{
 	text-decoration: none;
 }
-.info-title a{
+.info-title td{
 	color:#30036d;
 	font-size: 14px;
 	font-weight: bold;
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/static/hashcut/iri/css/profil.css
--- a/src/hashcut/static/hashcut/iri/css/profil.css	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/static/hashcut/iri/css/profil.css	Fri Nov 30 16:48:37 2012 +0100
@@ -1,14 +1,7 @@
-.title-content{
-	padding: 20px 0 6px;
-	border-bottom: 1px solid #333333;
-	color: #30036d;
-	font-size: 18px;
-	font-weight: 600;
-	margin-bottom: 14px;
+.profil {
+    padding-top: 15px;
 }
-.title-content a{
-	color: #ff00fc;
-}
+
 .profil .video-item{
 	margin-bottom: 16px;
 }
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/static/hashcut/js/hashcut.js
--- a/src/hashcut/static/hashcut/js/hashcut.js	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/static/hashcut/js/hashcut.js	Fri Nov 30 16:48:37 2012 +0100
@@ -3152,7 +3152,7 @@
         project.trigger("set-current",mashup);
         
         $(".info-duration td").text(mashup.duration.toString());
-        $(".info-author a").text(mashup.creator);
+        
         $(".info-description td").text(mashup.description);
         
         mashup.getMedias().forEach(function(media) {
@@ -3385,59 +3385,3 @@
 
 /* END mediaplayer.js */
 
-IriSP.social = function(opts) {
-    
-    var opts = opts || {};
-    opts.sel = opts.sel || $(".Ldt-Social");
-    opts.url = opts.url || document.location.href;
-    
-    if (opts.swf) {
-        ZeroClipboard.setMoviePath(opts.swf);
-    }
-    
-    var text = opts.sel.find("title").text(),
-        clipId = IriSP.Model.getUID(),
-        clip;
-
-    opts.sel.find(".Ldt-Social-CopyBtn").attr("id", clipId);
-
-    opts.sel.find(".Ldt-Social-Url").click(function() {
-        var _pop = opts.sel.find(".Ldt-Social-UrlPop");
-        _pop.toggle();
-        if (_pop.is(":visible")) {
-            if (typeof clip == "undefined") {
-                clip = new ZeroClipboard.Client();
-                clip.setHandCursor( true );
-                clip.glue(clipId);
-                
-                clip.addEventListener( 'onMouseUp', function() {
-                    _pop.hide();
-                    clip.hide();
-                });
-            }
-            clip.show();
-            clip.setText( opts.url );
-            opts.sel.find(".Ldt-Social-Input").val(opts.url).focus();
-        } else {
-            clip.hide();
-        }
-        return false;
-    });
-    opts.sel.find(".Ldt-Social-Input").focus(function() {
-        this.select();
-    });
-    opts.sel.find(".Ldt-Social-Ext").click(function() {
-        window.open(
-            opts.sel.find(this).attr("href"),
-            "_blank",
-            "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0");
-        return false;
-    });
-    
-    opts.sel.find(".Ldt-Social-Fb").attr("href", "http://www.facebook.com/share.php?" + $.param({ u: opts.url, t: text }));
-    opts.sel.find(".Ldt-Social-Twitter").attr("href", "https://twitter.com/intent/tweet?" + $.param({ url: opts.url, text: text }));
-    opts.sel.find(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + $.param({ url: opts.url, title: text }));
-    opts.sel.find(".Ldt-Social-Mail").attr("href", "mailto:?" + $.param({ subject: text, body: text + ": " + opts.url }));
-}
-
-/* END social.js */
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/static/hashcut/js/social.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/static/hashcut/js/social.js	Fri Nov 30 16:48:37 2012 +0100
@@ -0,0 +1,60 @@
+(function() {
+
+var uid = 0;
+
+window.social = function(opts) {
+    
+    var opts = opts || {};
+    opts.sel = opts.sel || $(".Ldt-Social");
+    opts.url = opts.url || document.location.href;
+    
+    if (opts.swf) {
+        ZeroClipboard.setMoviePath(opts.swf);
+    }
+    
+    var text = opts.sel.find("title").text(),
+        clipId = "Social-Clip-" + (++uid),
+        clip;
+
+    opts.sel.find(".Ldt-Social-CopyBtn").attr("id", clipId);
+
+    opts.sel.find(".Ldt-Social-Url").click(function() {
+        var _pop = opts.sel.find(".Ldt-Social-UrlPop");
+        _pop.toggle();
+        if (_pop.is(":visible")) {
+            if (typeof clip == "undefined") {
+                clip = new ZeroClipboard.Client();
+                clip.setHandCursor( true );
+                clip.glue(clipId);
+                
+                clip.addEventListener( 'onMouseUp', function() {
+                    _pop.hide();
+                    clip.hide();
+                });
+            }
+            clip.show();
+            clip.setText( opts.url );
+            opts.sel.find(".Ldt-Social-Input").val(opts.url).focus();
+        } else {
+            clip.hide();
+        }
+        return false;
+    });
+    opts.sel.find(".Ldt-Social-Input").focus(function() {
+        this.select();
+    });
+    opts.sel.find(".Ldt-Social-Ext").click(function() {
+        window.open(
+            opts.sel.find(this).attr("href"),
+            "_blank",
+            "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0");
+        return false;
+    });
+    
+    opts.sel.find(".Ldt-Social-Fb").attr("href", "http://www.facebook.com/share.php?" + $.param({ u: opts.url, t: text }));
+    opts.sel.find(".Ldt-Social-Twitter").attr("href", "https://twitter.com/intent/tweet?" + $.param({ url: opts.url, text: text }));
+    opts.sel.find(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + $.param({ url: opts.url, title: text }));
+    opts.sel.find(".Ldt-Social-Mail").attr("href", "mailto:?" + $.param({ subject: text, body: text + ": " + opts.url }));
+}
+}());
+/* END social.js */
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/templates/bpi_mashup_content.html
--- a/src/hashcut/templates/bpi_mashup_content.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/templates/bpi_mashup_content.html	Fri Nov 30 16:48:37 2012 +0100
@@ -3,7 +3,7 @@
 {% load i18n %}
 {% load analytics %}
 {% load thumbnail %}
-    {% block title %}Lecture de la Vidéo '{{content.title}}'{% endblock %}   
+    {% block title %}Lecture du média '{{content.title}}'{% endblock %}   
     {% block css_page %}
     <link rel="stylesheet" href="{% static 'hashcut/bpi/css/players.css' %}" />
     {% endblock %} 
@@ -14,20 +14,24 @@
         {% include 'partial/bpi_mashup_popin_user.html' %}
         {% include 'partial/bpi_hashcut_logo.html' %}
         <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>
+            <p class="title-video" href="#">
+                <span class="category">Média</span>
+                <span class="separator">&raquo;</span>
+                {{content.title}}
+            </p>
+        </div>
+        <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>
-            <p class="title-video" href="#">Media &raquo; {{content.title}}</p>
+            <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>
         <div class="profil-wrap">
             <ul>
@@ -125,7 +129,6 @@
 <script type="text/javascript" src="{% static 'hashcut/js/common.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
-<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
 <script type="text/javascript">
     IriSP.endpoints = {
@@ -146,7 +149,7 @@
         IriSP.mediaplayer({
             id: "{{ctt_id}}"
         });
-        IriSP.social({
+        social({
             swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
         });
     });
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/templates/bpi_mashup_hashcut.html
--- a/src/hashcut/templates/bpi_mashup_hashcut.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/templates/bpi_mashup_hashcut.html	Fri Nov 30 16:48:37 2012 +0100
@@ -14,20 +14,24 @@
         {% include 'partial/bpi_mashup_popin_user.html' %}
         {% include 'partial/bpi_hashcut_logo.html' %}
         <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>
+            <p class="title-video" href="#">
+                <span class="category">Hashcut</span>
+                <span class="separator">&raquo;</span>
+                {{proj.title}}
+            </p>
+        </div>
+        <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>
-            <p class="title-video">Hashcut &raquo; {{proj.title}}</p>
+            <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>
         <div class="profil-wrap">
             <ul>
@@ -127,7 +131,7 @@
                 <tbody>
                     <tr class="info-title">
                         <th>Titre :</th>
-                        <td><a>{{proj.title}}</a></td>
+                        <td>{{proj.title}}</td>
                     </tr>
                     <tr class="info-duration">
                         <th>Durée :</th>
@@ -135,7 +139,7 @@
                     </tr>
                     <tr class="info-author">
                         <th>Auteur : </th>
-                        <td><a href="#"></a></td>
+                        <td><a href="{% url mashup_profile branding=branding username=proj.created_by %}">{{proj.created_by}}</a></td>
                     </tr>
                     <tr class="info-description">
                         <th>Description : </th>
@@ -156,7 +160,6 @@
 {{ block.super }}
 <script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
-<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
 <script type="text/javascript">
     IriSP.endpoints = {
@@ -177,7 +180,7 @@
         IriSP.mashupplayer({
             id: "{{ldt_id}}"
         });
-        IriSP.social({
+        social({
             swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
         });
     });
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/templates/bpi_mashup_home.html
--- a/src/hashcut/templates/bpi_mashup_home.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/templates/bpi_mashup_home.html	Fri Nov 30 16:48:37 2012 +0100
@@ -140,6 +140,8 @@
 <script type="text/javascript" src="{% static 'hashcut/lib/jquery.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/lib/jquery-ui.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/js/common.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/js/social.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
 {% endblock %}
 {% endblock %}
 {% analytics %}
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/templates/bpi_mashup_profile.html
--- a/src/hashcut/templates/bpi_mashup_profile.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/templates/bpi_mashup_profile.html	Fri Nov 30 16:48:37 2012 +0100
@@ -13,7 +13,26 @@
     <div class="header">
     {% include 'partial/bpi_mashup_popin_user.html' %}
     {% include 'partial/bpi_hashcut_logo.html' %}
-        <div class="title-header"></div>
+        <div class="title-video-wrap">
+            <p class="title-video" href="#">
+                <span class="category">Profil</span>
+                <span class="separator">&raquo;</span>
+                {{username}}
+            </p>
+        </div>
+        <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>
         <div class="profil-wrap">
             <ul>
                 <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
@@ -27,7 +46,6 @@
 
 {% block content %}
 <div class="content">
-    <h2 class="title-content">Hashcuts de <a>{{username}}</a></h2>
 
     <div class="hashcut-video-wrap profil">
         {% for m in mashups %}
@@ -48,4 +66,14 @@
     </div-->
 </div><!-- content -->
 {% endblock %}
+{% block js_import %}
+{{block.super}}
+<script type="text/javascript">
+    $(function() {
+        social({
+            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
+        });
+    });
+</script>
+{% endblock %}
 
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/templates/iri_mashup_content.html
--- a/src/hashcut/templates/iri_mashup_content.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/templates/iri_mashup_content.html	Fri Nov 30 16:48:37 2012 +0100
@@ -1,33 +1,37 @@
-{% extends "bpi_mashup_home.html" %}
+{% extends "iri_mashup_home.html" %}
 {% load static %}
 {% load i18n %}
 {% load analytics %}
 {% load thumbnail %}
-    {% block title %}Lecture de la Vidéo '{{content.title}}'{% endblock %}
+    {% block title %}Lecture du média '{{content.title}}'{% endblock %}   
     {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/players.css' %}" />
+    <link rel="stylesheet" href="{% static 'hashcut/iri/css/players.css' %}" />
     {% endblock %} 
 
 {% block wrap_header %}
 <div class="wrap-header">  
     <div class="header">
-        {% include 'partial/bpi_mashup_popin_user.html' %}
-        {% include 'partial/bpi_hashcut_logo.html' %}
+        {% include 'partial/iri_mashup_popin_user.html' %}
+        {% include 'partial/iri_hashcut_logo.html' %}
         <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>
+            <p class="title-video" href="#">
+                <span class="category">Média</span>
+                <span class="separator">&raquo;</span>
+                {{content.title}}
+            </p>
+        </div>
+        <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>
-            <p class="title-video" href="#">Media &raquo; {{content.title}}</p>
+            <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>
         <div class="profil-wrap">
             <ul>
@@ -125,7 +129,6 @@
 <script type="text/javascript" src="{% static 'hashcut/js/common.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
-<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
 <script type="text/javascript">
     IriSP.endpoints = {
@@ -146,7 +149,7 @@
         IriSP.mediaplayer({
             id: "{{ctt_id}}"
         });
-        IriSP.social({
+        social({
             swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
         });
     });
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/templates/iri_mashup_hashcut.html
--- a/src/hashcut/templates/iri_mashup_hashcut.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/templates/iri_mashup_hashcut.html	Fri Nov 30 16:48:37 2012 +0100
@@ -14,20 +14,24 @@
         {% include 'partial/iri_mashup_popin_user.html' %}
         {% include 'partial/iri_hashcut_logo.html' %}
         <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>
+            <p class="title-video" href="#">
+                <span class="category">Hashcut</span>
+                <span class="separator">&raquo;</span>
+                {{proj.title}}
+            </p>
+        </div>
+        <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>
-            <p class="title-video">Hashcut &raquo; {{proj.title}}</p>
+            <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>
         <div class="profil-wrap">
             <ul>
@@ -127,7 +131,7 @@
                 <tbody>
                     <tr class="info-title">
                         <th>Titre :</th>
-                        <td><a href="#">{{proj.title}}</a></td>
+                        <td>{{proj.title}}</td>
                     </tr>
                     <tr class="info-duration">
                         <th>Durée :</th>
@@ -135,7 +139,7 @@
                     </tr>
                     <tr class="info-author">
                         <th>Auteur : </th>
-                        <td><a href="#"></a></td>
+                        <td><a href="{% url mashup_profile branding=branding username=proj.created_by %}">{{proj.created_by}}</a></td>
                     </tr>
                     <tr class="info-description">
                         <th>Description : </th>
@@ -156,7 +160,6 @@
 {{ block.super }}
 <script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
-<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
 <script type="text/javascript">
     IriSP.endpoints = {
@@ -177,7 +180,7 @@
         IriSP.mashupplayer({
             id: "{{ldt_id}}"
         });
-        IriSP.social({
+        social({
             swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
         });
     });
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/templates/iri_mashup_home.html
--- a/src/hashcut/templates/iri_mashup_home.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/templates/iri_mashup_home.html	Fri Nov 30 16:48:37 2012 +0100
@@ -140,6 +140,8 @@
 <script type="text/javascript" src="{% static 'hashcut/lib/jquery.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/lib/jquery-ui.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'hashcut/js/common.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/js/social.js' %}"></script>
+<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
 {% endblock %}
 {% endblock %}
 {% analytics %}
diff -r 0c699d2767f8 -r 4857ac3892e3 src/hashcut/templates/iri_mashup_profile.html
--- a/src/hashcut/templates/iri_mashup_profile.html	Fri Nov 30 15:36:06 2012 +0100
+++ b/src/hashcut/templates/iri_mashup_profile.html	Fri Nov 30 16:48:37 2012 +0100
@@ -3,7 +3,7 @@
 {% load i18n %}
 {% load analytics %}
 {% load thumbnail %}
-    {% block title %}Hashcut Profile - IRI{% endblock %}
+    {% block title %}Profil de '{{username}}'{% endblock %}
     {% block css_page %}
     <link rel="stylesheet" href="{% static 'hashcut/iri/css/profil.css' %}" />
     {% endblock %}
@@ -13,7 +13,26 @@
     <div class="header">
     {% include 'partial/iri_mashup_popin_user.html' %}
     {% include 'partial/iri_hashcut_logo.html' %}
-        <div class="title-header"></div>
+        <div class="title-video-wrap">
+            <p class="title-video" href="#">
+                <span class="category">Profil</span>
+                <span class="separator">&raquo;</span>
+                {{username}}
+            </p>
+        </div>
+        <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>
         <div class="profil-wrap">
             <ul>
                 <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
@@ -27,13 +46,12 @@
 
 {% block content %}
 <div class="content">
-    <h2 class="title-content">Hashcuts de <a>{{username}}</a></h2>
 
     <div class="hashcut-video-wrap profil">
         {% for m in mashups %}
         <div class="video-item">
             <a href="{% url mashup_hashcut branding=branding ldt_id=m.project.ldt_id %}" class="screenshot">{% thumbnail m.project.image "302x202" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt=""/>{% empty %}&nbsp;{% endthumbnail %}</a>
-            <h3><strong>{% if m.project.title|length > 30 %}{{m.project.title|slice:":30"}}...{% else %}{{m.project.title}}{% endif %}</strong> par {{ m.creator }} | <span>02:24</span> </h3>
+            <h3><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m.project.ldt_id %}">{% if m.project.title|length > 30 %}{{m.project.title|slice:":30"}}...{% else %}{{m.project.title}}{% endif %}</a> par {{ m.creator }} | <span class="duration">02:24</span> </h3>
         </div>
         {% endfor %}
     </div>
@@ -48,4 +66,14 @@
     </div-->
 </div><!-- content -->
 {% endblock %}
+{% block js_import %}
+{{block.super}}
+<script type="text/javascript">
+    $(function() {
+        social({
+            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
+        });
+    });
+</script>
+{% endblock %}