unified templates + modified login form popin
authorveltr
Mon, 03 Dec 2012 13:06:28 +0100
changeset 91 a94f5c62e4d7
parent 90 1a78608617aa
child 92 54cd42adea33
unified templates + modified login form popin
integration/css/common.css
integration/edition.html
integration/home.html
integration/js/common.js
integration/js/compile.bat
integration/js/compile.sh
integration/js/social.js
integration/media.html
src/hashcut/static/hashcut/bpi/css/common.css
src/hashcut/static/hashcut/iri/css/common.css
src/hashcut/static/hashcut/js/common.js
src/hashcut/templates/bpi_mashup_all_mashups.html
src/hashcut/templates/bpi_mashup_content.html
src/hashcut/templates/bpi_mashup_edit.html
src/hashcut/templates/bpi_mashup_hashcut.html
src/hashcut/templates/bpi_mashup_home.html
src/hashcut/templates/bpi_mashup_profile.html
src/hashcut/templates/iri_mashup_all_mashups.html
src/hashcut/templates/iri_mashup_content.html
src/hashcut/templates/iri_mashup_edit.html
src/hashcut/templates/iri_mashup_hashcut.html
src/hashcut/templates/iri_mashup_home.html
src/hashcut/templates/iri_mashup_profile.html
src/hashcut/templates/mashup_all_mashups.html
src/hashcut/templates/mashup_content.html
src/hashcut/templates/mashup_edit.html
src/hashcut/templates/mashup_hashcut.html
src/hashcut/templates/mashup_home.html
src/hashcut/templates/mashup_profile.html
src/hashcut/templates/partial/bpi_hashcut_logo.html
src/hashcut/templates/partial/bpi_mashup_popin_user.html
src/hashcut/templates/partial/bpi_top_header.html
src/hashcut/templates/partial/hashcut_logo.html
src/hashcut/templates/partial/hashcut_social.html
src/hashcut/templates/partial/iri_hashcut_logo.html
src/hashcut/templates/partial/iri_mashup_popin_user.html
src/hashcut/templates/partial/iri_top_header.html
src/hashcut/templates/partial/mashup_popin_user.html
src/hashcut/views.py
--- a/integration/css/common.css	Sat Dec 01 23:48:11 2012 +0100
+++ b/integration/css/common.css	Mon Dec 03 13:06:28 2012 +0100
@@ -282,65 +282,63 @@
 .button:hover{
 	background-color: #FF00FC
 }
-.user.login h2, 
-.user.signup h2 {
+.user-screen.login h2, 
+.user-screen.signup h2 {
 	color: #de2500;
 	font-size: 14px;
 	font-weight: 600;
 	margin-bottom: 12px;
 }
 
-.user.info h2 {
+.user-screen.info h2 {
     color: #7628df;
     font-size: 18px;
     font-weight: 600;margin-bottom: 2px;
 }
 
-.user label{
+.user-screen label{
 	width: 84px;
 	font-size: 12px;
 	display: inline-block;
 	line-height: 10px;
 }
-.user p {
+.user-screen p {
 	display: block;
 	line-height: 18px;
 	margin-bottom: 8px;
 	overflow: hidden;
 }
-.user input[type=text],
-.user input[type=password] {
+.user-screen input[type=text],
+.user-screen input[type=password] {
 	position: relative;
 	width: 110px;
 	padding: 0 5px;
 	height: 18px;
 	display: inline-block;
 }
-.user .button {
+.user-screen .button {
     float: right;
 }
 /* popin - user - info */
-.user.info {
+.user-screen.info {
 	text-align: right;
 }
-.user h3{
+.user-screen h3{
 	color: #30036d;
 	font-size: 14px;
 	margin-bottom: 10px;
 }
-.user .nb-hashcut{
+.user-screen .nb-hashcut{
 	color: #de2500;
 	font-size: 14px;
 	text-decoration: underline;
 	display: block;
 	margin-bottom: 12px;
 }
-.user .nb-hashcut:hover{
+.user-screen .nb-hashcut:hover{
 	text-decoration: none;
 }
-.user.popin.info .popin-content a.change-account:hover{
-	background-color: #FF00FC;
-}
+
 /* popin - user - signup */
 .signup-button{
 	background-color: #de2500;
@@ -997,3 +995,7 @@
 .media-segment-popin span{
     color: #7628df;
 }
+
+.hide {
+    display: none;
+}
--- a/integration/edition.html	Sat Dec 01 23:48:11 2012 +0100
+++ b/integration/edition.html	Mon Dec 03 13:06:28 2012 +0100
@@ -27,68 +27,60 @@
 
             <!-- popin user -->
             
-                <div class="popin user info" id="user">
-                    <div class="pointer"></div>
-                    <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">
+                <div class="popin user" id="user">
                     <div class="pointer"></div>
                     <div class="popin-content">
-                        <h2>Créer un compte :</h2>
-                        <form action="#" class="signup-form">
+                        <div class="user-screen info">
+                            <h2>Mashup75</h2>
+                            <h3>mash@cinecast.fr</h3>
+                            <a href="#" class="nb-hashcut">12 Hashcuts</a>
                             <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">
+                                <a href="#" class="change-account button">Changer de compte</a>
                             </p>
-                        </form>
-   
-                    </div>
-                </div><!-- popin user signup-->
-
-                <div class="popin user login" id="user">
-                    <div class="pointer"></div>
-                    <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 class="user-screen signup hide">
+                            <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 class="user-screen login hide">
+                            <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>
                 </div><!-- popin user login-->
                 
@@ -374,6 +366,8 @@
                 tags__icontains: "Hashcut"
             }
        });
+       
+       $(".change-account").remove();
     });
         </script>
     </body>
--- a/integration/home.html	Sat Dec 01 23:48:11 2012 +0100
+++ b/integration/home.html	Mon Dec 03 13:06:28 2012 +0100
@@ -25,68 +25,60 @@
             
             <!-- popin user -->
             
-                <div class="popin user info" id="user">
-                    <div class="pointer"></div>
-                    <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">
+                <div class="popin user" id="user">
                     <div class="pointer"></div>
                     <div class="popin-content">
-                        <h2>Créer un compte :</h2>
-                        <form action="#" class="signup-form">
+                        <div class="user-screen info">
+                            <h2>Mashup75</h2>
+                            <h3>mash@cinecast.fr</h3>
+                            <a href="#" class="nb-hashcut">12 Hashcuts</a>
                             <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">
+                                <a href="#" class="change-account button">Changer de compte</a>
                             </p>
-                        </form>
-   
-                    </div>
-                </div><!-- popin user signup-->
-
-                <div class="popin user login" id="user">
-                    <div class="pointer"></div>
-                    <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 class="user-screen signup hide">
+                            <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 class="user-screen login hide">
+                            <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>
                 </div><!-- popin user login-->
                 
@@ -216,5 +208,18 @@
         <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="js/common.js"></script>
+        <script>
+            
+        /* IF NOT CONNECTED */
+        $(function() {
+            $("a[href='edition.html']").click(function() {
+                console.log("Arghl");
+                $(".user.login").show();
+                return false;
+            });
+        })
+        
+        /* END IF */
+        </script>
     </body>
 </html>
--- a/integration/js/common.js	Sat Dec 01 23:48:11 2012 +0100
+++ b/integration/js/common.js	Mon Dec 03 13:06:28 2012 +0100
@@ -12,15 +12,79 @@
     });
     
     $(".change-account").click(function() {
-        $(".user").hide();
-        $(".user.login").show();
+        $(".user-screen").hide();
+        $(".user-screen.login").show();
     });
     $(".signup-button").click(function() {
-        $(".user").hide();
-        $(".user.signup").show();
+        $(".user-screen").hide();
+        $(".user-screen.signup").show();
     });
     $(".login-form, .signup-form").submit(function() {
         $(".user").hide();
+        $(".user-screen").hide();
+        $(".user-screen.info").show();
     });
 
-});
\ No newline at end of file
+});
+
+// Social Plug-in
+
+(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 }));
+}
+}());
\ No newline at end of file
--- a/integration/js/compile.bat	Sat Dec 01 23:48:11 2012 +0100
+++ b/integration/js/compile.bat	Mon Dec 03 13:06:28 2012 +0100
@@ -8,8 +8,6 @@
 
 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
--- a/integration/js/compile.sh	Sat Dec 01 23:48:11 2012 +0100
+++ b/integration/js/compile.sh	Mon Dec 03 13:06:28 2012 +0100
@@ -11,8 +11,6 @@
 
 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
--- a/integration/js/social.js	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,60 +0,0 @@
-(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 */
--- a/integration/media.html	Sat Dec 01 23:48:11 2012 +0100
+++ b/integration/media.html	Mon Dec 03 13:06:28 2012 +0100
@@ -35,7 +35,7 @@
                     </div>
                 </div><!-- popin user info-->
 
-                <div class="popin user signup" id="user">
+                <div class="popin user signup">
                     <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Créer un compte :</h2>
@@ -64,7 +64,7 @@
                     </div>
                 </div><!-- popin user signup-->
 
-                <div class="popin user login" id="user">
+                <div class="popin user login">
                     <div class="pointer"></div>
                     <div class="popin-content">
                         <h2>Connexion :</h2>
--- a/src/hashcut/static/hashcut/bpi/css/common.css	Sat Dec 01 23:48:11 2012 +0100
+++ b/src/hashcut/static/hashcut/bpi/css/common.css	Mon Dec 03 13:06:28 2012 +0100
@@ -282,65 +282,63 @@
 .button:hover{
 	background-color: #FF00FC
 }
-.user.login h2, 
-.user.signup h2 {
+.user-screen.login h2, 
+.user-screen.signup h2 {
 	color: #de2500;
 	font-size: 14px;
 	font-weight: 600;
 	margin-bottom: 12px;
 }
 
-.user.info h2 {
+.user-screen.info h2 {
     color: #7628df;
     font-size: 18px;
     font-weight: 600;margin-bottom: 2px;
 }
 
-.user label{
+.user-screen label{
 	width: 84px;
 	font-size: 12px;
 	display: inline-block;
 	line-height: 10px;
 }
-.user p {
+.user-screen p {
 	display: block;
 	line-height: 18px;
 	margin-bottom: 8px;
 	overflow: hidden;
 }
-.user input[type=text],
-.user input[type=password] {
+.user-screen input[type=text],
+.user-screen input[type=password] {
 	position: relative;
 	width: 110px;
 	padding: 0 5px;
 	height: 18px;
 	display: inline-block;
 }
-.user .button {
+.user-screen .button {
     float: right;
 }
 /* popin - user - info */
-.user.info {
+.user-screen.info {
 	text-align: right;
 }
-.user h3{
+.user-screen h3{
 	color: #30036d;
 	font-size: 14px;
 	margin-bottom: 10px;
 }
-.user .nb-hashcut{
+.user-screen .nb-hashcut{
 	color: #de2500;
 	font-size: 14px;
 	text-decoration: underline;
 	display: block;
 	margin-bottom: 12px;
 }
-.user .nb-hashcut:hover{
+.user-screen .nb-hashcut:hover{
 	text-decoration: none;
 }
-.user.popin.info .popin-content a.change-account:hover{
-	background-color: #FF00FC;
-}
+
 /* popin - user - signup */
 .signup-button{
 	background-color: #de2500;
@@ -997,3 +995,7 @@
 .media-segment-popin span{
     color: #7628df;
 }
+
+.hide {
+    display: none;
+}
--- a/src/hashcut/static/hashcut/iri/css/common.css	Sat Dec 01 23:48:11 2012 +0100
+++ b/src/hashcut/static/hashcut/iri/css/common.css	Mon Dec 03 13:06:28 2012 +0100
@@ -282,65 +282,63 @@
 .button:hover{
 	background-color: #FF00FC
 }
-.user.login h2, 
-.user.signup h2 {
+.user-screen.login h2, 
+.user-screen.signup h2 {
 	color: #de2500;
 	font-size: 14px;
 	font-weight: 600;
 	margin-bottom: 12px;
 }
 
-.user.info h2 {
+.user-screen.info h2 {
     color: #7628df;
     font-size: 18px;
     font-weight: 600;margin-bottom: 2px;
 }
 
-.user label{
+.user-screen label{
 	width: 84px;
 	font-size: 12px;
 	display: inline-block;
 	line-height: 10px;
 }
-.user p {
+.user-screen p {
 	display: block;
 	line-height: 18px;
 	margin-bottom: 8px;
 	overflow: hidden;
 }
-.user input[type=text],
-.user input[type=password] {
+.user-screen input[type=text],
+.user-screen input[type=password] {
 	position: relative;
 	width: 110px;
 	padding: 0 5px;
 	height: 18px;
 	display: inline-block;
 }
-.user .button {
+.user-screen .button {
     float: right;
 }
 /* popin - user - info */
-.user.info {
+.user-screen.info {
 	text-align: right;
 }
-.user h3{
+.user-screen h3{
 	color: #30036d;
 	font-size: 14px;
 	margin-bottom: 10px;
 }
-.user .nb-hashcut{
+.user-screen .nb-hashcut{
 	color: #de2500;
 	font-size: 14px;
 	text-decoration: underline;
 	display: block;
 	margin-bottom: 12px;
 }
-.user .nb-hashcut:hover{
+.user-screen .nb-hashcut:hover{
 	text-decoration: none;
 }
-.user.popin.info .popin-content a.change-account:hover{
-	background-color: #FF00FC;
-}
+
 /* popin - user - signup */
 .signup-button{
 	background-color: #de2500;
@@ -997,3 +995,7 @@
 .media-segment-popin span{
     color: #7628df;
 }
+
+.hide {
+    display: none;
+}
--- a/src/hashcut/static/hashcut/js/common.js	Sat Dec 01 23:48:11 2012 +0100
+++ b/src/hashcut/static/hashcut/js/common.js	Mon Dec 03 13:06:28 2012 +0100
@@ -12,15 +12,79 @@
     });
     
     $(".change-account").click(function() {
-        $(".user").hide();
-        $(".user.login").show();
+        $(".user-screen").hide();
+        $(".user-screen.login").show();
     });
     $(".signup-button").click(function() {
-        $(".user").hide();
-        $(".user.signup").show();
+        $(".user-screen").hide();
+        $(".user-screen.signup").show();
     });
     $(".login-form, .signup-form").submit(function() {
         $(".user").hide();
+        $(".user-screen").hide();
+        $(".user-screen.info").show();
     });
 
-});
\ No newline at end of file
+});
+
+// Social Plug-in
+
+(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 }));
+}
+}());
\ No newline at end of file
--- a/src/hashcut/templates/bpi_mashup_all_mashups.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,62 +0,0 @@
-{% extends "bpi_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-{% load front_tags %}
-    {% block title %}Tous les Hashcuts{% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/profil.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' %}
-        <div class="title-video-wrap">
-            <p class="title-video" href="#">Tous les Hashcuts</p>
-        </div>
-        <div class="profil-wrap">
-            <ul>
-                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
-                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div> <!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<div class="content">
-    
-    <div class="pagination">
-            {% if results.has_previous %}
-                <a href="{% url mashup_all branding=branding %}?page={{ results.previous_page_number }}" >Précédent</a>
-            {% endif %}
-            {% if results.paginator.num_pages > 1 %}
-              {% for i in results.paginator.num_pages|get_range %}
-                 <a {% if i|add:'1' == results.number %} class="active"{% endif %} href="{% url mashup_all branding=branding %}?page={{i|add:'1'}}">{{i|add:'1'}}</a>
-              {% endfor %}
-            {% endif %}
-            {% if results.has_next %}
-                <a href="{% url mashup_all branding=branding %}?page={{ results.next_page_number }}">Suivant</a>
-            {% endif %}
-            {% if results.paginator.num_pages > 1 %}
-                <a href="{% url mashup_all branding=branding %}?page=x">(Tous)</a>
-            {% endif %}
-            </p>
-    </div>
-    
-    <div class="hashcut-video-wrap profil">
-        {% for m in results.object_list %}
-        <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><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>
-</div><!-- content -->
-{% endblock %}
-
--- a/src/hashcut/templates/bpi_mashup_content.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,158 +0,0 @@
-{% extends "bpi_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-    {% block title %}Lecture du média '{{content.title}}'{% endblock %}   
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/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' %}
-        <div class="title-video-wrap">
-            <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>
-            <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>
-                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div><!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<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">00:00</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="#">{{content.title}}</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>
-        </div>
-        </ul>
-        <h2>Hashcuts utilisant le média</h2>
-        <ul class="list-video">
-            
-        </ul>
-    </div><!-- right-content -->
-</div><!-- content -->
-{% endblock %}
-<!-- JavaScript -->
-{% block js_import %}
-<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/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/js/hashcut.js' %}"></script>
-<script type="text/javascript">
-    IriSP.endpoints = {
-   		content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
-        project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
-        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
-        ldt: "{% url projectjson_id id='' %}",
-        hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
-    };
-    
-    $(function() {
-    	IriSP.video_url_transform = function(oldurl) {
-            var newurl = oldurl.replace(/mp4:/i,'');
-            newurl = newurl.replace(/ddc_player\//i,'');
-            newurl = newurl.replace(/rtmp/i,'http');
-            return newurl;
-        };
-        IriSP.mediaplayer({
-            id: "{{ctt_id}}"
-        });
-        social({
-            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
-        });
-    });
-</script>
-{% endblock %}
-
--- a/src/hashcut/templates/bpi_mashup_edit.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,287 +0,0 @@
-{% extends "bpi_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-    {% block title %}Création de Hashcut{% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery.tagit.css' %}" />
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/edition.css' %}" />
-    {% endblock %}
-
-{% block wrap_header %}
-<div class="wrap-header"> 
-    <div class="header">
-    {% include 'partial/bpi_mashup_popin_user.html' %}
-    <!-- popin update-title -->
-        <div class="popin update-title" id="update-title">
-            <div class="pointer"></div>
-            <div class="popin-content">
-                <form class="clearfix" action="#" id="hashcut-form" method="">
-                    <p>
-                        <label for="hashcut-title">Titre :</label>
-                        <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
-                    </p>
-                    <p>
-                        <label for="hashcut-description">Description :</label>
-                        <textarea name="" id="hashcut-description"></textarea>
-                    </p>
-                </form>
-            </div>
-        </div>
-    <!-- /popin update-title -->
-        
-    {% include 'partial/bpi_hashcut_logo.html' %}
-    
-        <div class="title-video-wrap">
-            <p class="title-video">
-                <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
-            </p>
-            <p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>
-        </div>
-        <div class="profil-wrap">
-	        <ul class="space-top">
-	            <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
-	            <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-	        </ul>
-	    </div>
-    </div><!-- header -->
-</div> <!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<div class="content clearfix">
-
-    <div class="col-left">
-        <div class="left-head">
-            <h2>Sélectionner les vidéos</h2>
-            <input type="text" name="" placeholder="Rechercher une vidéo" />
-        </div>
-        <ul class="list-video">
-
-        </ul>
-    </div><!-- col-left -->
-
-    <div class="col-middle empty-mode">
-        
-        <div class="col-middle-header">
-            <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a>
-            <a href="#" class="tab tab-pvw">Prévisualiser et Publier</a>
-        </div>
-        
-        <div class="video">
-            <div class="tutorial">
-                <h2>Créer un Hashcut, c’est facile !</h2>
-                <ol>
-                    <li>Commencez par choisir une vidéo dans le volet de gauche</li>
-                    <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
-                    <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
-                    <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
-                </ol>
-            </div>
-            <div class="video-wait"></div>
-            <a class="publier-button disable" title="Publier" href="#"></a>
-        </div>
-
-        <div class="widget">
-            <div class="Ldt-Slider-Container">
-                <div class="Ldt-Slider"></div>
-            </div>
-            <div class="Ldt-Slider-Time">00:00</div>
-
-            <div class="Ldt-Ctrl">
-                <div class="Ldt-Ctrl-Left">
-                    <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>
-                    <div class="Ldt-Ctrl-spacer"></div>
-                    <div class="Ldt-Ctrl-InOutBlock">
-                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div>
-                        <div class="Ldt-Ctrl-spacer"></div>
-                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></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 class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div>
-                       <div class="Ldt-Ctrl-Time-Separator">/</div>
-                       <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>
-                   </div>
-                   <div class="Ldt-Ctrl-spacer"></div>
-                   <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div>
-                </div>
-                <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">
-                   <div class="Ldt-Ctrl-Volume-Bar"></div>
-                </div>
-            </div>
-            
-        </div>
-
-        <div class="bloc-segmentation">
-            <div class="Ldt-Slice"></div>
-            <div class="segmentation">
-                <div class="pointer-padder">
-                    <div class="pointer"></div>
-                </div>
-                <div class="popin-content">
-                    <div class="validate">
-                        <div class="validate-tooltip"></div>
-                    </div>
-                    <h2>
-                        <span class="create-or-edit">Créer un nouveau segment</span>
-                        de
-                        <span class="time-tangle tangle-start"></span>
-                        à
-                        <span class="time-tangle tangle-end"></span>
-                        (durée:
-                        <span class="time-tangle tangle-duration"></span>)
-                    </h2>
-                    <form action="#" id="segment-form">
-                        <div class="form-segment-left">
-                            <p>
-                                <label for="segment-title">Titre :</label>
-                                <input type="text" id="segment-title" />
-                            </p>
-                            <p>
-                                <label for="segment-tags">Tags :</label>
-                                <ul id="segment-tags"></ul>
-                            </p>
-                        </div>
-                        <div class="form-segment-right">
-                            <p>
-                                <label for="segment-description">Description :</label>
-                                <textarea id="segment-description"></textarea>
-                            </p>
-                        </div>
-                        <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
-
-                    </form>
-                </div>
-            </div><!-- popin segmentation -->
-            
-            <div class="media-segments self-media-segments">
-                <h2>Mes segments sur ce média :</h2>
-                <div class="media-segments-list">
-                </div>
-            </div>
-            
-            <div class="media-segments other-media-segments">
-                <h2>Segments existants sur ce média :</h2>
-                <div class="media-segments-list">
-                </div>
-            </div>
-
-        </div><!-- bloc-segmentation -->
-
-        <div class="bloc-pvw">
-
-            <div class="frise mashup-frise">
-                <div class="frise-overflow">
-                    <div class="frise-segments">
-                    </div>
-                    <div class="frise-indications">
-                    </div>
-                </div>
-                <div class="frise-position"></div>
-                <div class="mashup-tooltip segment-tooltip-wrapper">
-                    <div class="segment-tooltip"></div>
-                    <div class="segment-tooltip-tip"></div>
-                </div>
-                
-            </div>
-                
-                <div class="segment-info mashup-description">
-                    <div class="pointer-padder">
-                        <div class="pointer"></div>
-                    </div>
-                    <div class="popin-content">
-                        <ul class="tools">
-                            <li><a title="Éditer" class="edit" href="#"></a></li>
-                        </ul>
-
-                        <h2><span class="annotation-title"></span></h2>
-                        <table>
-                            <tbody>
-                                <tr>
-                                    <th>Extrait de :</th>
-                                    <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"></span></td>
-                                </tr>
-                                <tr>
-                                    <th>Tags :</th>
-                                    <td><span class="annotation-tags"></span></td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-        </div><!-- bloc-pvw -->
-
-    </div><!-- col-middle -->
-
-    <div class="col-right">
-        <div class="liste-segment">
-            <div class="validate critical">
-                <div class="validate-tooltip"></div>
-            </div>
-            <h2>Liste des segments</h2>
-            <div class="frise mashup-frise">
-                <p class="aucun-segment">Aucun segment</p>
-                <div class="frise-overflow">
-                    <div class="frise-segments">
-                    </div>
-                    <div class="frise-indications">
-                    </div>
-                </div>
-                <div class="mashup-tooltip segment-tooltip-wrapper">
-                    <div class="segment-tooltip"></div>
-                    <div class="segment-tooltip-tip"></div>
-                </div>
-
-            </div>
-        </div>
-
-        <ul class="list-video organize-segments">
-            
-        </ul>
-    </div><!-- col-right -->
-
-</div><!-- content -->
-{% endblock %}
-<!-- JavaScript -->
-{% block js_import %}
-{{ block.super }}
-<script type="text/javascript" src="{% static 'hashcut/lib/tag-it.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/js/hashcut.js' %}"></script>
-<script type="text/javascript">
-    IriSP.endpoints = {
-        content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
-        //project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
-        project: "{% url mashup_save branding=branding %}",
-        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
-        ldt: "{% url projectjson_id id='' %}",
-        hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
-    };
-    $(function() {
-   	    IriSP.video_url_transform = function(oldurl) {
-   		    var newurl = oldurl.replace(/mp4:/i,'');
-   		    newurl = newurl.replace(/ddc_player\//i,'');
-   		    newurl = newurl.replace(/rtmp/i,'http');
-   		    return newurl;
-   		};
-        var hashcut = IriSP.editor({
-            creator: "{{user.username}}",
-            csrf_token: "{{csrf_token}}",
-            filter: {
-                tags__icontains: "BPI"
-            }
-       });
-    });
-</script>
-{% endblock %}
-
--- a/src/hashcut/templates/bpi_mashup_hashcut.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,189 +0,0 @@
-{% extends "bpi_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-    {% block title %}Lecture du Hashcut '{{proj.title}}'{% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/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' %}
-        <div class="title-video-wrap">
-            <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>
-            <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>
-                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div><!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<div class="content clearfix">
-    <div class="left-content">
-        <h2>Lire le Hashcut</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">00:00</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="frise mashup-frise">
-                <div class="frise-overflow">
-                    <div class="frise-segments">
-                    </div>
-                    <div class="frise-indications">
-                    </div>
-                </div>
-                <div class="frise-position"></div>
-                <div class="mashup-tooltip segment-tooltip-wrapper">
-                    <div class="segment-tooltip"></div>
-                    <div class="segment-tooltip-tip"></div>
-                </div>
-                
-            </div>
-            <div class="segment-info mashup-description">
-                <div class="pointer" style="left: 50%;"></div>
-                <div class="popin-content">
-                    <h2><span class="annotation-title"></span></h2>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <th>Extrait de :</th>
-                                <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"></span></td>
-                            </tr>
-                            <tr>
-                                <th>Tags :</th>
-                                <td><span class="annotation-tags"></span></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </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>{{proj.title}}</td>
-                    </tr>
-                    <tr class="info-duration">
-                        <th>Durée :</th>
-                        <td></td>
-                    </tr>
-                    <tr class="info-author">
-                        <th>Auteur : </th>
-                        <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>
-                        <td></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <h2>Médias utilisés dans le Hashcut</h2>
-        <ul class="list-video">
-            
-        </ul>
-    </div><!-- right-content -->
-</div><!-- content -->
-{% endblock %}
-<!-- JavaScript -->
-{% block js_import %}
-{{ 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/js/hashcut.js' %}"></script>
-<script type="text/javascript">
-    IriSP.endpoints = {
-   		content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
-        project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
-        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
-        ldt: "{% url projectjson_id id='' %}",
-        media_page: "{% url mashup_content branding=branding ctt_id='' %}"
-    };
-    
-    $(function() {
-    	IriSP.video_url_transform = function(oldurl) {
-            var newurl = oldurl.replace(/mp4:/i,'');
-            newurl = newurl.replace(/ddc_player\//i,'');
-            newurl = newurl.replace(/rtmp/i,'http');
-            return newurl;
-        };
-        IriSP.mashupplayer({
-            id: "{{ldt_id}}"
-        });
-        social({
-            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
-        });
-    });
-</script>
-{% endblock %}
-
--- a/src/hashcut/templates/bpi_mashup_home.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,150 +0,0 @@
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-{% load front_tags %}
-<!DOCTYPE html>
-<html>
-<head>
-{% block 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, Thibaut Cavalié" />
-    <title>Hashcut BPI &raquo; {% block title %}Accueil{% endblock %}</title>
-    {% block css_declaration %}
-    {% endblock %}
-    
-    {% block css_import %}
-    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery-ui.css' %}" />
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/reset.css' %}" />
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/common.css' %}" />
-    {% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/home.css' %}" />
-    {% endblock %}
-    
-    {% block js_declaration %}
-    {% endblock %}
-{% endblock %}
-</head>
-<body>
-{% block body %}
-<div class="wrap-header-top">
-    <div class="wrap-header-top-content">
-        <a title="Bibliothèque Publique d'Information" href="{% url mashup_home branding=branding %}"><img src="{% static 'hashcut/bpi/img/pompidou-logo.png' %}" alt="Bibliothèque centre Pompidou" /></a>
-    </div>
-</div><!-- wrap-header-top -->
-
-{% block wrap_header %}
-<div class="wrap-header">
-    <div class="header">
-        {% include 'partial/bpi_mashup_popin_user.html' %}
-        {% include 'partial/bpi_hashcut_logo.html' %}
-        <div class="title-header">
-            <h2><a href="{% url mashup_edit branding=branding %}">Créer un hashcut !</a></h2>
-        </div>
-        <div class="profil-wrap">
-            <ul class="space-top-2">
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div><!-- wrap-header -->
-{% endblock %}
-
-{% block wrapper %}
-<div class="wrapper">
-    <div class="wrap">
-        {% block content %}
-        <div class="content">
-            <div class="left-content">
-                <h2>Hashcuts à la Une</h2>
-                <div class="hashcut-video-wrap news">
-                    <div class="video-item">
-                        {% if m1 %}
-                        <a href="{% url mashup_hashcut branding=branding ldt_id=m1.project.ldt_id %}" class="screenshot">{% thumbnail m1.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><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m1.project.ldt_id %}">{{ m1.project.title }}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m1.creator %}">{{ m1.creator }}</a> | <span class="duration">02:24</span> </h3>
-                        {% endif %}
-                    </div>
-                    <div class="video-item">
-                        {% if m2 %}
-                        <a href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}" class="screenshot">{% thumbnail m2.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><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}">{{ m2.project.title }}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m2.creator %}">{{ m2.creator }}</a> | <span class="duration">02:24</span> </h3>
-                        {% endif %}
-                    </div>
-                </div>
-
-                <h2>Derniers Hashcuts</h2>
-                <div class="hashcut-video-wrap last">
-                    {% 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 "142x95" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt=""/>{% empty %}&nbsp;{% endthumbnail %}</a>
-                        <h3><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}">{% if m.project.title|length > 30 %}{{m.project.title|slice:":30"}}...{% else %}{{m.project.title}}{% endif %}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m.creator %}">{{ m.creator }}</a> | <span class="duration">02:24</span> </h3>
-                    </div>
-                    {% endfor %}
-                </div>
-                
-                <div class="pagination">
-                    <a href="{% url mashup_all branding=branding %}">Tous les Hashcuts</a>
-                </div>
-           
-            </div><!-- left-content -->
-            <div class="right-content">
-                <div class="definition">
-                    <h2>Hashcuts ?</h2>
-                    <p>Un <strong>Hashcut</strong> est à la fois une <a href="http://fr.wikipedia.org/wiki/Hypervid%C3%A9o" target="_blank">Hypervidéo</a> (vidéo cliquable) et un <a href="http://fr.wikipedia.org/wiki/Mashup_%28video%29" target="_blank">Mashup</a> (mélange de médias, de l’anglais mash, «purée»).</p>
-                    <p>Un <strong>Hashcut</strong> est un assemblage de citations de vidéos, mises bout à bout, sans altération des médias d’origine, et permet à chacun de proposer un nouveau regard, une porte d’entrée éditorialisée sur ces médias.</p>
-                </div>
-                <div class="how-to">
-                    <h2>Comment faire ?</h2>
-                    <ul>
-                        <li class="inscription">
-                            <h3><a href="#">1. S’inscrire</a></h3>
-                            <p>Commencez par créer votre espace personnel sur cette plateforme !</p>
-                        </li>
-                        <li class="next-step"></li>
-                        <li class="creation">
-                            <h3><a href="{% url mashup_edit branding=branding %}">2. Créer un hashcut</a></h3>
-                            <p>Choisissez des médias, segmentez les, assemblez les segments et rajoutez des commentaires sur le Hashcut.</p>
-                        </li>
-                        <li class="next-step"></li>
-                        <li class="publier">
-                            <h3><a href="#">3. Publier et partager</a></h3>
-                            <p>Une fois le hashcut terminé, publiez-le sur cette plateforme etpartagez votre création sur les réseaux sociaux</p>
-                        </li>
-                    </ul>
-                </div>
-                
-            </div><!-- left-content -->
-        </div><!-- content -->
-        {% endblock %}
-        {% block footer %}
-        <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/" target="_blank"> <img src="{% static 'hashcut/bpi/img/logo-iri.png' %}" alt="iri" /></a></li>
-                <li><a title="cinecast" href="http://cinecast.fr/" target="_blank"><img src="{% static 'hashcut/bpi/img/logo-cinecast.png' %}" alt="cinecast" /></a></li>
-                <li>© 2012</li>
-            </ul>
-        </div><!-- footer -->
-        {% endblock %}
-    </div><!-- wrap -->
-</div><!-- wrapper -->
-{% endblock %}
-<!-- JavaScript -->
-{% block js_import %}
-<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 %}
-</body>
-</html>
--- a/src/hashcut/templates/bpi_mashup_profile.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,79 +0,0 @@
-{% extends "bpi_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-    {% block title %}Profil de '{{username}}'{% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/profil.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' %}
-        <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>
-                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div> <!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<div class="content">
-
-    <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><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>
-    <!--div class="pagination">
-            <a href="#" class="active">1</a>
-            <a href="#">2</a>
-            <a href="#">3</a>
-            <a href="#">4</a>
-            <a href="#">5</a>
-            <a href="#">6</a>
-            <a href="#">Suivant</a>
-    </div-->
-</div><!-- content -->
-{% endblock %}
-{% block js_import %}
-{{block.super}}
-<script type="text/javascript">
-    $(function() {
-        social({
-            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
-        });
-    });
-</script>
-{% endblock %}
-
--- a/src/hashcut/templates/iri_mashup_all_mashups.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,62 +0,0 @@
-{% extends "iri_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-{% load front_tags %}
-    {% block title %}Tous les Hashcuts{% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/iri/css/profil.css' %}" />
-    {% endblock %}
-
-{% block wrap_header %}
-<div class="wrap-header"> 
-    <div class="header">
-    {% include 'partial/iri_mashup_popin_user.html' %}
-    {% include 'partial/iri_hashcut_logo.html' %}
-        <div class="title-video-wrap">
-            <p class="title-video" href="#">Tous les Hashcuts</p>
-        </div>
-        <div class="profil-wrap">
-            <ul>
-                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
-                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div> <!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<div class="content">
-    
-    <div class="pagination">
-            {% if results.has_previous %}
-                <a href="{% url mashup_all branding=branding %}?page={{ results.previous_page_number }}" >Précédent</a>
-            {% endif %}
-            {% if results.paginator.num_pages > 1 %}
-              {% for i in results.paginator.num_pages|get_range %}
-                 <a {% if i|add:'1' == results.number %} class="active"{% endif %} href="{% url mashup_all branding=branding %}?page={{i|add:'1'}}">{{i|add:'1'}}</a>
-              {% endfor %}
-            {% endif %}
-            {% if results.has_next %}
-                <a href="{% url mashup_all branding=branding %}?page={{ results.next_page_number }}">Suivant</a>
-            {% endif %}
-            {% if results.paginator.num_pages > 1 %}
-                <a href="{% url mashup_all branding=branding %}?page=x">(Tous)</a>
-            {% endif %}
-            </p>
-    </div>
-    
-    <div class="hashcut-video-wrap profil">
-        {% for m in results.object_list %}
-        <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><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>
-</div><!-- content -->
-{% endblock %}
-
--- a/src/hashcut/templates/iri_mashup_content.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,158 +0,0 @@
-{% extends "iri_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-    {% block title %}Lecture du média '{{content.title}}'{% endblock %}   
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/iri/css/players.css' %}" />
-    {% endblock %} 
-
-{% block wrap_header %}
-<div class="wrap-header">  
-    <div class="header">
-        {% include 'partial/iri_mashup_popin_user.html' %}
-        {% include 'partial/iri_hashcut_logo.html' %}
-        <div class="title-video-wrap">
-            <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>
-            <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>
-                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div><!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<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">00:00</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="#">{{content.title}}</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>
-        </div>
-        </ul>
-        <h2>Hashcuts utilisant le média</h2>
-        <ul class="list-video">
-            
-        </ul>
-    </div><!-- right-content -->
-</div><!-- content -->
-{% endblock %}
-<!-- JavaScript -->
-{% block js_import %}
-<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/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/js/hashcut.js' %}"></script>
-<script type="text/javascript">
-    IriSP.endpoints = {
-   		content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
-        project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
-        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
-        ldt: "{% url projectjson_id id='' %}",
-        hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
-    };
-    
-    $(function() {
-    	IriSP.video_url_transform = function(oldurl) {
-            var newurl = oldurl.replace(/mp4:/i,'');
-            newurl = newurl.replace(/ddc_player\//i,'');
-            newurl = newurl.replace(/rtmp/i,'http');
-            return newurl;
-        };
-        IriSP.mediaplayer({
-            id: "{{ctt_id}}"
-        });
-        social({
-            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
-        });
-    });
-</script>
-{% endblock %}
-
--- a/src/hashcut/templates/iri_mashup_edit.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,287 +0,0 @@
-{% extends "iri_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-    {% block title %}Création de Hashcut{% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery.tagit.css' %}" />
-    <link rel="stylesheet" href="{% static 'hashcut/iri/css/edition.css' %}" />
-    {% endblock %}
-
-{% block wrap_header %}
-<div class="wrap-header"> 
-    <div class="header">
-    {% include 'partial/iri_mashup_popin_user.html' %}
-    <!-- popin update-title -->
-        <div class="popin update-title" id="update-title">
-            <div class="pointer"></div>
-            <div class="popin-content">
-                <form class="clearfix" action="#" id="hashcut-form" method="">
-                    <p>
-                        <label for="hashcut-title">Titre :</label>
-                        <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
-                    </p>
-                    <p>
-                        <label for="hashcut-description">Description :</label>
-                        <textarea name="" id="hashcut-description"></textarea>
-                    </p>
-                </form>
-            </div>
-        </div>
-    <!-- /popin update-title -->
-        
-    {% include 'partial/iri_hashcut_logo.html' %}
-    
-        <div class="title-video-wrap">
-            <p class="title-video">
-                <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
-            </p>
-            <p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>
-        </div>
-        <div class="profil-wrap">
-	        <ul class="space-top">
-	            <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
-	            <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-	        </ul>
-	    </div>
-    </div><!-- header -->
-</div> <!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<div class="content clearfix">
-
-    <div class="col-left">
-        <div class="left-head">
-            <h2>Sélectionner les vidéos</h2>
-            <input type="text" name="" placeholder="Rechercher une vidéo" />
-        </div>
-        <ul class="list-video">
-
-        </ul>
-    </div><!-- col-left -->
-
-    <div class="col-middle empty-mode">
-        
-        <div class="col-middle-header">
-            <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a>
-            <a href="#" class="tab tab-pvw">Prévisualiser</a>
-        </div>
-        
-        <div class="video">
-            <div class="tutorial">
-                <h2>Créer un Hashcut, c’est facile !</h2>
-                <ol>
-                    <li>Commencez par choisir une vidéo dans le volet de gauche</li>
-                    <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
-                    <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
-                    <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
-                </ol>
-            </div>
-            <div class="video-wait"></div>
-            <a class="publier-button disable" title="Publier" href="#"></a>
-        </div>
-
-        <div class="widget">
-            <div class="Ldt-Slider-Container">
-                <div class="Ldt-Slider"></div>
-            </div>
-            <div class="Ldt-Slider-Time">00:00</div>
-
-            <div class="Ldt-Ctrl">
-                <div class="Ldt-Ctrl-Left">
-                    <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>
-                    <div class="Ldt-Ctrl-spacer"></div>
-                    <div class="Ldt-Ctrl-InOutBlock">
-                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div>
-                        <div class="Ldt-Ctrl-spacer"></div>
-                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></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 class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div>
-                       <div class="Ldt-Ctrl-Time-Separator">/</div>
-                       <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>
-                   </div>
-                   <div class="Ldt-Ctrl-spacer"></div>
-                   <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div>
-                </div>
-                <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">
-                   <div class="Ldt-Ctrl-Volume-Bar"></div>
-                </div>
-            </div>
-            
-        </div>
-
-        <div class="bloc-segmentation">
-            <div class="Ldt-Slice"></div>
-            <div class="segmentation">
-                <div class="pointer-padder">
-                    <div class="pointer"></div>
-                </div>
-                <div class="popin-content">
-                    <div class="validate">
-                        <div class="validate-tooltip"></div>
-                    </div>
-                    <h2>
-                        <span class="create-or-edit">Créer un nouveau segment</span>
-                        de
-                        <span class="time-tangle tangle-start"></span>
-                        à
-                        <span class="time-tangle tangle-end"></span>
-                        (durée:
-                        <span class="time-tangle tangle-duration"></span>)
-                    </h2>
-                    <form action="#" id="segment-form">
-                        <div class="form-segment-left">
-                            <p>
-                                <label for="segment-title">Titre :</label>
-                                <input type="text" id="segment-title" />
-                            </p>
-                            <p>
-                                <label for="segment-tags">Tags :</label>
-                                <ul id="segment-tags"></ul>
-                            </p>
-                        </div>
-                        <div class="form-segment-right">
-                            <p>
-                                <label for="segment-description">Description :</label>
-                                <textarea id="segment-description"></textarea>
-                            </p>
-                        </div>
-                        <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
-
-                    </form>
-                </div>
-            </div><!-- popin segmentation -->
-            
-            <div class="media-segments self-media-segments">
-                <h2>Mes segments sur ce média :</h2>
-                <div class="media-segments-list">
-                </div>
-            </div>
-            
-            <div class="media-segments other-media-segments">
-                <h2>Segments existants sur ce média :</h2>
-                <div class="media-segments-list">
-                </div>
-            </div>
-
-        </div><!-- bloc-segmentation -->
-
-        <div class="bloc-pvw">
-
-            <div class="frise mashup-frise">
-                <div class="frise-overflow">
-                    <div class="frise-segments">
-                    </div>
-                    <div class="frise-indications">
-                    </div>
-                </div>
-                <div class="frise-position"></div>
-                <div class="mashup-tooltip segment-tooltip-wrapper">
-                    <div class="segment-tooltip"></div>
-                    <div class="segment-tooltip-tip"></div>
-                </div>
-                
-            </div>
-                
-                <div class="segment-info mashup-description">
-                    <div class="pointer-padder">
-                        <div class="pointer"></div>
-                    </div>
-                    <div class="popin-content">
-                        <ul class="tools">
-                            <li><a title="Éditer" class="edit" href="#"></a></li>
-                        </ul>
-
-                        <h2><span class="annotation-title"></span></h2>
-                        <table>
-                            <tbody>
-                                <tr>
-                                    <th>Extrait de :</th>
-                                    <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"></span></td>
-                                </tr>
-                                <tr>
-                                    <th>Tags :</th>
-                                    <td><span class="annotation-tags"></span></td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-        </div><!-- bloc-pvw -->
-
-    </div><!-- col-middle -->
-
-    <div class="col-right">
-        <div class="liste-segment">
-            <div class="validate critical">
-                <div class="validate-tooltip"></div>
-            </div>
-            <h2>Liste des segments</h2>
-            <div class="frise mashup-frise">
-                <p class="aucun-segment">Aucun segment</p>
-                <div class="frise-overflow">
-                    <div class="frise-segments">
-                    </div>
-                    <div class="frise-indications">
-                    </div>
-                </div>
-                <div class="mashup-tooltip segment-tooltip-wrapper">
-                    <div class="segment-tooltip"></div>
-                    <div class="segment-tooltip-tip"></div>
-                </div>
-
-            </div>
-        </div>
-
-        <ul class="list-video organize-segments">
-            
-        </ul>
-    </div><!-- col-right -->
-
-</div><!-- content -->
-{% endblock %}
-<!-- JavaScript -->
-{% block js_import %}
-{{ block.super }}
-<script type="text/javascript" src="{% static 'hashcut/lib/tag-it.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/js/hashcut.js' %}"></script>
-<script type="text/javascript">
-    IriSP.endpoints = {
-        content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
-        //project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
-        project: "{% url mashup_save branding=branding %}",
-        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
-        ldt: "{% url projectjson_id id='' %}",
-        hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
-    };
-    $(function() {
-   	    IriSP.video_url_transform = function(oldurl) {
-   		    var newurl = oldurl.replace(/mp4:/i,'');
-   		    newurl = newurl.replace(/ddc_player\//i,'');
-   		    newurl = newurl.replace(/rtmp/i,'http');
-   		    return newurl;
-   		};
-        var hashcut = IriSP.editor({
-            creator: "{{user.username}}",
-            csrf_token: "{{csrf_token}}",
-            filter: {
-                tags__icontains: "BPI"
-            }
-       });
-    });
-</script>
-{% endblock %}
-
--- a/src/hashcut/templates/iri_mashup_hashcut.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,189 +0,0 @@
-{% extends "iri_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-    {% block title %}Lecture du Hashcut '{{proj.title}}'{% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/iri/css/players.css' %}" />
-    {% endblock %}
-
-{% block wrap_header %}
-<div class="wrap-header">  
-    <div class="header">
-        {% include 'partial/iri_mashup_popin_user.html' %}
-        {% include 'partial/iri_hashcut_logo.html' %}
-        <div class="title-video-wrap">
-            <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>
-            <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>
-                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div><!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<div class="content clearfix">
-    <div class="left-content">
-        <h2>Lire le Hashcut</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">00:00</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="frise mashup-frise">
-                <div class="frise-overflow">
-                    <div class="frise-segments">
-                    </div>
-                    <div class="frise-indications">
-                    </div>
-                </div>
-                <div class="frise-position"></div>
-                <div class="mashup-tooltip segment-tooltip-wrapper">
-                    <div class="segment-tooltip"></div>
-                    <div class="segment-tooltip-tip"></div>
-                </div>
-                
-            </div>
-            <div class="segment-info mashup-description">
-                <div class="pointer" style="left: 50%;"></div>
-                <div class="popin-content">
-                    <h2><span class="annotation-title"></span></h2>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <th>Extrait de :</th>
-                                <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"></span></td>
-                            </tr>
-                            <tr>
-                                <th>Tags :</th>
-                                <td><span class="annotation-tags"></span></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </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>{{proj.title}}</td>
-                    </tr>
-                    <tr class="info-duration">
-                        <th>Durée :</th>
-                        <td></td>
-                    </tr>
-                    <tr class="info-author">
-                        <th>Auteur : </th>
-                        <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>
-                        <td></td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <h2>Médias utilisés dans le Hashcut</h2>
-        <ul class="list-video">
-            
-        </ul>
-    </div><!-- right-content -->
-</div><!-- content -->
-{% endblock %}
-<!-- JavaScript -->
-{% block js_import %}
-{{ 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/js/hashcut.js' %}"></script>
-<script type="text/javascript">
-    IriSP.endpoints = {
-   		content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
-        project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
-        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
-        ldt: "{% url projectjson_id id='' %}",
-        media_page: "{% url mashup_content branding=branding ctt_id='' %}"
-    };
-    
-    $(function() {
-    	IriSP.video_url_transform = function(oldurl) {
-            var newurl = oldurl.replace(/mp4:/i,'');
-            newurl = newurl.replace(/ddc_player\//i,'');
-            newurl = newurl.replace(/rtmp/i,'http');
-            return newurl;
-        };
-        IriSP.mashupplayer({
-            id: "{{ldt_id}}"
-        });
-        social({
-            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
-        });
-    });
-</script>
-{% endblock %}
-
--- a/src/hashcut/templates/iri_mashup_home.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,149 +0,0 @@
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-<!DOCTYPE html>
-<html>
-<head>
-{% block 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, Thibaut Cavalié" />
-    <title>Hashcut &raquo; {% block title %}Accueil{% endblock %}</title>
-    {% block css_declaration %}
-    {% endblock %}
-    
-    {% block css_import %}
-    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery-ui.css' %}" />
-    <link rel="stylesheet" href="{% static 'hashcut/iri/css/reset.css' %}" />
-    <link rel="stylesheet" href="{% static 'hashcut/iri/css/common.css' %}" />
-    {% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/iri/css/home.css' %}" />
-    {% endblock %}
-    
-    {% block js_declaration %}
-    {% endblock %}
-{% endblock %}
-</head>
-<body>
-{% block body %}
-<div class="wrap-header-top">
-    <div class="wrap-header-top-content">
-        <a title="Institut de recherche et d'innovation" href="{% url mashup_home branding=branding %}"><img src="{% static 'hashcut/iri/img/logo-iri.png' %}" alt="Institut de recherche et d'innovation" /></a>
-    </div>
-</div><!-- wrap-header-top -->
-
-{% block wrap_header %}
-<div class="wrap-header">
-    <div class="header">
-        {% include 'partial/iri_mashup_popin_user.html' %}
-        {% include 'partial/iri_hashcut_logo.html' %}
-        <div class="title-header">
-            <h2><a href="{% url mashup_edit branding=branding %}">Créer un hashcut !</a></h2>
-        </div>
-        <div class="profil-wrap">
-            <ul class="space-top-2">
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div><!-- wrap-header -->
-{% endblock %}
-
-{% block wrapper %}
-<div class="wrapper">
-    <div class="wrap">
-        {% block content %}
-        <div class="content">
-            <div class="left-content">
-                <h2>Hashcuts à la Une</h2>
-                <div class="hashcut-video-wrap news">
-                    <div class="video-item">
-                        {% if m1 %}
-                        <a href="{% url mashup_hashcut branding=branding ldt_id=m1.project.ldt_id %}" class="screenshot">{% thumbnail m1.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><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m1.project.ldt_id %}">{{ m1.project.title }}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m1.creator %}">{{ m1.creator }}</a> | <span class="duration">02:24</span> </h3>
-                        {% endif %}
-                    </div>
-                    <div class="video-item">
-                        {% if m2 %}
-                        <a href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}" class="screenshot">{% thumbnail m2.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><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}">{{ m2.project.title }}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m2.creator %}">{{ m2.creator }}</a> | <span class="duration">02:24</span> </h3>
-                        {% endif %}
-                    </div>
-                </div>
-
-                <h2>Derniers Hashcuts</h2>
-                <div class="hashcut-video-wrap last">
-                    {% 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 "142x95" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt=""/>{% empty %}&nbsp;{% endthumbnail %}</a>
-                        <h3><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}">{% if m.project.title|length > 30 %}{{m.project.title|slice:":30"}}...{% else %}{{m.project.title}}{% endif %}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m.creator %}">{{ m.creator }}</a> | <span class="duration">02:24</span> </h3>
-                    </div>
-                    {% endfor %}
-                </div>
-                
-                <div class="pagination">
-                    <a href="{% url mashup_all branding=branding %}">Tous les Hashcuts</a>
-                </div>
-           
-            </div><!-- left-content -->
-            <div class="right-content">
-                <div class="definition">
-                    <h2>Hashcuts ?</h2>
-                    <p>Un <strong>Hashcut</strong> est à la fois une <a href="http://fr.wikipedia.org/wiki/Hypervid%C3%A9o" target="_blank">Hypervidéo</a> (vidéo cliquable) et un <a href="http://fr.wikipedia.org/wiki/Mashup_%28video%29" target="_blank">Mashup</a> (mélange de médias, de l’anglais mash, «purée»).</p>
-                    <p>Un <strong>Hashcut</strong> est un assemblage de citations de vidéos, mises bout à bout, sans altération des médias d’origine, et permet à chacun de proposer un nouveau regard, une porte d’entrée éditorialisée sur ces médias.</p>
-                </div>
-                <div class="how-to">
-                    <h2>Comment faire ?</h2>
-                    <ul>
-                        <li class="inscription">
-                            <h3><a href="#">1. S’inscrire</a></h3>
-                            <p>Commencez par créer votre espace personnel sur cette plateforme !</p>
-                        </li>
-                        <li class="next-step"></li>
-                        <li class="creation">
-                            <h3><a href="{% url mashup_edit branding=branding %}">2. Créer un hashcut</a></h3>
-                            <p>Choisissez des médias, segmentez les, assemblez les segments et rajoutez des commentaires sur le Hashcut.</p>
-                        </li>
-                        <li class="next-step"></li>
-                        <li class="publier">
-                            <h3><a href="#">3. Publier et partager</a></h3>
-                            <p>Une fois le hashcut terminé, publiez-le sur cette plateforme etpartagez votre création sur les réseaux sociaux</p>
-                        </li>
-                    </ul>
-                </div>
-                
-            </div><!-- left-content -->
-        </div><!-- content -->
-        {% endblock %}
-        {% block footer %}
-        <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/" target="_blank"> <img src="{% static 'hashcut/iri/img/logo-iri.png' %}" alt="iri" /></a></li>
-                <li><a title="cinecast" href="http://cinecast.fr/" target="_blank"><img src="{% static 'hashcut/iri/img/logo-cinecast.png' %}" alt="cinecast" /></a></li>
-                <li>© 2012</li>
-            </ul>
-        </div><!-- footer -->
-        {% endblock %}
-    </div><!-- wrap -->
-</div><!-- wrapper -->
-{% endblock %}
-<!-- JavaScript -->
-{% block js_import %}
-<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 %}
-</body>
-</html>
--- a/src/hashcut/templates/iri_mashup_profile.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,79 +0,0 @@
-{% extends "iri_mashup_home.html" %}
-{% load static %}
-{% load i18n %}
-{% load analytics %}
-{% load thumbnail %}
-    {% block title %}Profil de '{{username}}'{% endblock %}
-    {% block css_page %}
-    <link rel="stylesheet" href="{% static 'hashcut/iri/css/profil.css' %}" />
-    {% endblock %}
-
-{% block wrap_header %}
-<div class="wrap-header"> 
-    <div class="header">
-    {% include 'partial/iri_mashup_popin_user.html' %}
-    {% include 'partial/iri_hashcut_logo.html' %}
-        <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>
-                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
-                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
-            </ul>
-        </div>
-    </div><!-- header -->
-</div> <!-- wrap-header -->
-{% endblock %}
-
-{% block content %}
-<div class="content">
-
-    <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><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>
-    <!--div class="pagination">
-            <a href="#" class="active">1</a>
-            <a href="#">2</a>
-            <a href="#">3</a>
-            <a href="#">4</a>
-            <a href="#">5</a>
-            <a href="#">6</a>
-            <a href="#">Suivant</a>
-    </div-->
-</div><!-- content -->
-{% endblock %}
-{% block js_import %}
-{{block.super}}
-<script type="text/javascript">
-    $(function() {
-        social({
-            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
-        });
-    });
-</script>
-{% endblock %}
-
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/mashup_all_mashups.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,62 @@
+{% extends "mashup_home.html" %}
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+{% load front_tags %}
+    {% block title %}Tous les Hashcuts{% endblock %}
+    {% block css_page %}
+    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/profil.css" />
+    {% endblock %}
+
+{% block wrap_header %}
+<div class="wrap-header"> 
+    <div class="header">
+    {% include 'partial/mashup_popin_user.html' %}
+    {% include 'partial/hashcut_logo.html' %}
+        <div class="title-video-wrap">
+            <p class="title-video" href="#">Tous les Hashcuts</p>
+        </div>
+        <div class="profil-wrap">
+            <ul>
+                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
+                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
+                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+            </ul>
+        </div>
+    </div><!-- header -->
+</div> <!-- wrap-header -->
+{% endblock %}
+
+{% block content %}
+<div class="content">
+    
+    <div class="pagination">
+            {% if results.has_previous %}
+                <a href="{% url mashup_all branding=branding %}?page={{ results.previous_page_number }}" >Précédent</a>
+            {% endif %}
+            {% if results.paginator.num_pages > 1 %}
+              {% for i in results.paginator.num_pages|get_range %}
+                 <a {% if i|add:'1' == results.number %} class="active"{% endif %} href="{% url mashup_all branding=branding %}?page={{i|add:'1'}}">{{i|add:'1'}}</a>
+              {% endfor %}
+            {% endif %}
+            {% if results.has_next %}
+                <a href="{% url mashup_all branding=branding %}?page={{ results.next_page_number }}">Suivant</a>
+            {% endif %}
+            {% if results.paginator.num_pages > 1 %}
+                <a href="{% url mashup_all branding=branding %}?page=x">(Tous)</a>
+            {% endif %}
+            </p>
+    </div>
+    
+    <div class="hashcut-video-wrap profil">
+        {% for m in results.object_list %}
+        <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><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>
+</div><!-- content -->
+{% endblock %}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/mashup_content.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,146 @@
+{% extends "mashup_home.html" %}
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+    {% block title %}Lecture du média '{{content.title}}'{% endblock %}   
+    {% block css_page %}
+    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/players.css" />
+    {% endblock %} 
+
+{% block wrap_header %}
+<div class="wrap-header">  
+    <div class="header">
+        {% include 'partial/mashup_popin_user.html' %}
+        {% include 'partial/hashcut_logo.html' %}
+        <div class="title-video-wrap">
+            <p class="title-video" href="#">
+                <span class="category">Média</span>
+                <span class="separator">&raquo;</span>
+                {{content.title}}
+            </p>
+        </div>
+        {% include 'partial/hashcut_social.html' %}
+        <div class="profil-wrap">
+            <ul>
+                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
+                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
+                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+            </ul>
+        </div>
+    </div><!-- header -->
+</div><!-- wrap-header -->
+{% endblock %}
+
+{% block content %}
+<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">00:00</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="#">{{content.title}}</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>
+        </div>
+        </ul>
+        <h2>Hashcuts utilisant le média</h2>
+        <ul class="list-video">
+            
+        </ul>
+    </div><!-- right-content -->
+</div><!-- content -->
+{% endblock %}
+<!-- JavaScript -->
+{% block js_import %}
+<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/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/js/hashcut.js' %}"></script>
+<script type="text/javascript">
+    IriSP.endpoints = {
+   		content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
+        project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
+        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
+        ldt: "{% url projectjson_id id='' %}",
+        hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
+    };
+    
+    $(function() {
+    	IriSP.video_url_transform = function(oldurl) {
+            var newurl = oldurl.replace(/mp4:/i,'');
+            newurl = newurl.replace(/ddc_player\//i,'');
+            newurl = newurl.replace(/rtmp/i,'http');
+            return newurl;
+        };
+        IriSP.mediaplayer({
+            id: "{{ctt_id}}"
+        });
+        social({
+            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
+        });
+    });
+</script>
+{% endblock %}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/mashup_edit.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,288 @@
+{% extends "mashup_home.html" %}
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+    {% block title %}Création de Hashcut{% endblock %}
+    {% block css_page %}
+    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery.tagit.css' %}" />
+    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/edition.css" />
+    {% endblock %}
+
+{% block wrap_header %}
+<div class="wrap-header"> 
+    <div class="header">
+    {% include 'partial/mashup_popin_user.html' %}
+    <!-- popin update-title -->
+        <div class="popin update-title" id="update-title">
+            <div class="pointer"></div>
+            <div class="popin-content">
+                <form class="clearfix" action="#" id="hashcut-form" method="">
+                    <p>
+                        <label for="hashcut-title">Titre :</label>
+                        <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
+                    </p>
+                    <p>
+                        <label for="hashcut-description">Description :</label>
+                        <textarea name="" id="hashcut-description"></textarea>
+                    </p>
+                </form>
+            </div>
+        </div>
+    <!-- /popin update-title -->
+        
+    {% include 'partial/hashcut_logo.html' %}
+    
+        <div class="title-video-wrap">
+            <p class="title-video">
+                <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
+            </p>
+            <p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>
+        </div>
+        <div class="profil-wrap">
+	        <ul class="space-top">
+	            <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
+	            <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+	        </ul>
+	    </div>
+    </div><!-- header -->
+</div> <!-- wrap-header -->
+{% endblock %}
+
+{% block content %}
+<div class="content clearfix">
+
+    <div class="col-left">
+        <div class="left-head">
+            <h2>Sélectionner les vidéos</h2>
+            <input type="text" name="" placeholder="Rechercher une vidéo" />
+        </div>
+        <ul class="list-video">
+
+        </ul>
+    </div><!-- col-left -->
+
+    <div class="col-middle empty-mode">
+        
+        <div class="col-middle-header">
+            <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a>
+            <a href="#" class="tab tab-pvw">Prévisualiser et Publier</a>
+        </div>
+        
+        <div class="video">
+            <div class="tutorial">
+                <h2>Créer un Hashcut, c’est facile !</h2>
+                <ol>
+                    <li>Commencez par choisir une vidéo dans le volet de gauche</li>
+                    <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
+                    <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
+                    <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
+                </ol>
+            </div>
+            <div class="video-wait"></div>
+            <a class="publier-button disable" title="Publier" href="#"></a>
+        </div>
+
+        <div class="widget">
+            <div class="Ldt-Slider-Container">
+                <div class="Ldt-Slider"></div>
+            </div>
+            <div class="Ldt-Slider-Time">00:00</div>
+
+            <div class="Ldt-Ctrl">
+                <div class="Ldt-Ctrl-Left">
+                    <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>
+                    <div class="Ldt-Ctrl-spacer"></div>
+                    <div class="Ldt-Ctrl-InOutBlock">
+                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div>
+                        <div class="Ldt-Ctrl-spacer"></div>
+                        <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></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 class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div>
+                       <div class="Ldt-Ctrl-Time-Separator">/</div>
+                       <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>
+                   </div>
+                   <div class="Ldt-Ctrl-spacer"></div>
+                   <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div>
+                </div>
+                <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">
+                   <div class="Ldt-Ctrl-Volume-Bar"></div>
+                </div>
+            </div>
+            
+        </div>
+
+        <div class="bloc-segmentation">
+            <div class="Ldt-Slice"></div>
+            <div class="segmentation">
+                <div class="pointer-padder">
+                    <div class="pointer"></div>
+                </div>
+                <div class="popin-content">
+                    <div class="validate">
+                        <div class="validate-tooltip"></div>
+                    </div>
+                    <h2>
+                        <span class="create-or-edit">Créer un nouveau segment</span>
+                        de
+                        <span class="time-tangle tangle-start"></span>
+                        à
+                        <span class="time-tangle tangle-end"></span>
+                        (durée:
+                        <span class="time-tangle tangle-duration"></span>)
+                    </h2>
+                    <form action="#" id="segment-form">
+                        <div class="form-segment-left">
+                            <p>
+                                <label for="segment-title">Titre :</label>
+                                <input type="text" id="segment-title" />
+                            </p>
+                            <p>
+                                <label for="segment-tags">Tags :</label>
+                                <ul id="segment-tags"></ul>
+                            </p>
+                        </div>
+                        <div class="form-segment-right">
+                            <p>
+                                <label for="segment-description">Description :</label>
+                                <textarea id="segment-description"></textarea>
+                            </p>
+                        </div>
+                        <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
+
+                    </form>
+                </div>
+            </div><!-- popin segmentation -->
+            
+            <div class="media-segments self-media-segments">
+                <h2>Mes segments sur ce média :</h2>
+                <div class="media-segments-list">
+                </div>
+            </div>
+            
+            <div class="media-segments other-media-segments">
+                <h2>Segments existants sur ce média :</h2>
+                <div class="media-segments-list">
+                </div>
+            </div>
+
+        </div><!-- bloc-segmentation -->
+
+        <div class="bloc-pvw">
+
+            <div class="frise mashup-frise">
+                <div class="frise-overflow">
+                    <div class="frise-segments">
+                    </div>
+                    <div class="frise-indications">
+                    </div>
+                </div>
+                <div class="frise-position"></div>
+                <div class="mashup-tooltip segment-tooltip-wrapper">
+                    <div class="segment-tooltip"></div>
+                    <div class="segment-tooltip-tip"></div>
+                </div>
+                
+            </div>
+                
+                <div class="segment-info mashup-description">
+                    <div class="pointer-padder">
+                        <div class="pointer"></div>
+                    </div>
+                    <div class="popin-content">
+                        <ul class="tools">
+                            <li><a title="Éditer" class="edit" href="#"></a></li>
+                        </ul>
+
+                        <h2><span class="annotation-title"></span></h2>
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <th>Extrait de :</th>
+                                    <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"></span></td>
+                                </tr>
+                                <tr>
+                                    <th>Tags :</th>
+                                    <td><span class="annotation-tags"></span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+        </div><!-- bloc-pvw -->
+
+    </div><!-- col-middle -->
+
+    <div class="col-right">
+        <div class="liste-segment">
+            <div class="validate critical">
+                <div class="validate-tooltip"></div>
+            </div>
+            <h2>Liste des segments</h2>
+            <div class="frise mashup-frise">
+                <p class="aucun-segment">Aucun segment</p>
+                <div class="frise-overflow">
+                    <div class="frise-segments">
+                    </div>
+                    <div class="frise-indications">
+                    </div>
+                </div>
+                <div class="mashup-tooltip segment-tooltip-wrapper">
+                    <div class="segment-tooltip"></div>
+                    <div class="segment-tooltip-tip"></div>
+                </div>
+
+            </div>
+        </div>
+
+        <ul class="list-video organize-segments">
+            
+        </ul>
+    </div><!-- col-right -->
+
+</div><!-- content -->
+{% endblock %}
+<!-- JavaScript -->
+{% block js_import %}
+{{ block.super }}
+<script type="text/javascript" src="{% static 'hashcut/lib/tag-it.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/js/hashcut.js' %}"></script>
+<script type="text/javascript">
+    IriSP.endpoints = {
+        content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
+        //project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
+        project: "{% url mashup_save branding=branding %}",
+        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
+        ldt: "{% url projectjson_id id='' %}",
+        hashcut_page: "{% url mashup_hashcut branding=branding ldt_id='' %}"
+    };
+    $(function() {
+   	    IriSP.video_url_transform = function(oldurl) {
+   		    var newurl = oldurl.replace(/mp4:/i,'');
+   		    newurl = newurl.replace(/ddc_player\//i,'');
+   		    newurl = newurl.replace(/rtmp/i,'http');
+   		    return newurl;
+   		};
+        var hashcut = IriSP.editor({
+            creator: "{{user.username}}",
+            csrf_token: "{{csrf_token}}",
+            filter: {
+                tags__icontains: "{{branding}}"
+            }
+       });
+       $(".change-account").remove();
+    });
+</script>
+{% endblock %}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/mashup_hashcut.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,177 @@
+{% extends "mashup_home.html" %}
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+    {% block title %}Lecture du Hashcut '{{proj.title}}'{% endblock %}
+    {% block css_page %}
+    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/players.css" />
+    {% endblock %}
+
+{% block wrap_header %}
+<div class="wrap-header">  
+    <div class="header">
+        {% include 'partial/mashup_popin_user.html' %}
+        {% include 'partial/hashcut_logo.html' %}
+        <div class="title-video-wrap">
+            <p class="title-video" href="#">
+                <span class="category">Hashcut</span>
+                <span class="separator">&raquo;</span>
+                {{proj.title}}
+            </p>
+        </div>
+        {% include 'partial/hashcut_social.html' %}
+        <div class="profil-wrap">
+            <ul>
+                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
+                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
+                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+            </ul>
+        </div>
+    </div><!-- header -->
+</div><!-- wrap-header -->
+{% endblock %}
+
+{% block content %}
+<div class="content clearfix">
+    <div class="left-content">
+        <h2>Lire le Hashcut</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">00:00</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="frise mashup-frise">
+                <div class="frise-overflow">
+                    <div class="frise-segments">
+                    </div>
+                    <div class="frise-indications">
+                    </div>
+                </div>
+                <div class="frise-position"></div>
+                <div class="mashup-tooltip segment-tooltip-wrapper">
+                    <div class="segment-tooltip"></div>
+                    <div class="segment-tooltip-tip"></div>
+                </div>
+                
+            </div>
+            <div class="segment-info mashup-description">
+                <div class="pointer" style="left: 50%;"></div>
+                <div class="popin-content">
+                    <h2><span class="annotation-title"></span></h2>
+                    <table>
+                        <tbody>
+                            <tr>
+                                <th>Extrait de :</th>
+                                <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"></span></td>
+                            </tr>
+                            <tr>
+                                <th>Tags :</th>
+                                <td><span class="annotation-tags"></span></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </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>{{proj.title}}</td>
+                    </tr>
+                    <tr class="info-duration">
+                        <th>Durée :</th>
+                        <td></td>
+                    </tr>
+                    <tr class="info-author">
+                        <th>Auteur : </th>
+                        <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>
+                        <td></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <h2>Médias utilisés dans le Hashcut</h2>
+        <ul class="list-video">
+            
+        </ul>
+    </div><!-- right-content -->
+</div><!-- content -->
+{% endblock %}
+<!-- JavaScript -->
+{% block js_import %}
+{{ 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/js/hashcut.js' %}"></script>
+<script type="text/javascript">
+    IriSP.endpoints = {
+   		content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
+        project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
+        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
+        ldt: "{% url projectjson_id id='' %}",
+        media_page: "{% url mashup_content branding=branding ctt_id='' %}"
+    };
+    
+    $(function() {
+    	IriSP.video_url_transform = function(oldurl) {
+            var newurl = oldurl.replace(/mp4:/i,'');
+            newurl = newurl.replace(/ddc_player\//i,'');
+            newurl = newurl.replace(/rtmp/i,'http');
+            return newurl;
+        };
+        IriSP.mashupplayer({
+            id: "{{ldt_id}}"
+        });
+        social({
+            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
+        });
+    });
+</script>
+{% endblock %}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/mashup_home.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,146 @@
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+{% load front_tags %}
+<!DOCTYPE html>
+<html>
+<head>
+{% block 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, Thibaut Cavalié" />
+    <title>Hashcut {{branding}} &raquo; {% block title %}Accueil{% endblock %}</title>
+    {% block css_declaration %}
+    {% endblock %}
+    
+    {% block css_import %}
+    <link rel="stylesheet" href="{% static 'hashcut/lib/jquery-ui.css' %}" />
+    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/reset.css" />
+    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/common.css" />
+    {% endblock %}
+    {% block css_page %}
+    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/home.css" />
+    {% endblock %}
+    
+    {% block js_declaration %}
+    {% endblock %}
+{% endblock %}
+</head>
+<body>
+{% block body %}
+{% include top_header_partial %}
+
+{% block wrap_header %}
+<div class="wrap-header">
+    <div class="header">
+        {% include 'partial/mashup_popin_user.html' %}
+        {% include 'partial/hashcut_logo.html' %}
+        <div class="title-header">
+            <h2><a href="{% url mashup_edit branding=branding %}">Créer un hashcut !</a></h2>
+        </div>
+        <div class="profil-wrap">
+            <ul class="space-top-2">
+                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+            </ul>
+        </div>
+    </div><!-- header -->
+</div><!-- wrap-header -->
+{% endblock %}
+
+{% block wrapper %}
+<div class="wrapper">
+    <div class="wrap">
+        {% block content %}
+        <div class="content">
+            <div class="left-content">
+                <h2>Hashcuts à la Une</h2>
+                <div class="hashcut-video-wrap news">
+                    <div class="video-item">
+                        {% if m1 %}
+                        <a href="{% url mashup_hashcut branding=branding ldt_id=m1.project.ldt_id %}" class="screenshot">{% thumbnail m1.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><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m1.project.ldt_id %}">{{ m1.project.title }}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m1.creator %}">{{ m1.creator }}</a> | <span class="duration">02:24</span> </h3>
+                        {% endif %}
+                    </div>
+                    <div class="video-item">
+                        {% if m2 %}
+                        <a href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}" class="screenshot">{% thumbnail m2.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><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}">{{ m2.project.title }}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m2.creator %}">{{ m2.creator }}</a> | <span class="duration">02:24</span> </h3>
+                        {% endif %}
+                    </div>
+                </div>
+
+                <h2>Derniers Hashcuts</h2>
+                <div class="hashcut-video-wrap last">
+                    {% 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 "142x95" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt=""/>{% empty %}&nbsp;{% endthumbnail %}</a>
+                        <h3><a class="title" href="{% url mashup_hashcut branding=branding ldt_id=m2.project.ldt_id %}">{% if m.project.title|length > 30 %}{{m.project.title|slice:":30"}}...{% else %}{{m.project.title}}{% endif %}</a> par <a class="author" href="{% url mashup_profile branding=branding username=m.creator %}">{{ m.creator }}</a> | <span class="duration">02:24</span> </h3>
+                    </div>
+                    {% endfor %}
+                </div>
+                
+                <div class="pagination">
+                    <a href="{% url mashup_all branding=branding %}">Tous les Hashcuts</a>
+                </div>
+           
+            </div><!-- left-content -->
+            <div class="right-content">
+                <div class="definition">
+                    <h2>Hashcuts ?</h2>
+                    <p>Un <strong>Hashcut</strong> est à la fois une <a href="http://fr.wikipedia.org/wiki/Hypervid%C3%A9o" target="_blank">Hypervidéo</a> (vidéo cliquable) et un <a href="http://fr.wikipedia.org/wiki/Mashup_%28video%29" target="_blank">Mashup</a> (mélange de médias, de l’anglais mash, «purée»).</p>
+                    <p>Un <strong>Hashcut</strong> est un assemblage de citations de vidéos, mises bout à bout, sans altération des médias d’origine, et permet à chacun de proposer un nouveau regard, une porte d’entrée éditorialisée sur ces médias.</p>
+                </div>
+                <div class="how-to">
+                    <h2>Comment faire ?</h2>
+                    <ul>
+                        <li class="inscription">
+                            <h3><a href="#user">1. S’inscrire</a></h3>
+                            <p>Commencez par créer votre espace personnel sur cette plateforme !</p>
+                        </li>
+                        <li class="next-step"></li>
+                        <li class="creation">
+                            <h3><a href="{% url mashup_edit branding=branding %}">2. Créer un hashcut</a></h3>
+                            <p>Choisissez des médias, segmentez les, assemblez les segments et rajoutez des commentaires sur le Hashcut.</p>
+                        </li>
+                        <li class="next-step"></li>
+                        <li class="publier">
+                            <h3><a href="#">3. Publier et partager</a></h3>
+                            <p>Une fois le hashcut terminé, publiez-le sur cette plateforme etpartagez votre création sur les réseaux sociaux</p>
+                        </li>
+                    </ul>
+                </div>
+                
+            </div><!-- left-content -->
+        </div><!-- content -->
+        {% endblock %}
+        {% block footer %}
+        <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/" target="_blank"> <img src="{% static 'hashcut' %}/{{branding}}/img/logo-iri.png" alt="iri" /></a></li>
+                <li><a title="cinecast" href="http://cinecast.fr/" target="_blank"><img src="{% static 'hashcut' %}/{{branding}}/img/logo-cinecast.png" alt="cinecast" /></a></li>
+                <li>© 2012</li>
+            </ul>
+        </div><!-- footer -->
+        {% endblock %}
+    </div><!-- wrap -->
+</div><!-- wrapper -->
+{% endblock %}
+<!-- JavaScript -->
+{% block js_import %}
+<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 %}
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/mashup_profile.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,67 @@
+{% extends "mashup_home.html" %}
+{% load static %}
+{% load i18n %}
+{% load analytics %}
+{% load thumbnail %}
+    {% block title %}Profil de '{{username}}'{% endblock %}
+    {% block css_page %}
+    <link rel="stylesheet" href="{% static 'hashcut' %}/{{branding}}/css/profil.css" />
+    {% endblock %}
+
+{% block wrap_header %}
+<div class="wrap-header"> 
+    <div class="header">
+    {% include 'partial/mashup_popin_user.html' %}
+    {% include 'partial/hashcut_logo.html' %}
+        <div class="title-video-wrap">
+            <p class="title-video" href="#">
+                <span class="category">Profil</span>
+                <span class="separator">&raquo;</span>
+                {{username}}
+            </p>
+        </div>
+    {% include 'partial/hashcut_social.html' %}
+        <div class="profil-wrap">
+            <ul>
+                <li><a href="{% url mashup_home branding=branding %}" class="all-hashcut">Accueil</a></li>
+                <li><a href="{% url mashup_edit branding=branding %}" class="new-hashcut">Créer un Hashcut</a></li>
+                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
+            </ul>
+        </div>
+    </div><!-- header -->
+</div> <!-- wrap-header -->
+{% endblock %}
+
+{% block content %}
+<div class="content">
+
+    <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><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>
+    <!--div class="pagination">
+            <a href="#" class="active">1</a>
+            <a href="#">2</a>
+            <a href="#">3</a>
+            <a href="#">4</a>
+            <a href="#">5</a>
+            <a href="#">6</a>
+            <a href="#">Suivant</a>
+    </div-->
+</div><!-- content -->
+{% endblock %}
+{% block js_import %}
+{{block.super}}
+<script type="text/javascript">
+    $(function() {
+        social({
+            swf: "{% static 'hashcut/lib/ZeroClipboard.swf' %}"
+        });
+    });
+</script>
+{% endblock %}
+
--- a/src/hashcut/templates/partial/bpi_hashcut_logo.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,5 +0,0 @@
-{% load static %}
-        <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="{% url mashup_home branding=branding %}">
-            <img src="{% static 'hashcut/bpi/img/hashcut-logo.png' %}" alt="Hashcut" />
-            <span>Le Mashup<br />Cliquable</span>
-        </a></h1>
\ No newline at end of file
--- a/src/hashcut/templates/partial/bpi_mashup_popin_user.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,72 +0,0 @@
-    <!-- popin user -->
-    
-        <div class="popin user info" id="user">
-            <div class="pointer"></div>
-            <div class="popin-content">
-              {% if user.is_authenticated %}
-                <h2>{{user.username}}</h2>
-                <h3>{{email_creator}}</h3>
-                <a href="{% url mashup_profile branding=branding username=user.username %}" class="nb-hashcut">{{nb_mashup_creator}} Hashcuts</a>
-              {% else %}<h2>Vous n'êtes pas identifié. Veuillez vous logguer.</h2>{% endif %}
-                <p>
-                    <a href="#" class="change-account button">{% if user.is_authenticated %}Changer de compte{% else %}Se connecter{% endif %}</a>
-                </p>
-            </div>
-        </div><!-- popin user info-->
-
-        <div class="popin user signup" id="user">
-            <div class="pointer"></div>
-            <div class="popin-content">
-                <h2>Créer un compte :</h2>
-                <form method="post" action="{% url mashup_create_user branding=branding %}" class="signup-form">
-                    {% csrf_token %}
-                    <p>
-                        <label for="signup-pseudo">Pseudonyme : </label>
-                        <input type="text" id="signup-pseudo" name="signup-pseudo" />
-                    </p>
-                    <p >
-                        <label for="signup-email">Email : </label>
-                        <input type="text" id="signup-email" name="signup-email" />
-                    </p>
-                    <p >
-                        <label for="signup-password">Mot de passe : </label>
-                        <input type="password" id="signup-password" name="signup-password" />
-                    </p>
-                    <p>
-                        <label for="signup-password">Confirmer le mot de passe : </label>
-                        <input type="password" id="signup-confirm-password" name="signup-confirm-password" />
-                    </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">
-            <div class="pointer"></div>
-            <div class="popin-content">
-                <h2>Connexion :</h2>
-                <form method="post" action="{% url mashup_identicate_user branding=branding %}" class="login-form">
-                    {% csrf_token %}
-                    <p>
-                        <label for="signup-pseudo">Pseudonyme : </label>
-                        <input type="text" id="signup-pseudo" name="signup-pseudo" />
-                    </p>
-                    <p >
-                        <label for="signup-password">Mot de passe : </label>
-                        <input type="password" id="signup-password" name="signup-password" />
-                    </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 -->
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/partial/bpi_top_header.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,6 @@
+{% load static %}
+<div class="wrap-header-top">
+    <div class="wrap-header-top-content">
+        <a title="Bibliothèque Publique d'Information" href="{% url mashup_home branding=branding %}"><img src="{% static 'hashcut/bpi/img/pompidou-logo.png' %}" alt="Bibliothèque centre Pompidou" /></a>
+    </div>
+</div><!-- wrap-header-top -->
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/partial/hashcut_logo.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,5 @@
+{% load static %}
+        <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="{% url mashup_home branding=branding %}">
+            <img src="{% static 'hashcut' %}/{{branding}}/img/hashcut-logo.png" alt="Hashcut" />
+            <span>Le Mashup<br />Cliquable</span>
+        </a></h1>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/partial/hashcut_social.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,13 @@
+        <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>
\ No newline at end of file
--- a/src/hashcut/templates/partial/iri_hashcut_logo.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,5 +0,0 @@
-{% load static %}
-        <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="{% url mashup_home branding=branding %}">
-            <img src="{% static 'hashcut/iri/img/hashcut-logo.png' %}" alt="Hashcut" />
-            <span>Le Mashup<br />Cliquable</span>
-        </a></h1>
\ No newline at end of file
--- a/src/hashcut/templates/partial/iri_mashup_popin_user.html	Sat Dec 01 23:48:11 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,72 +0,0 @@
-    <!-- popin user -->
-    
-        <div class="popin user info" id="user">
-            <div class="pointer"></div>
-            <div class="popin-content">
-              {% if user.is_authenticated %}
-                <h2>{{user.username}}</h2>
-                <h3>{{email_creator}}</h3>
-                <a href="{% url mashup_profile branding=branding username=user.username %}" class="nb-hashcut">{{nb_mashup_creator}} Hashcuts</a>
-              {% else %}<h2>Vous n'êtes pas identifié. Veuillez vous logguer.</h2>{% endif %}
-                <p>
-                    <a href="#" class="change-account button">{% if user.is_authenticated %}Changer de compte{% else %}Se connecter{% endif %}</a>
-                </p>
-            </div>
-        </div><!-- popin user info-->
-
-        <div class="popin user signup" id="user">
-            <div class="pointer"></div>
-            <div class="popin-content">
-                <h2>Créer un compte :</h2>
-                <form method="post" action="{% url mashup_create_user branding=branding %}" class="signup-form">
-                    {% csrf_token %}
-                    <p>
-                        <label for="signup-pseudo">Pseudonyme : </label>
-                        <input type="text" id="signup-pseudo" name="signup-pseudo" />
-                    </p>
-                    <p >
-                        <label for="signup-email">Email : </label>
-                        <input type="text" id="signup-email" name="signup-email" />
-                    </p>
-                    <p >
-                        <label for="signup-password">Mot de passe : </label>
-                        <input type="password" id="signup-password" name="signup-password" />
-                    </p>
-                    <p>
-                        <label for="signup-password">Confirmer le mot de passe : </label>
-                        <input type="password" id="signup-confirm-password" name="signup-confirm-password" />
-                    </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">
-            <div class="pointer"></div>
-            <div class="popin-content">
-                <h2>Connexion :</h2>
-                <form method="post" action="{% url mashup_identicate_user branding=branding %}" class="login-form">
-                    {% csrf_token %}
-                    <p>
-                        <label for="signup-pseudo">Pseudonyme : </label>
-                        <input type="text" id="signup-pseudo" name="signup-pseudo" />
-                    </p>
-                    <p >
-                        <label for="signup-password">Mot de passe : </label>
-                        <input type="password" id="signup-password" name="signup-password" />
-                    </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 -->
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hashcut/templates/partial/mashup_popin_user.html	Mon Dec 03 13:06:28 2012 +0100
@@ -0,0 +1,64 @@
+    <!-- popin user -->
+    
+        <div class="popin user" id="user">
+            <div class="pointer"></div>
+            <div class="popin-content">
+            {% if user.is_authenticated %}
+                <div class="user-screen info">
+                    <h2>{{user.username}}</h2>
+                    <h3>{{user.email}}</h3>
+                    <a href="{% url mashup_profile branding=branding username=user.username %}" class="nb-hashcut">{{nb_mashup_creator}} Hashcuts</a>
+                    <p>
+                        <a href="#" class="change-account button">Changer de compte</a>
+                    </p>
+                </div>
+            {% endif %}
+                <div class="user-screen signup hide">
+                    <h2>Créer un compte :</h2>
+                    <form action="{% url mashup_create_user branding=branding %}" class="signup-form" method="post">
+                    {% csrf_token %}
+                        <p>
+                            <label for="signup-pseudo">Pseudonyme : </label>
+                            <input type="text" id="signup-pseudo" name="signup-pseudo" />
+                        </p>
+                        <p >
+                            <label for="signup-email">Email : </label>
+                            <input type="text" id="signup-email" name="signup-email" />
+                        </p>
+                        <p >
+                            <label for="signup-password">Mot de passe : </label>
+                            <input type="password" id="signup-password" name="signup-password" />
+                        </p>
+                        <p>
+                            <label for="signup-password">Confirmer le mot de passe : </label>
+                            <input type="password" id="signup-confirm-password" name="signup-confirm-password" />
+                        </p>
+                        <p>
+                            <input class="button" type="submit" value="Créer le compte">
+                        </p>
+                    </form>
+                </div>
+                <div class="user-screen login{% if user.is_authenticated %} hide{% endif %}">
+                    <h2>Connexion :</h2>
+                    <form action="{% url mashup_identicate_user branding=branding %}" class="login-form" method="post">
+                    {% csrf_token %}
+                        <p>
+                            <label for="signup-pseudo">Pseudonyme : </label>
+                            <input type="text" id="signup-pseudo" name="signup-pseudo" />
+                        </p>
+                        <p >
+                            <label for="signup-email">Mot de passe : </label>
+                            <input type="password" id="signup-password" name="signup-password" />
+                        </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>
+        </div><!-- popin user login-->
+        
+    <!-- /popin user -->
--- a/src/hashcut/views.py	Sat Dec 01 23:48:11 2012 +0100
+++ b/src/hashcut/views.py	Mon Dec 03 13:06:28 2012 +0100
@@ -19,6 +19,7 @@
         context = {}
         context["branding"] = self.branding
         context["nb_mashup_creator"] = "0"
+        context["top_header_partial"] = "partial/%s_top_header.html"%self.branding
         if request and request.user and isinstance(request.user, User):
             if not self.branding or self.branding=="":
                 self.branding = "iri"
@@ -26,31 +27,11 @@
             context["nb_mashup_creator"] = Mashup.objects.filter(branding=brd,project__owner=request.user).count()
         return context
             
-            
 
 class MashupHome(TemplateResponseMixin, MashupContextView):
     
-    # iri = default brand name
-    branding = "iri"
-    template_suffix = "mashup_home.html"
-    template_name = "iri_mashup_home.html"
-    
     def get_template_names(self):
-        """
-        Return a list of template names to be used for the request. Must return
-        a list. May not be called if get_template is overridden.
-        """
-        try:
-            names = super(MashupHome, self).get_template_names()
-        except ImproperlyConfigured:
-            raise ImproperlyConfigured("Class MashupHome requires either a definition of 'template_name'")
-
-        # the branding template is supposed to override the default template. So we insert instead of append
-        if self.branding and self.branding != "":
-            names.insert(0,"%s_%s" % (self.branding, self.template_suffix))
-        
-        return names
-    
+        return "mashup_home.html"
     
     def get(self, request, branding="iri", **kwargs):
         self.branding = branding
@@ -75,26 +56,8 @@
 
 class MashupEdit(TemplateResponseMixin, MashupContextView):
     
-    # iri = default brand name
-    branding = "iri"
-    template_suffix = "mashup_edit.html"
-    template_name = "iri_mashup_edit.html"
-    
     def get_template_names(self):
-        """
-        Return a list of template names to be used for the request. Must return
-        a list. May not be called if get_template is overridden.
-        """
-        try:
-            names = super(MashupEdit, self).get_template_names()
-        except ImproperlyConfigured:
-            raise ImproperlyConfigured("Class MashupEdit requires either a definition of 'template_name'")
-
-        # the branding template is supposed to override the default template. So we insert instead of append
-        if self.branding and self.branding != "":
-            names.insert(0,"%s_%s" % (self.branding, self.template_suffix))
-        
-        return names
+        return "mashup_edit.html"
     
     def get(self, request, branding="iri", **kwargs):
         self.branding = branding
@@ -127,26 +90,8 @@
 
 class MashupHashcut(TemplateResponseMixin, MashupContextView):
     
-    # iri = default brand name
-    branding = "iri"
-    template_suffix = "mashup_hashcut.html"
-    template_name = "iri_mashup_hashcut.html"
-    
     def get_template_names(self):
-        """
-        Return a list of template names to be used for the request. Must return
-        a list. May not be called if get_template is overridden.
-        """
-        try:
-            names = super(MashupHashcut, self).get_template_names()
-        except ImproperlyConfigured:
-            raise ImproperlyConfigured("Class MashupHashcut requires either a definition of 'template_name'")
-
-        # the branding template is supposed to override the default template. So we insert instead of append
-        if self.branding and self.branding != "":
-            names.insert(0,"%s_%s" % (self.branding, self.template_suffix))
-        
-        return names
+        return "mashup_hashcut.html"
     
     def get(self, request, branding="iri", ldt_id=None, **kwargs):
         self.branding = branding
@@ -164,33 +109,15 @@
 
 class MashupContent(TemplateResponseMixin, MashupContextView):
     
-    # iri = default brand name
-    branding = "iri"
-    template_suffix = "mashup_content.html"
-    template_name = "iri_mashup_content.html"
-    
     def get_template_names(self):
-        """
-        Return a list of template names to be used for the request. Must return
-        a list. May not be called if get_template is overridden.
-        """
-        try:
-            names = super(MashupContent, self).get_template_names()
-        except ImproperlyConfigured:
-            raise ImproperlyConfigured("Class MashupContent requires either a definition of 'template_name'")
-
-        # the branding template is supposed to override the default template. So we insert instead of append
-        if self.branding and self.branding != "":
-            names.insert(0,"%s_%s" % (self.branding, self.template_suffix))
-        
-        return names
+        return "mashup_content.html"
     
     def get(self, request, branding="iri", ctt_id=None, **kwargs):
         self.branding = branding
         if not ctt_id:
             return HttpResponseNotFound("A content id must be given.")
         try:
-            content = Content.objects.get(iri_id=ctt_id)
+            content = Content.objects.get(id=ctt_id)
         except Content.DoesNotExist:
             raise ObjectDoesNotExist("MashupContent : content not found. ctt_id = " + ctt_id)
         context = self.get_context_dict(request)
@@ -201,26 +128,8 @@
 
 class MashupProfile(TemplateResponseMixin, MashupContextView):
     
-    # iri = default brand name
-    branding = "iri"
-    template_suffix = "mashup_profile.html"
-    template_name = "iri_mashup_profile.html"
-    
     def get_template_names(self):
-        """
-        Return a list of template names to be used for the request. Must return
-        a list. May not be called if get_template is overridden.
-        """
-        try:
-            names = super(MashupProfile, self).get_template_names()
-        except ImproperlyConfigured:
-            raise ImproperlyConfigured("Class MashupContent requires either a definition of 'template_name'")
-
-        # the branding template is supposed to override the default template. So we insert instead of append
-        if self.branding and self.branding != "":
-            names.insert(0,"%s_%s" % (self.branding, self.template_suffix))
-        
-        return names
+        return "mashup_profile.html"
     
     def get(self, request, branding="iri", username=None, **kwargs):
         self.branding = branding
@@ -241,26 +150,8 @@
 
 class MashupAllMashups(TemplateResponseMixin, MashupContextView):
     
-    # iri = default brand name
-    branding = "iri"
-    template_suffix = "mashup_all_mashups.html"
-    template_name = "iri_mashup_all_mashups.html"
-    
     def get_template_names(self):
-        """
-        Return a list of template names to be used for the request. Must return
-        a list. May not be called if get_template is overridden.
-        """
-        try:
-            names = super(MashupAllMashups, self).get_template_names()
-        except ImproperlyConfigured:
-            raise ImproperlyConfigured("Class MashupAllMashups requires either a definition of 'template_name'")
-
-        # the branding template is supposed to override the default template. So we insert instead of append
-        if self.branding and self.branding != "":
-            names.insert(0,"%s_%s" % (self.branding, self.template_suffix))
-        
-        return names
+        return "mashup_all_mashups.html"
     
     def get(self, request, branding="iri", **kwargs):
         page = request.GET.get("page") or 1