diff -r 2754a76e2787 -r 56937307d7f4 integration/edition.html
--- a/integration/edition.html	Wed Oct 24 17:50:32 2012 +0200
+++ b/integration/edition.html	Thu Oct 25 13:31:02 2012 +0200
@@ -44,7 +44,10 @@
                         <h2>Mashup75</h2>
                         <h3>mash@cinecast.fr</h3>
                         <a href="#" class="nb-hashcut">12 Hashcuts</a>
-                        <a href="#" class="change-account">Changer de compte</a>
+                        <p>
+                            <a href="#" class="change-account button">Changer de compte</a>
+                        </p>
+                        
                     </div>
                 </div><!-- popin user info-->
 
@@ -91,10 +94,10 @@
                                 <input type="password" id="signup-email" name="" />
                             </p>
                             <p>
-                                <input type="submit" value="Se connecter">
+                                <input class="button" type="submit" value="Se connecter">
                             </p>
                             <p>
-                                <a class="signup-button" href="#">Créer un compte</a>
+                                <a class="button signup-button" href="#">Créer un compte</a>
                             </p>
                         </form>
    
@@ -128,21 +131,31 @@
                     </ul>
                 </div><!-- col-left -->
 
-                <div class="col-middle">
+                <div class="col-middle empty-mode">
+                    
+                    <div class="col-middle-header">
+                        <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title">La cuisine du Popcorn</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>
+                        <a class="publier-button" title="Publier" href="#"></a>
+                    </div>
 
                     <div class="bloc-segmentation">
-                        <div class="col-middle-header disable">
-                            <a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a>
-                            <a href="#" class="previsualiser disable">Prévisualiser</a>
-                        </div>
-                        <div class="video">
-                            <a class="publier-button" title="Publier" href="#"></a>
-                            <img src="img/visuel-player.jpg" alt="" />
-                        </div>
                         <div class="segment">
                             <img src="img/visuel-segment.png" alt="">
                         </div>
-                        <div class="popin segmentation" id="">
+                        <div class="segmentation" id="">
                             <img class="pointer" src="img/popin-triangle.png" alt="" />
                             <div class="popin-content">
                                 <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2>
@@ -162,10 +175,8 @@
                                             <label for="description">Description :</label>
                                             <textarea id="description"></textarea>
                                         </p>
-                                        <p>
-                                            <input type="submit" value="Ajouter au Hashcut" />
-                                        </p>
                                     </div>
+                                    <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
 
                                 </form>
                             </div>
@@ -180,10 +191,10 @@
                                         <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" />
                                         <div class="popin-content clearfix">
                                             <div class="instant-description">
-                                                <h2>Le moment crucial où le maïs explose</h2>
+                                                <h3>Le moment crucial où le maïs explose</h3>
                                                 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p>
                                             </div>
-                                            <a href="#" class="reprendre-segment">Reprendre le segment</a>
+                                            <a href="#" class="button reprendre-segment">Reprendre le segment</a>
                                         </div>
                                     </div><!-- popin segment-section -->
                                 </div>
@@ -201,14 +212,6 @@
                     </div><!-- bloc-segmentation -->
 
                     <div class="bloc-pvw">
-                        <div class="col-middle-header">
-                            <a href="#" class="segmenter">Segmenter <em>La cuisine du Popcorn</em></a>
-                            <a href="#" class="previsualiser">Prévisualiser</a>
-                        </div>
-                        <div class="video">
-                            <a class="publier-button" title="Publier" href="#"></a>
-                            <img src="img/visuel-player.jpg" alt="" />
-                        </div>
 
                         <div class="frise clearfix">
 
@@ -259,26 +262,6 @@
                         </div><!-- frise -->
                     </div><!-- bloc-pvw -->
 
-
-                    <div class="bloc-vide">
-                        <div class="col-middle-header disable">
-                            <a href="#" class="segmenter disable">Segmenter</a>
-                            <a href="#" class="previsualiser disable">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>
-                            <a class="publier-button" title="Publier" href="#"></a>
-                        </div>
-                    </div><!-- bloc-vide -->
-
                 </div><!-- col-middle -->
 
                 <div class="col-right">
@@ -300,53 +283,48 @@
 
                     <ul class="list-video" id="sortable">
                         <li class="item-video">
-                            <a class="clearfix" href="#">
-                                <img src="img/apercu-video.jpg" alt="aperçu" />
-                                <span class="video-info">
-                                    <span class="title-video">Le a Lune 1</span>
-                                    <span class="subtitle">Chargement de la Capsule</span>
-                                    <span class="duration">01:17 - 02:01 (00:44)</span>
-                                </span>
-                            </a>
-                            <ul class="tools">
-                                <li><a class="edit" href="#"></a></li>
-                                <li><a class="bottom" href="#"></a></li>
-                                <li><a class="top" href="#"></a></li>
-                                <li><a class="delete" href="#"></a></li>
-                            </ul>
+                            <img src="img/apercu-video.jpg" alt="aperçu" />
+                            <span class="video-info">
+                                <span class="title-video">Voyage à la Lune 1</span>
+                                <span class="subtitle">Chargement de la Capsule</span>
+                                <span class="duration">01:17 - 02:01 (00:44)</span>
+                                <ul class="tools">
+                                    <li><a class="edit" href="#"></a></li>
+                                    <li><a class="bottom" href="#"></a></li>
+                                    <li><a class="top" href="#"></a></li>
+                                    <li><a class="delete" href="#"></a></li>
+                                </ul>
+                            </span>
                         </li><!-- item-video -->
                         <li class="item-video">
-                            <a class="clearfix" href="#">
-                                <img src="img/apercu-video.jpg" alt="aperçu" />
-                                <span class="video-info">
-                                    <span class="title-video">Le a Lune 2</span>
-                                    <span class="subtitle">Chargement de la Capsule</span>
-                                    <span class="duration">01:17 - 02:01 (00:44)</span>
-                                </span>
-                            </a>
-                            <ul class="tools">
-                                <li><a class="edit" href="#"></a></li>
-                                <li><a class="bottom" href="#"></a></li>
-                                <li><a class="top" href="#"></a></li>
-                                <li><a class="delete" href="#"></a></li>
-                            </ul>
+                            <img src="img/apercu-video.jpg" alt="aperçu" />
+                            <span class="video-info">
+                                <span class="title-video">Voyage à la Lune 2</span>
+                                <span class="subtitle">Chargement de la Capsule</span>
+                                <span class="duration">01:17 - 02:01 (00:44)</span>
+                                <ul class="tools">
+                                    <li><a class="edit" href="#"></a></li>
+                                    <li><a class="bottom" href="#"></a></li>
+                                    <li><a class="top" href="#"></a></li>
+                                    <li><a class="delete" href="#"></a></li>
+                                </ul>
+                            </span>
                         </li><!-- item-video -->
                         <li class="item-video">
-                            <a class="clearfix" href="#">
-                                <img src="img/apercu-video.jpg" alt="aperçu" />
-                                <span class="video-info">
-                                    <span class="title-video">Le a Lune 3</span>
-                                    <span class="subtitle">Chargement de la Capsule</span>
-                                    <span class="duration">01:17 - 02:01 (00:44)</span>
-                                </span>
-                            </a>
-                            <ul class="tools">
-                                <li><a class="edit" href="#"></a></li>
-                                <li><a class="bottom" href="#"></a></li>
-                                <li><a class="top" href="#"></a></li>
-                                <li><a class="delete" href="#"></a></li>
-                            </ul>
+                            <img src="img/apercu-video.jpg" alt="aperçu" />
+                            <span class="video-info">
+                                <span class="title-video">Voyage à la Lune 3</span>
+                                <span class="subtitle">Chargement de la Capsule</span>
+                                <span class="duration">01:17 - 02:01 (00:44)</span>
+                                <ul class="tools">
+                                    <li><a class="edit" href="#"></a></li>
+                                    <li><a class="bottom" href="#"></a></li>
+                                    <li><a class="top" href="#"></a></li>
+                                    <li><a class="delete" href="#"></a></li>
+                                </ul>
+                            </span>
                         </li><!-- item-video -->
+                        
                     </ul>
                 </div><!-- col-right -->
 
@@ -375,5 +353,6 @@
         <script type="text/javascript" src="js/medialist-serializer.js"></script>
         <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>
     </body>
 </html>