# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1351527775 -3600
# Node ID 1fbf7d835dc2bbe1caed72774d4aaa247d944090
# Parent  c9dc489913afd891c6f7f4bcf522ea856075eace
- update segment and bg video list
- profil/home page

diff -r c9dc489913af -r 1fbf7d835dc2 integration/css/common.css
--- a/integration/css/common.css	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/css/common.css	Mon Oct 29 17:22:55 2012 +0100
@@ -81,6 +81,11 @@
 	margin-bottom: 1px;
 }
 /* header */
+.title-header{
+	width: 460px;
+	float: left;
+	height: 60px;
+}
 .header{
 	position: relative;
 	background-color: #e2dbfd;
@@ -204,7 +209,8 @@
 .button:hover{
 	background-color: #FF00FC
 }
-.user.login h2, .user.signup h2 {
+.user.login h2, 
+.user.signup h2 {
 	color: #de2500;
 	font-size: 14px;
 	font-weight: 600;
@@ -297,4 +303,52 @@
 }
 .footer .links-right li img {
     vertical-align: middle;
+}
+/* video-item */
+.hashcut-video-wrap{
+	padding-left: 10px;
+	overflow: hidden;
+	margin-bottom: 16px;
+}
+.video-item{
+	width: 300px;
+	float: left;
+	margin-right: 20px;
+}
+
+.video-item h3{
+	font-size: 12px;
+}
+.video-item h3 strong{
+	font-weight: 600;
+}
+.video-item h3 span{
+	color: #de2500;
+}
+.video-item .screenshot{
+	display: inline-block;
+	margin-bottom: 8px;
+}
+.video-item h3 a{
+	border-bottom: 1px solid #bababa;
+	display: inline-block;
+    line-height: 12px;
+}
+.video-item h3 a:hover{
+	border-bottom: none;
+}
+.pagination{
+	text-align: center;
+}
+.pagination a{
+	font-size: 14px;
+	color: #7628df;
+	text-decoration: underline;
+}
+.pagination a:hover{
+	text-decoration: none;
+}
+.pagination a.active{
+	color: #de2500;
+	text-decoration: none;
 }
\ No newline at end of file
diff -r c9dc489913af -r 1fbf7d835dc2 integration/css/edition.css
--- a/integration/css/edition.css	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/css/edition.css	Mon Oct 29 17:22:55 2012 +0100
@@ -126,6 +126,7 @@
 	width: 458px;
 	position: relative;
 	height: 22px;
+	overflow: hidden;
 }
 .frise .segment{
 	height: 22px;
@@ -139,10 +140,29 @@
 	position: relative;
 	border: 1px solid #333333;
 }
+.segments,.indications{
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.indications{
+	z-index: 2;
+}
+.aucun-segment{
+	font-weight: 600;
+	font-style: italic;
+	text-align: center;
+	line-height: 20px;
+	width: 100%;
+	z-index:0;
+}
 .frise .segment{
-	float: left;
-	margin-left: -1px;
-	border-right: 1px solid #333;
+	position: absolute;
+	background-image: url(../img/border-right-segment.png);
+	background-repeat: repeat-y;
+	background-position: right top;
 	-moz-box-shadow: inset 0px 2px 2px 0px #333;
   	-webkit-box-shadow: inset 0px 2px 2px 0px #333;
   	box-shadow: inset 0px 2px 2px 0px #333;
@@ -151,15 +171,15 @@
 	-moz-box-shadow: inset 2px 2px 2px 0px #333;
   	-webkit-box-shadow: inset 2px 2px 2px 0px #333;
   	box-shadow: inset 2px 2px 2px 0px #333;
-  	margin-left: 0;
 }
 .frise .segment:last-child{
-	border-right: 0;
+	background-image: none;
 }
 .frise span.indication{
 	display: inline-block;
 	position: absolute;
 	color: #FFF;
+	top:0;
 	left: 0px;
 	font-size: 10px;
 	width: 30px;
@@ -217,10 +237,12 @@
 .time-tangle {
 	color: #7628df; cursor: w-resize; position: relative;
 }
-.time-tangle:hover, .time-tangle.active {
+.time-tangle:hover, 
+.time-tangle.active {
     color: #FF00FC; border-bottom: 1px dashed #7628df;
 }
-.time-tangle:hover:after, .time-tangle.active:after {
+.time-tangle:hover:after, 
+.time-tangle.active:after {
     color: #7628DF; position: absolute; top: 18px; left: 50%; width: 160px;
     margin-left: -80px; font-size: 12px; text-align: center;
     content: "glisser pour modifier"
@@ -362,7 +384,7 @@
 }
 .col-left .item-video:hover,
 .col-left .item-video.active{
-	background: url(../img/arrow-item-video-sprite.png) right top no-repeat;
+	background: url(../img/arrow-item-video-sprite.png) right center no-repeat;
 }
 /* col-right */
 .col-right{
@@ -397,7 +419,7 @@
 
 .col-right .item-video:hover,
 .col-right .item-video.active{
-	background: url(../img/arrow-item-video-sprite.png) left top no-repeat;
+	background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
 }
 
 /* popin - frise-description */
diff -r c9dc489913af -r 1fbf7d835dc2 integration/css/home.css
--- a/integration/css/home.css	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/css/home.css	Mon Oct 29 17:22:55 2012 +0100
@@ -1,9 +1,4 @@
 /* header */
-.title-header{
-	width: 460px;
-	float: left;
-	height: 60px;
-}
 .title-header h2{
 	width: 100%;
 	text-align: center;
@@ -38,68 +33,21 @@
 	width: 630px;
 	margin-right: 20px;
 }
-.hashcut-video-wrap{
-	padding-left: 10px;
-	overflow: hidden;
-	margin-bottom: 16px;
-}
-.news{
-	width: 300px;
-	float: left;
-	margin-right: 20px;
-}
-.news:nth-child(2n+2){
+.news .video-item:nth-child(2n+2){
 	margin-right: 0;
 }
-.hashcut-video-wrap  h3{
-	font-size: 12px;
-}
-.hashcut-video-wrap  h3 strong{
-	font-weight: 600;
-}
-.last h3 strong{
-	margin-bottom: 2px;
-	font-weight: 600;
-	display: block;
-}
-.hashcut-video-wrap h3 a{
-	border-bottom: 1px solid #bababa;
-	display: inline-block;
-    line-height: 12px;
-}
-.hashcut-video-wrap h3 a:hover{
-	border-bottom: none;
-}
-.hashcut-video-wrap h3 span{
-	color: #de2500;
-}
-.hashcut-video-wrap  a.screenshot{
-	display: inline-block;
-	margin-bottom: 8px;
-}
-.last:nth-child(4n+4){
+
+
+
+.last .video-item:nth-child(4n+4){
 	margin-right: 0;
 }
-.last{
+.last .video-item{
 	width: 140px;
 	float: left;
 	margin: 0 20px 12px 0;
 }
-.pagination{
-	text-align: center;
-}
-.pagination a{
-	font-size: 14px;
-	color: #7628df;
-	text-decoration: underline;
-}
-.pagination a:hover{
-	text-decoration: none;
-}
-.pagination a.active{
-	color: #de2500;
-	text-decoration: none;
-}
+
 /* right-content */
 .right-content{
 	width: 310px;
diff -r c9dc489913af -r 1fbf7d835dc2 integration/css/profil.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/css/profil.css	Mon Oct 29 17:22:55 2012 +0100
@@ -0,0 +1,17 @@
+.title-content{
+	padding: 20px 0 6px;
+	border-bottom: 1px solid #333333;
+	color: #30036d;
+	font-size: 18px;
+	font-weight: 600;
+	margin-bottom: 14px;
+}
+.title-content a{
+	color: #ff00fc;
+}
+.profil .video-item{
+	margin-bottom: 16px;
+}
+.profil .video-item:nth-child(3n+3){
+	margin-right: 0;
+}
diff -r c9dc489913af -r 1fbf7d835dc2 integration/edition.html
--- a/integration/edition.html	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/edition.html	Mon Oct 29 17:22:55 2012 +0100
@@ -111,7 +111,7 @@
                     <span>Le Mashup<br />Cliquable</span>
                 </a></h1>
                 <div class="title-video-wrap">
-                    <a class="open-popin" href="#update-title">Hashcut sans titre</a>
+                    <a title="modifier" class="open-popin" href="#update-title">Hashcut sans titre</a>
                     <p class="time-length">Durée: <span>02:24</span></p>
                 </div>
                 <div class="profil-wrap">
@@ -242,7 +242,7 @@
                                 <div class="segment">
                                     <div class="section" style="left:80%;width:10%;"></div>
                                 </div>
-                            </div>
+                            </div><!-- segments -->
                         </div>
                     </div><!-- bloc-segmentation -->
 
@@ -250,17 +250,19 @@
 
                         <div class="frise clearfix">
 
-                            <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="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>
 
                             <div class="segments">
-                                <div class="segment" style="background-color:red;width:20%;"></div>
-                                <div class="segment" style="background-color:green;width:20%;"></div>
-                                <div class="segment" style="background-color:red;width:20%;"></div>
-                                <div class="segment" style="background-color:green;width:20%;"></div>
-                                <div class="segment" style="background-color:red;width:20%;"></div>
+                                <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>
                             
                         </div>
@@ -269,10 +271,10 @@
                                 <img class="pointer" src="img/popin-triangle.png" alt="" />
                                 <div class="popin-content">
                                     <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>
+                                        <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>
                                     </ul>
 
                                     <h2>Chargement de la capsule lunaire</h2>
@@ -302,15 +304,17 @@
                     <div class="liste-segment">
                         <h2>Liste des segments</h2>
                         <div class="frise clearfix">
-
-                            <span class="indication" style="left:64%;">00:30</span>
-                            <span class="indication" style="left:84%;">00:30</span>
+                            <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>
                             <div class="segments">
-                                 <div class="segment" style="background-color:red;width:20%;"></div>
-                                 <div class="segment" style="background-color:yellow;width:20%;"></div>
-                                 <div class="segment" style="background-color:blue;width:20%;"></div>
-                                 <div class="segment" style="background-color:green;width:20%;"></div>
-                                 <div class="segment" style="background-color:brown;width:20%;"></div>
+                                <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>
                         </div>
                     </div>
@@ -337,10 +341,10 @@
                                 <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>
+                                    <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>
                                 </ul>
                             </span>
                         </li><!-- item-video -->
@@ -351,10 +355,10 @@
                                 <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>
+                                    <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>
                                 </ul>
                             </span>
                         </li><!-- item-video -->
diff -r c9dc489913af -r 1fbf7d835dc2 integration/home.html
--- a/integration/home.html	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/home.html	Mon Oct 29 17:22:55 2012 +0100
@@ -99,52 +99,53 @@
             <div class="content">
                 <div class="left-content">
                     <h2>Hashcuts à la Une</h2>
-                    <div class="hashcut-video-wrap">
-                        <div class="news">
+                    <div class="hashcut-video-wrap news">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
-                        <div class="news">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
                     </div>
 
                     <h2>Derniers Hashcuts</h2>
-                    <div class="hashcut-video-wrap">
-                        <div class="last">
+                    <div class="hashcut-video-wrap last">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
-                        <div class="last">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
-                        <div class="last">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
-                        <div class="last">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
-                        <div class="last">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
-                        <div class="last">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
-                        <div class="last">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
-                        <div class="last">
+                        <div class="video-item">
                             <a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
                             <h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
                         </div>
                     </div>
+                    
                     <div class="pagination">
                         <a href="#" class="active">1</a>
                         <a href="#">2</a>
diff -r c9dc489913af -r 1fbf7d835dc2 integration/img/arrow-item-video-sprite.png
Binary file integration/img/arrow-item-video-sprite.png has changed
diff -r c9dc489913af -r 1fbf7d835dc2 integration/img/border-right-segment.png
Binary file integration/img/border-right-segment.png has changed
diff -r c9dc489913af -r 1fbf7d835dc2 integration/js/common.js
--- a/integration/js/common.js	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/js/common.js	Mon Oct 29 17:22:55 2012 +0100
@@ -22,4 +22,5 @@
     $(".login-form, .signup-form").submit(function() {
         $(".user").hide();
     });
+
 });
\ No newline at end of file
diff -r c9dc489913af -r 1fbf7d835dc2 integration/js/editor.js
--- a/integration/js/editor.js	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/js/editor.js	Mon Oct 29 17:22:55 2012 +0100
@@ -418,6 +418,7 @@
         $(".organize-segments .top, .organize-segments .bottom").removeClass("disable");
         $(".organize-segments .item-video:last-child .bottom, .organize-segments .item-video:first-child .top").addClass("disable");
     }
+    disableMoveItemVideo();
     
     $(".organize-segments").sortable({
         stop : function(){
diff -r c9dc489913af -r 1fbf7d835dc2 integration/profil.html
--- a/integration/profil.html	Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/profil.html	Mon Oct 29 17:22:55 2012 +0100
@@ -9,6 +9,7 @@
         <link rel="stylesheet" href="lib/jquery-ui.css" />
         <link rel="stylesheet" href="css/reset.css" />
         <link rel="stylesheet" href="css/common.css" />
+        <link rel="stylesheet" href="css/profil.css" />
     </head>
     <body>
         <div class="wrap">
@@ -86,17 +87,51 @@
                     <img src="img/hashcut-logo.png" alt="Hashcut" />
                     <span>Le Mashup<br />Cliquable</span>
                 </a></h1>
-                <div class="title-video-wrap">
-         
-                </div>
+                <div class="title-header"></div>
                 <div class="profil-wrap">
-                   
+                    <a href="#" class="all-hashcut">Tous les Hashcuts</a>
                     <a href="#user" class="my-profil open-popin">Mon profil</a>
                 </div>
             </div><!-- header -->
 
             <div class="content">
-                
+                <h2 class="title-content">Hashcuts de <a href="#">Hashcutter75</a></h2>
+     
+                <div class="hashcut-video-wrap profil">
+                    <div class="video-item">
+                        <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+                        <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+                    </div>
+                    <div class="video-item">
+                        <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+                        <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+                    </div>
+                    <div class="video-item">
+                        <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+                        <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+                    </div>
+                    <div class="video-item">
+                        <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+                        <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+                    </div>
+                    <div class="video-item">
+                        <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+                        <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+                    </div>
+                    <div class="video-item">
+                        <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+                        <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+                    </div>
+                </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 -->
 
             <div class="footer clearfix">