diff -r 7c394ea40f28 -r b2d068afdbd8 integration/edition.html
--- a/integration/edition.html	Mon Oct 29 18:11:09 2012 +0100
+++ b/integration/edition.html	Tue Oct 30 18:44:45 2012 +0100
@@ -26,11 +26,11 @@
                             <div class="form-left">
                                 <p class="titre-wrap">
                                     <label for="hashcut-title">Titre :</label>
-                                    <input type="text" id="hashcut-title" name="" value="Mon Hashcut" />
+                                    <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
                                 </p>
                                 <p>
                                     <label for="hashcut-tags">Tags :</label>
-                                    <input type="text" id="hashcut-tags" name="" value="Lune, Espace, Lune" />
+                                    <input type="text" id="hashcut-tags" name="" value="" />
                                 </p>
                             </div>
                             <p class="form-right">
@@ -112,7 +112,7 @@
                 </a></h1>
                 <div class="title-video-wrap">
                     <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
-                    <p class="time-length">Durée: <span>00:00</span></p>
+                    <p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>
                 </div>
                 <div class="profil-wrap">
                     <a href="#" class="all-hashcut">Tous les Hashcuts</a>
@@ -257,21 +257,11 @@
                     <div class="bloc-pvw">
 
                         <div class="frise clearfix">
-
-                            <div class="indications">
-                                <span class="indication" style="left:24%;">00:30</span>
-                                <span class="indication" style="left:44%;">00:30</span>
-                                <span class="indication" style="left:64%;">00:30</span>
-                                <span class="indication" style="left:84%;">00:30</span>
+                            <div class="frise-indications">
                             </div>
-
-                            <div class="segments">
-                                <div class="segment" style="background-color:red;left:0;width:20%;"></div>
-                                <div class="segment" style="background-color:green;left:20%;width:20%;"></div>
-                                <div class="segment" style="background-color:red;left:40%;width:20%;"></div>
-                                <div class="segment" style="background-color:green;left:60%;width:20%;"></div>
-                                <div class="segment" style="background-color:red;left:80%;width:20%;"></div>
+                            <div class="frise-segments">
                             </div>
+                            <div class="frise-position"></div>
                             
                         </div>
                             
@@ -279,26 +269,23 @@
                                 <img class="pointer" src="img/popin-triangle.png" alt="" />
                                 <div class="popin-content">
                                     <ul class="tools">
-                                        <li><a title="éditer" class="edit" href="#"></a></li>
-                                        <li><a title="descendre" class="bottom" href="#"></a></li>
-                                        <li><a title="remonter" class="top" href="#"></a></li>
-                                        <li><a title="supprimer" class="delete" href="#"></a></li>
+                                        <li><a title="Éditer" class="edit" href="#"></a></li>
                                     </ul>
 
-                                    <h2>Chargement de la capsule lunaire</h2>
+                                    <h2><span class="annotation-title"></span></h2>
                                     <table>
                                         <tbody>
                                             <tr>
                                                 <th>Extrait de :</th>
-                                                <td>Le Voyage dans la Lune (05:01 - 05:24)</td>
+                                                <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>
                                             </tr>
                                             <tr>
                                                 <th>Description :</th>
-                                                <td>Lors d'un colloque d'astronomie, le professeur Barbenfouillis crée l'événement en faisant part à l'assemblée de son projet de voyage dans la Lune. Il organise ensuite la visite à ses confrères de l'atelier où l'obus spatial est en chantier. Il sera propulsé en direction de la Lune au moyen d'un canon géant.</td>
+                                                <td><span class="annotation-description"></span></td>
                                             </tr>
                                             <tr>
                                                 <th>Tags :</th>
-                                                <td>astronomie, lune, fiction, histoire du cinéma, canon, projectile</td>
+                                                <td><span class="annotation-tags">(fonctionnalité à venir)</span></td>
                                             </tr>
                                         </tbody>
                                     </table>
@@ -313,16 +300,9 @@
                         <h2>Liste des segments</h2>
                         <div class="frise clearfix">
 							<p class="aucun-segment">Aucun segment</p>
-                            <div class="indications">
-                                <span class="indication" style="left:64%;">00:30</span>
-                                <span class="indication" style="left:84%;">00:30</span>
+                            <div class="frise-indications">
                             </div>
-                            <div class="segments">
-                                <div class="segment" style="background-color:red;left:0;width:20%;"></div>
-                                <div class="segment" style="background-color:yellow;left:20%;width:20%;"></div>
-                                <div class="segment" style="background-color:blue;left:40%;width:20%;"></div>
-                                <div class="segment" style="background-color:green;left:60%;width:20%;"></div>
-                                <div class="segment" style="background-color:brown;left:80%;width:20%;"></div>
+                            <div class="frise-segments">
                             </div>
 
                         </div>
@@ -350,7 +330,6 @@
         <!-- JavaScript -->
         <script type="text/javascript" src="lib/jquery.min.js"></script>
         <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
-        <script type="text/javascript" src="lib/mustache.js"></script>
         <script type="text/javascript" src="lib/underscore-min.js"></script>
         <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
         <script type="text/javascript" src="lib/raphael-min.js"></script>
@@ -359,5 +338,10 @@
         <script type="text/javascript" src="js/model.js"></script>
         <script type="text/javascript" src="js/editor.js"></script>
         <script type="text/javascript" src="js/common.js"></script>
+        <script type="text/javascript">
+    $(function() {
+        var hashcut = new IriSP.Hashcut({url: "data/moon.json"});
+    });
+        </script>
     </body>
 </html>