# HG changeset patch
# User Edwin Razafimahatratra <edwin@robotalismsoft.com>
# Date 1355278224 -3600
# Node ID 542252e0c6155ead7b64f4373378a123bc1857c9
# Parent  f7bfdc49982bf063351bed8eb00a52081b4a76ca
save

diff -r f7bfdc49982b -r 542252e0c615 web/choix.html
--- a/web/choix.html	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/choix.html	Wed Dec 12 03:10:24 2012 +0100
@@ -29,12 +29,12 @@
 				<div class="strut"></div><!--
 				this comment corrects the white-space (display: inline);
 				--><div class="fullScreen_vcentering box_vcentering blue big_txt">
-					<p><a id="mot1" onClick="incChoice.selectWord(0);">Famille</a></p>
-					<p><a id="mot2" onClick="incChoice.selectWord(1);">Amour</a></p>
-					<p><a id="mot3" onClick="incChoice.selectWord(2);">Travail</a></p>
-					<p><a id="mot4" onClick="incChoice.selectWord(3);">International</a></p>
-					<p><a id="mot5" onClick="incChoice.selectWord(4);">Dieu</a></p>
-					<p><a id="mot6" onClick="incChoice.selectWord(5);">Président</a></p>
+					<p><a id="mot1" onClick="incChoice.selectWord(1);">Famille</a></p>
+					<p><a id="mot2" onClick="incChoice.selectWord(2);">Amour</a></p>
+					<p><a id="mot3" onClick="incChoice.selectWord(3);">Travail</a></p>
+					<p><a id="mot4" onClick="incChoice.selectWord(4);">International</a></p>
+					<p><a id="mot5" onClick="incChoice.selectWord(5);">Dieu</a></p>
+					<p><a id="mot6" onClick="incChoice.selectWord(6);">Président</a></p>
 				</div>
 			</section>
 		</div>	
@@ -54,9 +54,9 @@
             	incResize.init("content", null, "mosaic", null, null, 130, 1920/809, null, incMosaic.registerPostNewCanvasSize);
 
             	// Set the mosaic effect
-            	incChoice.setMosaicImages(["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
-            		["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
-            		["choix3fond1.jpg", "choix3fond2.jpg", "choix3fond3.jpg"]);
+            	incChoice.setMosaicImages(	["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
+            								["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
+            								["choix3fond1.jpg", "choix3fond2.jpg", "choix3fond3.jpg"]);
 
             	// Set the list of words and the mosaic effect
 				incChoice.setWordsAndEffect(0);
diff -r f7bfdc49982b -r 542252e0c615 web/index.html
--- a/web/index.html	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/index.html	Wed Dec 12 03:10:24 2012 +0100
@@ -23,7 +23,7 @@
 			<div id="content_top">
 				
 				<!--  change with js: height and line-height (the same size) of "container_vcentering"  -->
-				<header id="top" class="container_vcentering">
+				<header id="top" class="container_vcentering box_transparance">
 					<div id="title_hp" class="box_vcentering">
 						<h2>UNE EXPÉRIENCE DE CINÉMA</h2>
 						<h1>THE END, ETC.</h1>
@@ -36,15 +36,15 @@
 				</section>
 				
 				<!--  change with js: height and line-height (the same size) of "container_vcentering"  -->
-				<section id="bottom" class="container_vcentering">
+				<section id="bottom" class="container_vcentering box_transparance">
 					<div class="box_vcentering">
-						<p class="big_link"><a href ="prologue.html">COMPOSEZ VOTRE FILM</a></p>
+						<p class="big_link"><a onClick="fadeAndNext();">COMPOSEZ VOTRE FILM</a></p>
 					</div>
 				</section>
 			</div>
 			<!-- /div content_top -->				
 
-			<footer id="footer">
+			<footer id="footer" class="box_transparance">
 				<ul id="logo_partners" class="floatL">
 					<li>UNE CO-PRODUCTION
 						<ul>
@@ -112,6 +112,23 @@
                 // Start mosaic effect
     			incMosaic.start("mosaic", 1, 9, 5, true, false, null);
             });
+
+            var cliked = false;
+            var fadeAndNext = function() {
+            	if (cliked) {
+            		return;
+            	}
+            	
+            	cliked = true;
+            	var time = 4000;
+
+            	// Fade on elements
+            	$('.box_transparance').animate({opacity: 0}, time - 100);
+
+            	setTimeout(function() { 
+            		location.href = "prologue.html";
+				}, time);
+            }
         </script>		
 	</body>
 </html>
\ No newline at end of file
diff -r f7bfdc49982b -r 542252e0c615 web/inter_choix.html
--- a/web/inter_choix.html	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/inter_choix.html	Wed Dec 12 03:10:24 2012 +0100
@@ -17,7 +17,7 @@
 	</head>
 	<body>
 		<!-- div content - site takes the full height of browser -->	
-		<div id="content" class="full_screen pointer" onClick="">
+		<div id="content" class="full_screen pointer" onClick="gotoChoice();">
 		
 			<!--this div empty allows the element content_vcentering to be vertically aligned -->
 			<div class="strut"></div><!--
@@ -40,9 +40,12 @@
 				  $('.box_transparance').animate({
 				    	opacity: 0,
 					  }, 10000, function() {
-					    // Animation complete.
+					  	gotoChoice();
 					 });
             });
+            var gotoChoice = function() {
+				location.href = "choix.html";            	
+            }
         </script>               
 	</body>
 </html>
\ No newline at end of file
diff -r f7bfdc49982b -r 542252e0c615 web/niv1_videoplayer.html
--- a/web/niv1_videoplayer.html	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/niv1_videoplayer.html	Wed Dec 12 03:10:24 2012 +0100
@@ -46,26 +46,27 @@
 
 	       				<button id="btnSDHD" class="btn" onClick="/">SD/HD</button>
 	                    
-	                    <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">Back</button>  
 
 	                    <div id="progressContainer">
 		                    
 		                    <div id="progressBar" class="progress_bar">
 		                    	<span id="progress" class="progress_bar"></span>
-		                    	<!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing.
-		                    	-->
-		                    	<button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="incPlayer.ctrlPlay(this);">Play/Pause</button>
+		                    	<button id="stateBar" class="txt_hidden" onClick="/"></button>
 		                	</div>
 		                    
 		                   	<ul id="progressTime">
 		                   		<!-- class="txt_white" can be used to color current time in white -->
 		                   		<li id="current" class="floatL"></li>
-		   						<li id="duration" class="floatR"></li>
+		   						<li id="duration" class="floatR">0'00''</li>
 		   					</ul>
 						
 						</div>
-	                    
-	                    <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button> 
+	                    <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">Back</button>  
+		                <!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing.
+		                -->	                    
+	                    <button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="incPlayer.ctrlPlay(this);">Play/Pause</button> 
+
+	                    <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button>
 
 	                    <button id="btnChoice" class="btn">Choice</button>             
                     </div>
@@ -77,18 +78,19 @@
 		<script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
 		<!-- JavaScript -->
         <script src="static/res/js/jquery-1.8.2.min.js"></script>
+       	<script src="static/res/js/jquery.cookie.js"></script>        	      
         <script src="static/res/js/popcorn-complete.js"></script>
         <script src="static/res/js/popcorn.sequence.js"></script>
-        <script src="static/res/js/incresize.js"></script>
         <script src="static/res/js/incplayer.js"></script>        
+        <script src="static/res/js/incchoice.js"></script>        
         <script>        
             $(function() {
-            	// Init the resize object
-            	//incResize.init("content", null, "video", null, "footer", 0, 1920/1080);
+            	// Init the video player
+                if (incPlayer.init("video", "btnPlayPause", "current", "duration", "static/res/json/sequences.json", true)) {
+                    incPlayer.createPopSequence(incChoice.getChoosenWords());             
 
-            	// Init the video player
-                if (incPlayer.init("video", "btnPlayPause", "current", "duration", "static/res/json/sequences2.json", true)) {
-                    incPlayer.createPopSequence();
+					// Add class on all videos
+           			$("#video").children().addClass("small_video");			
                 }                    	
             });
         </script>        			
diff -r f7bfdc49982b -r 542252e0c615 web/prologue.html
--- a/web/prologue.html	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/prologue.html	Wed Dec 12 03:10:24 2012 +0100
@@ -23,8 +23,9 @@
 			<div class="strut"></div><!--
 			this comment corrects the white-space (display: inline);
 			--><section class="fullScreen_vcentering">
-	            <video autoplay poster="/">
-	           		<source src="static/res/video/boucle/FOND2.mp4"type="video/mp4" />
+	            <video class="small_video" autoplay poster="/">
+	           		<!--<source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-HD.mp4" type="video/mp4" />-->
+	           		<source src="http://dvvsyrlsr21oz.cloudfront.net/JP-HD-01.mp4"type="video/mp4" />
 	           		<source src="/"type="video/webm" />
 	  				<p>Votre navigateur ne gère pas l'élément video @todo</p>
 				</video>
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/css/style.css
--- a/web/static/res/css/style.css	Tue Dec 11 21:13:42 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,190 +0,0 @@
-/*----------------------------------------------*/
-/*  Summary                 */
-/*----------------------------------------------*/
-
-/*  1- Mentions */
-/*  2- Color codes  */
-/*  3- Reset    */
-/*  4- Base styles  */
-/*  5- Video    */
-/*  6- Controls     */
-/*  7- Sidebar  */
-/*  8- Contact  */
-/*  9- Footer   */
-
-/*----------------------------------------------*/
-/*  1- Mentions             */
-/*----------------------------------------------*/
-
-/* @client : The End    */
-/* @date : octobre 2012 */
-
-/*----------------------------------------------*/
-/*  2- Color codes              */
-/*----------------------------------------------*/
-
-/*----------------------------------------------*/
-/*  3- Reset                */
-/*----------------------------------------------*/
-
-html, body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td {
-    margin:0;
-    padding:0;
-}
-html {
-    font-size: 100%;
-}
-h1,h2,h3,h4,h5,h6 {
-    font-size: 100%;
-    font-weight: normal;
-    font-style: normal;
-}
-fieldset,img, button {
-    border: 0;
-}
-li {
-    list-style: none;
-}
-textarea, table, td {
-    word-wrap: break-word;
-    white-space: pre-wrap; 
-}
-table {
-    border-spacing: 0;
-    border-collapse: collapse; 
-}
-caption,th {
-    text-align: left;
-} 
-legend {
-    color: #000;
-}
-blockquote:before, blockquote:after, q:before, q:after {
-    content: '';
-    content: none;
-}
-label, input[type="submit"], input[type="button"], button {
-    cursor: pointer;
-}
-input, button, select {
-    vertical-align: middle;
-    font-size: 100%;
-}
-table, td, blockquote, textarea, input, object, embed, video {
-    max-width: 100%;
-}
-
-/* HTML5 display-role reset for older browsers */
-header, footer, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, figure, figcaption, time, dialog {
-    display: block;
-}
-
-/*----------------------------------------------*/
-/*  4- Base styles              */
-/*----------------------------------------------*/
-body {
-    background-color: black;    
-}
-/*----------------------------------------------*/
-/*  5- Video                */
-/*----------------------------------------------*/
-video {
-    width: 600px;
-    height: 400px;
-}
-/*----------------------------------------------*/
-/*  6- Controls             */
-/*----------------------------------------------*/
-#playerContainer {
-    position: relative;
-    z-index: 1;
-}
-
-#controlContainer {
-    position: absolute;
-    z-index: 10;
-    top: 200px;
-    left: 0;
-    right: 0;
-    height: 40px; 
-    overflow: hidden;
-    background-color: blue;
-}
-#controlbar {
-    position: absolute;
-    /*bottom: -40px;*/
-    bottom: 0;
-    left: 0;
-    height: 40px;
-    padding: 0 50px;
-
-    -webkit-transition: all 0.3s ease-in-out;
-    -moz-transition: all 0.3s ease-in-out;
-    -o-transition: all 0.3s ease-in-out;    
-    transition: all 0.3s ease-in-out;
-}
-#controlContainer:hover #controlbar {
-    bottom: 0;
-}
-.bnt {
-    height: 32px;
-    width: 32px;
-    margin-left: 15px;
-    text-indent: -99999px;  
-    background-image: url(../img/player_btn.png);
-}
-#controlbar .bnt:first-child {
-    margin-left: 0;
-}   
-#btnPlay {
-    background-position: 0 -32px;
-}
-#btnPlay:hover,
-#btnPlay:focus {
-    background-position: 0 0;
-}
-#btnPaused {
-    background-position: 32px -32px;
-}
-#btnPaused:hover,
-#btnPaused:focus {
-    background-position: 32px 0;
-}
-#btnBck {
-    background-position: -96px -32px;
-}
-#btnBck:hover,
-#btnBck:focus {
-    background-position: -96px 0;   
-}
-#btnFwd {
-    background-position: -64px -32px;   
-}
-#btnFwd:hover,
-#btnFwd:focus {
-    background-position: -64px 0;
-}
-#btnFullScr {
-    background-position: -132px -32px;  
-    width: 48px;
-    }
-#btnFullScr:hover,
-#btnFullScr:focus {
-    background-position: -132px 0;  
-}
-#btnHD {
-    background-position: -180px -32px;
-    width: 52px;
-}
-#btnHD:hover,
-#btnHD:focus {
-    background-position: -180px 0;
-}
-
-/*----------------------------------------------*/
-/*  9- Footer               */
-/*----------------------------------------------*/
-
-
-
-
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/css/style2.css
--- a/web/static/res/css/style2.css	Tue Dec 11 21:13:42 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,19 +0,0 @@
-video {
-    position: relative;
-    width: 1280px;
-    height: 720px;
-    z-index: 1;
-}
-
-#controls {
-    position: absolute;
-    left: 300px;
-    top: 550px;
-    z-index: 2;
-    
-    padding: 25px;
-    background: black;
-    color: white;
-    font-size: 2em;
-    font-family: Arial;
-}​
\ No newline at end of file
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/css/style_1024.css
--- a/web/static/res/css/style_1024.css	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/static/res/css/style_1024.css	Wed Dec 12 03:10:24 2012 +0100
@@ -438,6 +438,9 @@
 /*----------------------------------------------*/
 /*	Video 			*/
 /*----------------------------------------------*/
+video.small_video{
+	min-width: 100%;
+}
 .float_sequence {
 	white-space: nowrap;
 	overflow: hidden;
@@ -547,13 +550,13 @@
 }
 .container_hcentering {
 	margin: 0 auto;
-	width: 530px;
+	width: 580px;
 }
 #progressContainer {
 	width: 240px;
 	display: inline-block;
 	vertical-align: top;
-	padding-top: 6px;
+	height: 38px;
 	margin: 0 25px; 	
 }
  /* 
@@ -568,6 +571,7 @@
 */
 .progress_bar {
 	height: 5px;
+	margin-top: 8px;
 	border-radius: 2px;
 }
 #progressBar {
@@ -581,24 +585,28 @@
 	z-index: 2;
 	top: 0;
 	left: 0;
+	margin: 0;
 	width: 40px; /* to change with JS */
 	background-color: #ffffff;
 }
-#btnPlayPause {
+#stateBar {
 	position: absolute;
 	z-index: 3;
 	top: -6px;
-	left: 33px; /* to change with JS */
-	width: 21px; 
-	height: 22px;
+	left: 32px; /* to change with JS */
+	
+	width: 16px; 
+	height: 16px;
+	background-color: #000000;
+	border-radius: 2px;
+	border: 2px solid #777777;
+	-moz-box-shadow: 0 0 5px 3px #000000;
+	-webkit-box-shadow: 0 0 5px 3px #000000;
+	box-shadow: 0 0 5px 3px #000000;
+}
 	background-position: -72px 0;	
 }
-#btnPlayPause:hover,
-#btnPlayPause:focus {
-    background-position: -72px -22px;
-}
-
-footer ul#progressTime{
+footer #progressTime{
 	margin: 10px 0;
 	width: 240px;
 	font-size: 11px;
@@ -627,12 +635,22 @@
     background-position: -55px 0;
     width: 16px;
     height: 16px;
-    margin-left: 30px;
+    margin-right: 30px; 
 }
 #btnBck:hover,
 #btnBck:focus {
     background-position: -55px -16px;   
 }
+#btnPlayPause {
+	background-position: -77px 0;	
+	width: 16px; 
+	height: 18px;
+    margin-right: 30px; 
+}
+#btnPlayPause:hover,
+#btnPlayPause:focus {
+    background-position: -77px -22px;
+}
 #btnFwd {
     background-position: -93px 0;
     width: 16px;
@@ -721,6 +739,12 @@
 .choix .big_txt p{
 	margin: 25px 0;
 }
+#partage .big_txt p{
+	margin: 18px 0;
+}
+#partage .big_txt p.margin_exeption{
+	margin: 47px 0;
+}
 .inter_choice .big_txt p:first-child, 
 .choice .big_txt p:first-child, {
 	margin-top: 62px;
@@ -734,16 +758,18 @@
 .pointer {
 	cursor: pointer;
 }
-#bg_mosaic {
+#bg_mosaic,
+#bg_img {
 	z-index: 5;
 }
-#choix {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		z-index: 6;
+#choix,
+#partage {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 6;
 }
 .blue a,
 .blue a:link,
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/css/style_1024_avdernier.css
--- a/web/static/res/css/style_1024_avdernier.css	Tue Dec 11 21:13:42 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,373 +0,0 @@
-/*----------------------------------------------*/
-/*	Summary					*/
-/*----------------------------------------------*/
-
-/*	1- Mentions	*/
-/*	2- Color codes	*/
-/*	3- Reset	*/
-/*	4- Base styles	*/
-/*	5- Video	*/
-/*	6- Controls 	*/
-/*	7- Sidebar	*/
-/*	8- Contact	*/
-/*	9- Footer	*/
-
-/*----------------------------------------------*/
-/*	1- Mentions				*/
-/*----------------------------------------------*/
-
-/* @client : The End	*/
-/* @date : octobre 2012	*/
-
-/*----------------------------------------------*/
-/*	2- Color codes				*/
-/*----------------------------------------------*/
-
-/*----------------------------------------------*/
-/*	3- Reset				*/
-/*----------------------------------------------*/
-
-html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,figure,p,blockquote,th,td {
-	margin:0;
-	padding:0;
-}
-
-/* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using  `em` units */
-/* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom.*/ 
-html {
-	font-size: 100%; /* 1 */
-	-webkit-text-size-adjust: 100%; /* 2 */
-	-ms-text-size-adjust: 100%; /* 2 */
-}
-h1,h2,h3,h4,h5,h6 {
-	font-size: 100%;
-	font-weight: normal;
-	font-style: normal;
-}
-li {
-	list-style: none;
-}
-textarea, table, td, th, code, pre {
-	word-wrap: break-word;
-	white-space: pre-wrap; 
-}
-table {
-	border-spacing: 0;
-	border-collapse: collapse; 
-}
-caption, th {
-	text-align: left;
-} 
-/* 1. Corrects alignment displayed oddly in IE 6/7 */
-legend {
-	color: #000;
-	*margin-left: -7px; /* 1 */
-}
-blockquote:before, blockquote:after, q:before, q:after {
-	content: '';
-	content: none;
-}
-label, input[type="submit"], input[type="button"], button {
-	cursor: pointer;
-}
-input, button, select {
-	vertical-align: middle;
-	font-size: 100%;
-}
-
-/* 1. Removes default vertical scrollbar in IE 6/7/8/9 */
-/* 2. Improves readability and alignment in all browsers */
-/* 2. Allow only vertical resizing of textareas */
-textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
-    resize: vertical; /* 3 */
-}
-
-fieldset, img, button {
-	border: 0;
-}
-img, table, td, blockquote, code, pre, textarea, input, object, embed, video {
-	max-width: 100%;
-}
-
-/* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3 */
-audio, canvas, video {
-    display: inline-block;
-    *display: inline;
-    *zoom: 1;
-}
-
-/* Prevents `sub` and `sup` affecting `line-height` in all browsers */
-sub,
-sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-sup {
-    top: -0.5em;
-}
-sub {
-    bottom: -0.25em;
-}
-
-/* HTML5 - Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3 */
-header, footer, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, figure, figcaption, time, dialog {
-	display: block;
-}
-
-/*----------------------------------------------*/
-/*	4- Base styles				*/
-/*----------------------------------------------*/
-body {
-	background-color: black; 
-	font-size: 1em;
-	line-height: 1;	
-}
-
-/* Example */
-
-h1 {
-	font-family: "Arial Black", sans-serif;  
-	font-size: 43px;
-	color: #ffffff;
-}
-
-h2 {
-	font-family: Arial, sans-serif;  
-	font-size: 24px;
-	color: #bfbfbf;
-}
-
-h3 {
-
-}
-
-h4 {
-
-}
-
-h5 {
-
-}
-
-h6 {
-
-}
-p,
-pre {
-    margin: 1em 0;
-}
-dl,
-menu,
-ol,
-ul {
-    margin: 1em 0;
-}
-
-b,
-strong,
-.bold  {
-    font-weight: bold;
-}
-.uppercase{
-	text-transform:uppercase;
-	}	
-a,
-a:link,
-a:visited,
-a:active {
-	text-decoration: none;
-	}
-a:hover,
-a:focus {
-	}
-	
-/* Clearfix: contain floats For modern browsers */
-/* 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class */
-/* 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements */
-
-.clearfix:before,
-.clearfix:after {
-    content: " "; /* 1 */
-    display: table; /* 2 */
-}
-.clearfix:after {
-    clear: both;
-}
-
-/* For IE 6/7 only. Include this rule to trigger hasLayout and contain floats */
-.clearfix {
-    *zoom: 1;
-}
-/*----------------------------------------------*/
-/*	site takes all the space of the browser	*/
-/*----------------------------------------------*/
-html, body {	
-	height: 100%;
-}
-#content{
-	width: 98%;
-	min-height: 100%;
-	position: relative;
-	margin: 0 auto;
-}
-#content #content_top {
-	margin-top: 0;
-	margin-bottom: 0;
-	padding-bottom: 70px; /*  height of <footer> + some margin */
-}
-footer {
-
-	position: absolute;
-	bottom: 0; 
-	left: 0;
-	width: 100%;
-	
-	height: 47px; /*  height of <footer>  */
-	padding: 0 0 20px 0;
-} 
-/*----------------------------------------------*/
-/*	the elements takes the full height of "content_top"	*/
-/*----------------------------------------------*/
-.conteneur_vcentering {
-  text-align:center; 
-}
-.box_vcentering {
-  vertical-align: middle;
-  display: inline-block;
-  line-height: 1; 
-  text-align: center;
-}
-/*----------------------------------------------*/
-/*	4- Main	HP		*/
-/*----------------------------------------------*/
-section a,
-section a:link,
-section a:visited,
-section a:active {
-	color: #ffffff;
-	}
-section a:hover,
-section a:focus {
-	color: #bfbfbf;
-	}
-#title_hp {
-	text-align : center;
-	padding: 11px 0 11px 0;
-	margin-left: -13px; /* 53px */ 
-	text-transform: uppercase;
-}
-#title_hp h1 {
-    margin: 0 0 5px 0;
-}
-#title_hp .h2_exeption{
-		margin-left: -170px; /* 86px */
-}
-.h2_exeption {
-	font-size: 25px;
-}
-#main {
-	display:block;  
-	margin: 0 auto;
-}
-.big_link {
-	font-family: "Arial Black", sans-serif;  
-	font-size: 21px;
-	text-align: center;
-	padding: 14px 0 16px 0;
-	margin: 0;
-}
-/*----------------------------------------------*/
-/*	9- Footer HP				*/
-/*----------------------------------------------*/
-
-footer a,
-footer a:link,
-footer a:visited,
-footer a:active {
-	color: #bfbfbf;
-	}
-footer a:hover,
-footer a:focus {
-	color: #ffffff;
-	}
-footer ul {
-	margin: 0;
-
-	font-family: "Arial Bold", sans-serif; 
-	font-size: 9px;
-	color: #b9b9b9;
-	text-transform: uppercase;
-}
-footer ul li{
-	display: inline;
-}
-footer ul li a{
-	display: inline-block;
-}
-footer ul li img{
-	min-width: 100%;
-}
-
-footer #logo_partners{
-	float: left;
-}
-footer #logo_partners>li {
-	display: inline-block;
-	padding-right: 22px;
-}
-footer #logo_partners li a{
-	padding-top: 10px;
-	height: 28px;
-	line-height: 28px;
-	text-align:bottom;
-}
-footer #logo_partners li a img {
-	vertical-align:bottom;
-}
-footer #logo_partners li:first-child li a{
-	width: 39px;
-}
-footer #logo_partners li:first-child li+li a{
-	width: 40px;
-	padding-left: 18px;
-}
-footer #logo_partners li+li li a{
-	width: 42px;
-}
-footer #logo_partners li+li li+li a{
-	width: 62px;
-	padding-left: 16px;
-}
-footer #logo_partners li+li li+li+li a{
-	width: 56px;
-	padding-left: 16px;
-}
-
-footer #socialMedia {
-	float: right;
-	margin-top: 24px; 
-}
-footer #socialMedia li a{
-	display: inline-block;
-	vertical-align: middle;
-}
-footer #socialMedia li+li a{
-	width: 20px;
-	height: 20px;
-}
-footer #socialMedia li+li {
-	padding-left: 22px;
-}
-
-/*----------------------------------------------*/
-/*	5- Video				*/
-/*----------------------------------------------*/
-
-/*----------------------------------------------*/
-/*	6- Controls				*/
-/*----------------------------------------------*/
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix1fond1.jpg
Binary file web/static/res/img/choix1fond1.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix1fond2.jpg
Binary file web/static/res/img/choix1fond2.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix1fond3.jpg
Binary file web/static/res/img/choix1fond3.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix2fond1.jpg
Binary file web/static/res/img/choix2fond1.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix2fond2.jpg
Binary file web/static/res/img/choix2fond2.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix2fond3.jpg
Binary file web/static/res/img/choix2fond3.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix3fond1.jpg
Binary file web/static/res/img/choix3fond1.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix3fond2.jpg
Binary file web/static/res/img/choix3fond2.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/choix3fond3.jpg
Binary file web/static/res/img/choix3fond3.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/transitionChoix1.jpg
Binary file web/static/res/img/transitionChoix1.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/transitionChoix2.jpg
Binary file web/static/res/img/transitionChoix2.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/img/transitionChoix3.jpg
Binary file web/static/res/img/transitionChoix3.jpg has changed
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/js/incchoice.js
--- a/web/static/res/js/incchoice.js	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/static/res/js/incchoice.js	Wed Dec 12 03:10:24 2012 +0100
@@ -32,10 +32,8 @@
 			$("#mot5").html("dieu");
 			$("#mot6").html("president");
 
-			// Set images for effect
-			//incMosaic.clear();
-	        //incMosaic.addImageUrl("static/res/img/" + this.image1);
-	        //incMosaic.addImageUrl("static/res/img/" + this.image2);
+			// class
+			// by default there is the calss blue
 
 		} else if (choiceIndex == 1) {
 			$("#mot1").html("actif");
@@ -45,10 +43,8 @@
 			$("#mot5").html("patrie");
 			$("#mot6").html("politique");
 
-			// Set images for effect
-			//incMosaic.clear();
-	        //incMosaic.addImageUrl("static/res/img/" + this.image2);
-	        //incMosaic.addImageUrl("static/res/img/" + this.image3);
+			// class
+			$("#choix").removeClass("blue").addClass("white");
 
 		} else {
 			$("#mot1").html("spleen");
@@ -58,13 +54,9 @@
 			$("#mot5").html("desir");
 			$("#mot6").html("bonheur");
 
-			// Set images for effect
-			//incMosaic.clear();
-	        //incMosaic.addImageUrl("static/res/img/" + this.image3);
-	        //incMosaic.addImageUrl("static/res/img/" + this.image1);			
+			// class
+			$("#choix").removeClass("white").addClass("red");
 		}
-
-	    //incMosaic.start("mosaic", effectSpeed, 9, 5, false, true, function() {incChoice.effectIsDone();});        					
 	};
 
 	this.selectWord = function(wordIndex)
@@ -98,18 +90,23 @@
 		incMosaic.UnpauseEffect(false);
 
 		// Fade the text
-		$('.big_txt').animate({opacity: 1}, 20000 * 1 / effectSpeed);
+		$('.big_txt').animate({opacity: 1}, 10000 * 1 / effectSpeed);
 
 		if (this.currentWorldIndex == 3) {
 			// The 3 words get choosen
 			location.href = "niv1_videoplayer.html";
 		}
-	}
+	};
+
+	this.getChoosenWords = function()
+	{
+		return [this.getCookie("niv1_world0"), this.getCookie("niv1_world1"), this.getCookie("niv1_world2")];
+	};
 
 	this.setCookie = function(name, value)
 	{
 		$.removeCookie(name);
-		$.cookie(name, value, { expires: 7, path: '/' });    	
+		$.cookie(name, value, { expires: 7, path: '/' }); 
     };
 
 	this.getCookie = function(name) {
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/js/incplayer.js
--- a/web/static/res/js/incplayer.js	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/static/res/js/incplayer.js	Wed Dec 12 03:10:24 2012 +0100
@@ -59,9 +59,6 @@
 
 		// Load all sequences data
 		this.allSequencesData = this.loadJson(jsonFile);
-		this.logi("sequences in part1: " + (this.allSequencesData.part1 !== undefined ? this.allSequencesData.part1.length : 0));
-		this.logi("sequences in part2: " + (this.allSequencesData.part2 !== undefined ? this.allSequencesData.part2.length : 0));
-		this.logi("sequences in part3: " + (this.allSequencesData.part3 !== undefined ? this.allSequencesData.part3.length : 0));
 
 		this.initDone = true;
 		return true;
@@ -78,7 +75,7 @@
 		}		
 	};
 
-	this.createPopSequence = function()
+	this.createPopSequence = function(words)
 	{
 		if (!this.initDone) {
 			this.loge("incplayer not initialized");
@@ -89,29 +86,24 @@
 		this.destroySequence();
 
 		// Choose the 3 video
-		this.choosePopSequence();
+		this.choosePopSequence(words);
 
 		// And cerate the popcorn sequence
 		this.initPopSequence();
 	};
 
-	this.choosePopSequence = function()
+	this.choosePopSequence = function(words)
 	{
 		this.sequences = [];
-		if (this.allSequencesData.part1 !== undefined && this.allSequencesData.part1.length) {
-			this.sequences.push(this.allSequencesData.part1[this.random(0, this.allSequencesData.part1.length)]);			
-		}
-		if (this.allSequencesData.part2 !== undefined && this.allSequencesData.part2.length) {
-			this.sequences.push(this.allSequencesData.part2[this.random(0, this.allSequencesData.part2.length)]);
-		}
-		if (this.allSequencesData.part3 !== undefined && this.allSequencesData.part3.length) {
-			this.sequences.push(this.allSequencesData.part3[this.random(0, this.allSequencesData.part3.length)]);
-		}
+		var videos = this.allSequencesData.videos;
+		this.sequences.push(this.getRandomVideos(words[0]));		
+		this.sequences.push(this.getRandomVideos(words[1]));		
+		this.sequences.push(this.getRandomVideos(words[2]));		
 
 		// Set the video file name 
 		var i;
 		for (i = 0; i < this.sequences.length; ++i) {
-			var file = this.sequences[i].src;
+			var file = this.sequences[i];
 			
 			// HD
 			if(this.hd) {
@@ -119,11 +111,16 @@
 			}
 
 			// Extention
-			file += "." + this.videoExt;
+			file += "." + /*this.videoExt*/ "mp4"; // todo
 
 			// Set the final file
-			this.sequences[i].src = file;
+			this.sequences[i] = file;
 		}
+
+		for (i = 0; i < this.sequences.length; ++i) {
+			this.sequences[i] = { src: this.sequences[i], in: 0, out: -1 };
+		}
+
 		
 		this.logi("choosed sequences:");
 		for (i = 0; i < this.sequences.length; ++i) {
@@ -131,6 +128,36 @@
 		}
 	};
 
+	this.getRandomVideos = function(word)
+	{
+		var index = this.getWordIndex(word);
+		var videos = [];
+
+		// Get all video affected by this word
+		for (var i = 0; i < this.allSequencesData.videos.length; ++i) {
+			var video = this.allSequencesData.videos[i];
+
+			// We push has many time the url that the score for the word
+			for (var j = 0; j < video.scoreWord[index]; ++j) {
+				videos.push(video.src);
+			}
+		}
+
+		return videos[this.random(0, videos.length)];
+	}
+
+	this.getWordIndex = function(word)
+	{
+		var words = this.allSequencesData.mots;
+		for (var i = 0; i < words.length; ++i) {
+			if (words[i] == word) {
+				return i;
+			}
+		}
+		console.log("getWordIndex erreur");
+		return -1;
+	};
+
 	this.initPopSequence = function()
 	{
 		var self = this;
@@ -145,9 +172,6 @@
 			// Hide controls
 			pop.controls(false);
 
-			// Mute (debug)
-			pop.mute();
-
 			self.listenEvent(pop, "playing", false, function() {
 				self.displayPlayButton(false);
 				self.logi("play sequence: " + self.sequenceToString(self.popSeq.active));
@@ -171,32 +195,21 @@
 
 			self.playerIsReady = true;
 
+			// todo
 			// Set total duration
-			$(self.progressDuration).html(self.secondsToTime(self.popSeq.duration()));			
+			//$(self.progressDuration).html(self.secondsToTime(self.popSeq.duration()));			
 
 			if (!self.iOS) {
 				// Automatic play
 				self.ctrlPlay();
-
-				if (self.seekTime !== 0.0) {
-					self.popSeq.jumpTo(self.seekTime);
-					self.seekTime = 0.0;
-				}
 			}
 
 			// Unlisten event
 			self.popSeq.off("loadedmetadata");
-
-			// Call the resize object
-			if (incResize !== undefined) {
-				incResize.resizeElements();
-			}	
-
 			self.logi("the player is ready");
 		});	
 
 		self.popSeq.on("cycle", function() {
-			self.logi("CYCLE !");
 		});	
 	};
 
diff -r f7bfdc49982b -r 542252e0c615 web/static/res/json/sequences.json
--- a/web/static/res/json/sequences.json	Tue Dec 11 21:13:42 2012 +0100
+++ b/web/static/res/json/sequences.json	Wed Dec 12 03:10:24 2012 +0100
@@ -1,18 +1,314 @@
-{
-    "words" : [
-        "famille", "amour", "travail", "international", "dieu", "president", "actif", "passif", "corps", "charite", "patrie", "politique", "spleen", "ideal", "origines", "peur", "desir", "bonheur"
-    ],
-
-    "videos" : [
-        {
-            "name": "kristina1",
-            "src": "http://www.akamai.com/xxxxxxxxx/kristina1",
-            "wordscore": [0, 0, 0, 0, 0, 0, 7, 0, 8, 0, 0, 0, 4, 0, 8, 0, 0, 0]
-        },
-        {
-            "name": "kristina2",
-            "src": "http://www.akamai.com/xxxxxxxxx/kristina2",
-            "wordscore": [0, 0, 0, 0, 8, 5, 3, 3, 8, 0, 0, 2, 10, 1, 8, 1, 0, 0]
-        }
-    ]
-}
+{
+    "mots" : [
+        "famille", "amour", "travail", "international", "dieu", "president", "actif", "passif", "corps", "charite", "patrie", "politique", "spleen", "ideal", "origines", "peur", "desir", "bonheur"
+    ],
+
+    "videos" : [
+        {
+            "name": "kristina1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/kristina-HD-01",
+            "scoreWord": [0, 0, 0, 0, 0, 0, 7, 0, 8, 0, 0, 0, 4, 0, 8, 0, 0, 0]
+        },
+        {
+            "name": "kristina2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/kristina-HD-02",
+            "scoreWord": [0, 0, 0, 0, 8, 5, 3, 3, 8, 0, 0, 2, 10, 1, 8, 1, 0, 0]
+        },
+        {
+            "name": "kristina3",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/kristina-HD-03",
+            "scoreWord": [0, 0, 10, 0, 0, 0, 7, 0, 8, 0, 0, 6, 10, 1, 0, 0, 3, 0]
+        },
+        {
+            "name": "virginie1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/virginie-HD-01",
+            "scoreWord": [1, 10, 10, 0, 9, 10, 2, 0, 0, 0, 0, 8, 0, 0, 1, 10, 1, 1]
+        },
+        {
+            "name": "jp1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/JP-HD-01",
+            "scoreWord": [10, 0, 5, 0, 0, 0, 10, 0, 5, 0, 0, 0, 0, 0, 10, 0, 0, 5]
+        },
+        {
+            "name": "jp2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/JP-HD-01",
+            "scoreWord": [10, 0, 0, 0, 0, 9, 0, 0, 0, 0, 0, 7, 0, 10, 8, 0, 0, 5]
+        },
+        {
+            "name": "didier1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/didier-HD-01",
+            "scoreWord": [3, 0, 10, 0, 0, 0, 8, 5, 5, 7, 4, 6, 5, 5, 8, 0, 0, 0]
+        },
+        {
+            "name": "denis1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/05-Jeambar-HD",
+            "scoreWord": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+        },
+        {
+            "name": "david1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/david-HD-01",
+            "scoreWord": [0, 0, 8, 0, 8, 0, 9, 0, 0, 10, 0, 0, 0, 6, 1, 0, 2, 0]
+        },
+        {
+            "name": "david2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/david-HD-02",
+            "scoreWord": [2, 0, 10, 0, 0, 7, 9, 0, 0, 10, 0, 10, 0, 7, 0, 0, 2, 0]
+        },
+        {
+            "name": "dominique1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Dominique-HD-01",
+            "scoreWord": [7, 5, 5, 0, 10, 0, 10, 0, 4, 10, 0, 5, 0, 8, 7, 0, 0, 0]
+        },
+        {
+            "name": "margot1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Margot-HD-01",
+            "scoreWord": [0, 0, 10, 0, 8, 8, 10, 0, 0, 10, 7, 10, 5, 8, 0, 7, 0, 4]
+        },
+        {
+            "name": "philippe1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Philippe-HD-01",
+            "scoreWord": [0, 0, 8, 0, 0, 0, 10, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0]
+        },
+        {
+            "name": "philippe2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Philippe-HD-02",
+            "scoreWord": [0, 0, 10, 0, 0, 8, 10, 0, 7, 0, 10, 10, 0, 5, 0, 8, 0, 0]
+        },
+        {
+            "name": "philippe3",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Philippe-HD-03",
+            "scoreWord": [0, 0, 8, 0, 0, 8, 10, 0, 3, 3, 6, 6, 0, 6, 0, 0, 0, 0]
+        },
+        {
+            "name": "corenfeld1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Corenfeld-HD-01",
+            "scoreWord": [0, 0, 10, 0, 0, 0, 10, 10, 0, 0, 0, 0, 10, 9, 2, 0, 5, 5]
+        },
+        {
+            "name": "corenfeld2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Corenfeld-HD-02",
+            "scoreWord": [0, 10, 7, 0, 0, 8, 10, 10, 0, 0, 0, 10, 10, 10, 2, 0, 9, 10]
+        },
+        {
+            "name": "cohen1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Cohen-HD-01",
+            "scoreWord": [9, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 8, 6, 0, 0]
+        },
+        {
+            "name": "cohen2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Cohen-HD-02",
+            "scoreWord": [4, 6, 5, 0, 0, 0, 0, 0, 2, 7, 0, 0, 0, 0, 5, 0, 0, 0]
+        },
+        {
+            "name": "cohen3",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Cohen-HD-03",
+            "scoreWord": [0, 0, 0, 0, 0, 0, 4, 0, 0, 5, 0, 6, 0, 7, 0, 0, 0, 0]
+        },
+        {
+            "name": "tortu1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Tortu-HD-01",
+            "scoreWord": [8, 0, 10, 8, 0, 0, 10, 0, 5, 0, 5, 4, 6, 8, 7, 0, 6, 10]
+        },
+        {
+            "name": "tortu2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Tortu-HD-02",
+            "scoreWord": [0, 0, 10, 8, 0, 0, 10, 0, 2, 0, 8, 7, 6, 8, 0, 0, 6, 10]
+        },
+        {
+            "name": "aurore1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Aurore-HD-01",
+            "scoreWord": [6, 0, 10, 8, 0, 0, 9, 0, 10, 0, 0, 0, 0, 8, 7, 0, 7, 8]
+        },
+        {
+            "name": "andre1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/andre-HD-01",
+            "scoreWord": [5, 0, 8, 6, 0, 0, 9, 0, 8, 0, 0, 10, 4, 8, 3, 0, 7, 8]
+        },
+        {
+            "name": "elodie1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/elodie-HD-01",
+            "scoreWord": [5, 8, 8, 0, 0, 0, 4, 4, 3, 0, 0, 3, 1, 9, 5, 0, 10, 7]
+        },
+        {
+            "name": "cynthia1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Cynthia-HD-01",
+            "scoreWord": [3, 5, 7, 0, 10, 5, 10, 0, 0, 7, 3, 5, 0, 7, 3, 0, 3, 5]
+        },
+        {
+            "name": "dolto1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Dolto-HD-01",
+            "scoreWord": [10, 9, 8, 0, 0, 0, 7, 0, 8, 0, 0, 0, 2, 6, 10, 4, 0, 5]
+        },
+        {
+            "name": "dolto2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Dolto-HD-02",
+            "scoreWord": [0, 0, 9, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+        },
+        {
+            "name": "dolto3",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Dolto-HD-03",
+            "scoreWord": [9, 8, 5, 0, 0, 0, 9, 0, 10, 4, 0, 0, 0, 0, 10, 5, 0, 5]
+        },
+        {
+            "name": "dolto4",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Dolto-HD-04",
+            "scoreWord": [5, 5, 2, 0, 0, 0, 9, 9, 2, 0, 0, 10, 5, 5, 9, 5, 3, 5]
+        },
+        {
+            "name": "kircher1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Kircher-HD-01",
+            "scoreWord": [0, 0, 10, 0, 0, 0, 8, 0, 6, 0, 0, 0, 0, 0, 0, 0, 4, 4]
+        },
+        {
+            "name": "kircher2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Kircher-HD-02",
+            "scoreWord": [0, 0, 3, 0, 0, 0, 7, 0, 1, 7, 0, 9, 0, 8, 0, 0, 3, 4]
+        },
+        {
+            "name": "perlman1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Perlman-HD-01",
+            "scoreWord": [8, 3, 5, 0, 0, 0, 5, 5, 0, 4, 0, 0, 4, 0, 6, 3, 0, 0]
+        },
+        {
+            "name": "perlman2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Perlman-HD-02",
+            "scoreWord": [0, 0, 7, 10, 0, 0, 9, 0, 0, 5, 7, 10, 8, 8, 0, 7, 0, 0]
+        },
+        {
+            "name": "perlman3",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Perlman-HD-03",
+            "scoreWord": [10, 9, 5, 5, 0, 0, 10, 0, 0, 10, 0, 8, 8, 9, 0, 7, 0, 0]
+        },
+        {
+            "name": "perlman4",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/Perlman-HD-04",
+            "scoreWord": [0, 0, 10, 0, 0, 0, 8, 0, 0, 7, 0, 6, 8, 9, 0, 5, 0, 0]
+        },
+        {
+            "name": "fiction1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/AIMEZ-MOI-HD",
+            "scoreWord": [7, 9, 4, 0, 0, 0, 4, 0, 10, 9, 0, 1, 4, 3, 0, 4, 3, 4]
+        },
+        {
+            "name": "fiction2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/APPELEZ-MOI-HD",
+            "scoreWord": [0, 10, 9, 0, 0, 0, 5, 5, 5, 0, 0, 1, 5, 8, 0, 0, 10, 3]
+        },
+        {
+            "name": "fiction3",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/DROIT-HD",
+            "scoreWord": [2, 0, 3, 0, 0, 0, 8, 0, 7, 0, 1, 7, 1, 2, 8, 0, 0, 0]
+        },
+        {
+            "name": "fiction4",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/ECOUTEZ-MOI-HD",
+            "scoreWord": [0, 7, 9, 0, 0, 0, 10, 1, 7, 0, 0, 7, 9, 9, 8, 9, 8, 3]
+        },
+        {
+            "name": "fiction5",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/EMBRASSEZ-MOI-HD",
+            "scoreWord": [2, 8, 1, 0, 0, 0, 1, 1, 6, 0, 0, 10, 1, 1, 0, 6, 6, 10]
+        },
+        {
+            "name": "fiction6",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/ENGAGEZ-MOI-HD",
+            "scoreWord": [0, 3, 10, 0, 0, 0, 8, 0, 7, 0, 0, 0, 8, 7, 3, 5, 3, 8]
+        },
+        {
+            "name": "fiction7",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/ENNEMI-HD",
+            "scoreWord": [0, 0, 10, 0, 0, 2, 8, 8, 7, 0, 10, 9, 10, 1, 5, 1, 0, 0]
+        },
+        {
+            "name": "fiction8",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/IDEAL-HD",
+            "scoreWord": [1, 4, 0, 5, 0, 0, 3, 0, 5, 0, 0, 3, 0, 9, 8, 0, 5, 10]
+        },
+        {
+            "name": "fiction9",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/MONDEALENVERS-HD",
+            "scoreWord": [1, 0, 0, 2, 0, 2, 0, 0, 6, 8, 0, 8, 5, 1, 4, 7, 0, 1]
+        },
+        {
+            "name": "fiction10",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/REALITE-HD",
+            "scoreWord": [10, 5, 5, 0, 0, 0, 8, 5, 3, 0, 2, 6, 5, 7, 7, 0, 0, 8]
+        },
+        {
+            "name": "fiction11",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/REVOLUTION1-HD",
+            "scoreWord": [0, 6, 0, 10, 0, 0, 2, 0, 0, 0, 0, 1, 0, 7, 8, 0, 2, 3]
+        },
+        {
+            "name": "fiction12",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/REVOLUTION2-HD",
+            "scoreWord": [3, 0, 3, 7, 10, 0, 7, 2, 6, 0, 3, 2, 8, 5, 2, 0, 0, 10]
+        },
+        {
+            "name": "definition1",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/AVENIR-HD",
+            "scoreWord": [0, 0, 9, 0, 0, 0, 7, 0, 5, 0, 0, 0, 0, 10, 0, 0, 10, 10]
+        },
+        {
+            "name": "definition2",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/LUTTE-HD",
+            "scoreWord": [0, 8, 0, 0, 0, 0, 5, 5, 0, 0, 0, 9, 0, 0, 0, 0, 0, 0]
+        },
+        {
+            "name": "definition3",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/POLITIQUE-1-HD",
+            "scoreWord": [1, 0, 2, 0, 0, 1, 1, 0, 0, 0, 1, 8, 0, 10, 0, 0, 0, 1]
+        },
+        {
+            "name": "definition4",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/POLITIQUE-2-HD",
+            "scoreWord": [0, 0, 1, 0, 0, 1, 2, 0, 0, 0, 2, 2, 0, 0, 0, 2, 0, 0]
+        },
+        {
+            "name": "definition5",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/POLITIQUE-3-HD",
+            "scoreWord": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 1, 10, 0, 0, 0, 0]
+        },
+        {
+            "name": "definition6",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/QUE1-HD",
+            "scoreWord": [0, 0, 0, 0, 0, 10, 10, 0, 0, 0, 10, 10, 0, 10, 0, 0, 10, 0]
+        },
+        {
+            "name": "definition7",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/QUE2-HD",
+            "scoreWord": [0, 0, 0, 0, 10, 10, 10, 9, 5, 0, 10, 10, 10, 0, 0, 10, 0, 0]
+        },
+        {
+            "name": "definition8",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/QUE3-HD",
+            "scoreWord": [0, 0, 0, 0, 10, 10, 10, 9, 5, 0, 10, 10, 10, 0, 0, 10, 0, 0]
+        },
+        {
+            "name": "definition9",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/QUE4-HD",
+            "scoreWord": [0, 0, 0, 0, 0, 0, 10, 0, 5, 0, 10, 10, 0, 10, 0, 0, 0, 0]
+        },
+        {
+            "name": "definition10",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/REVE-HD",
+            "scoreWord": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 10, 10]
+        },
+        {
+            "name": "definition11",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/VIE-HD",
+            "scoreWord": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0]
+        },
+        {
+            "name": "chant4",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/ZEBU-CHANT_4-HD",
+            "scoreWord": [0, 10, 0, 0, 0, 0, 0, 0, 5, 0, 0, 2, 10, 0, 5, 5, 5, 0]
+        },
+        {
+            "name": "chant5",
+            "src": "http://dvvsyrlsr21oz.cloudfront.net/IDEE-CHANT_5-HD",
+            "scoreWord": [8, 0, 0, 0, 0, 0, 9, 0, 5, 0, 0, 7, 0, 7, 7, 7, 1, 5]
+        }
+   
+    ]
+}
diff -r f7bfdc49982b -r 542252e0c615 web/transition.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/transition.html	Wed Dec 12 03:10:24 2012 +0100
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="fr">
+	<head>
+		<meta charset="utf-8">
+		<title>The End - @todo</title>
+		
+		<meta name="description" content="@todo">
+		
+		<!-- Mobile Specific Metas -->
+		<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+		
+		<link rel="stylesheet" href="static/res/css/style_1024.css" /> 
+		<!-- stylesheet for ipad 3 
+		<link rel="stylesheet" href="static/res/css/style_2048.css" /> 
+		-->
+		
+	</head>
+	<body>
+		<!-- div content - site takes the full height of browser -->			
+		<div id="content" class="full_screen">
+			<div id="theEnd">
+                <h1>THE END, ETC.</h1>
+            </div>
+			<!--this div empty allows the element content_vcentering to be vertically aligned -->
+			<div class="strut"></div><!--
+			this comment corrects the white-space (display: inline);
+			--><section id="bg_img" class="fullScreen_vcentering">
+		    	<img id="bgimage" alt="The End, etc." src="" />
+			</section>	
+			<section id="partage" class="container_vcentering">
+				<!--this div empty allows the element content_vcentering to be vertically aligned -->
+				<div class="strut"></div><!--
+				this comment corrects the white-space (display: inline);
+				--><div class="fullScreen_vcentering box_vcentering white big_txt">
+					<p><a href="partage.html">Partagez</a></p>
+					<p><a href="choix.html">Recommencez</a></p>
+					<p class="margin_exeption"><a href="niv2_hp.html">Prolongez l'expériance</a></p>
+					<p><a href="/">Crédits</a></p>
+					<p><a href="/">The End, etc.</a></p>
+				</div>
+			</section>
+		</div>
+
+		<!-- Metanav FranceTV 	-->
+		<script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
+		<!-- JavaScript -->
+        <script src="static/res/js/jquery-1.8.2.min.js"></script>        		
+        <script>
+        	var r = Math.floor(Math.random()*3);
+        	if (r == 0) {        		
+				$("#bgimage").attr("src", "static/res/img/transitionChoix1.jpg");
+        	} else if (r == 1) {        		
+				$("#bgimage").attr("src", "static/res/img/transitionChoix2.jpg");
+        	} else {
+				$("#bgimage").attr("src", "static/res/img/transitionChoix3.jpg");
+        	}
+        </script>						
+	
+	</body>
+</html>
\ No newline at end of file