--- a/web/static/res/css/style_1024.css	Mon Jan 21 21:00:24 2013 +0100
+++ b/web/static/res/css/style_1024.css	Mon Jan 21 21:04:36 2013 +0100
@@ -593,7 +593,7 @@
 /*----------------------------------------------*/
 #blanket {
 	background-color: #000000;
-	opacity: 0.8;
+	opacity: 0.88;
 	position:absolute;
 	z-index: 500;
 	top:28px;
@@ -610,6 +610,7 @@
 	z-index: 501;
 }
 #popUpTitle {
+	position: relative;
 	text-align: center;
 	margin: 0.7em 0 1.4em 0;
 } 
@@ -617,30 +618,38 @@
 	overflow: auto;
 	height: 85%; 
 }
-#popUpDiv h3{
+#popUpDiv h2{
 	display: inline-block;
-	margin: 0 1em;
+	margin: 0 1.5em 0 0.5em;
+	font-family: "Arial Black", "arial_blackregular", sans-serif;  
+	color: #ffffff;
+	line-height: 1.2;
 }
 #popUpDiv h4{
+	font-family: "Arial Black", "arial_blackregular", sans-serif;  
 	margin: 1.1em 0;
 	color: #acacac;
 }
 #popUpDiv p{
-	color: #acacac;
-	line-height: 1.3em;
+	line-height: 1.5;
 }
 #popUpDiv p:first-child,
 #popUpDiv p:last-child {
 	margin-top: 0;
 	margin-bottom: 0;
 }
+
+#popUpTxtScroll .gris {
+	color: #9b9a9a;;
+}
 #popUpTxtScroll p,
-#popUpTxtScroll h4 {
+#popUpTxtScroll h3 {
 	margin-right: 7%; 
 }
 #popUpClose {
-	display: block;
-	float: right;
+	position: absolute;
+	top : 0;
+	right: 0;
 	width: 14px;
 	height: 14px;
 }
@@ -706,15 +715,15 @@
 .blue a,
 .blue a:link,
 .blue a:visited,
-.blue a:active {
+.blue a:active,
+.blue a:focus {
 	color: #010cfe;	
 	-webkit-transition: color 0.6s linear;
     -moz-transition: color 0.6s linear;
     -o-transition: color 0.6s linear;    
     transition: color 0.6s linear;
 }
-.blue a:hover,
-.blue a:focus {
+.blue a:hover {
 	color: #ffffff;
 }
 .whiteN a,
@@ -810,13 +819,26 @@
 	margin: 0 auto;
 	display: block;
 }
-.btnReturn {
+.boxReturn {
 	position: absolute;
+	height: 20px;
+	width: 18px;
 	top: 28px;
 	left: 0;
 	padding: 25px 18px;
 	z-index: 999;
 }
+.btnReturn {
+	background: transparent url(../img/btn_return.png) no-repeat top left;
+    width: 18px;
+    height: 20px;
+    text-indent: -9999em;
+    vertical-align: top;
+}
+.btnReturn:hover,
+.btnReturn:focus {
+    background-position: 0 -20px;
+}
 /*----------------------------------------------*/
 /*	Credit			*/
 /*----------------------------------------------*/
@@ -881,7 +903,6 @@
 	font-family: Arial, "arialregular", Helvetica, sans-serif;
 	font-size: 11px;
 	margin-right: 30px;
-
 }	
 .boxAudio {
 	text-align: left; 
@@ -1274,26 +1295,45 @@
 /*----------------------------------------------*/
 	/* la taille du texte choix (plus petit) */
 @media only screen and (max-width: 900px) {
-	#inter_choice .big_txt p {
+	#inter_choice .big_txt p,
+	#choice .big_txt p,
+	#transitionTxt .big_txt p,
+	#menuBonus .big_txt p,
+	#playerAudio .big_txt p + p {
 		font-size: 39px;
 	}
-	#choice .big_txt p,
-	#transitionTxt .big_txt p {
-		font-size: 39px;
+	#content .small_txt p {
+		font-size: 19px;
+	}
+	.boxAudio {
+		width: 540px;
 	}
 }	
 
 @media only screen and (max-width: 700px) {
-	#inter_choice .big_txt p {
-		font-size: 28px;
-	}
+	#inter_choice .big_txt p,
 	#choice .big_txt p,
-	#transitionTxt .big_txt p {
+	#transitionTxt .big_txt p,
+	#menuBonus .big_txt p,
+	#playerAudio .big_txt p + p {
 		font-size: 28px;
 	}
 	#theEnd h1 {
 		font-size: 50px;
 	}
+	#content .small_txt p {
+		font-size: 12px;
+	}
+	.btnPlayPause {
+		-webkit-transform: scale(0.5);
+		-moz-transform: scale(0.5);
+		-o-transform: scale(0.5);
+		transform: scale(0.5);
+	    margin-right: 0; 
+	}
+	.boxAudio {
+		width: 400px;
+	}
 }	
 @media only screen and (max-width: 756px) {
 		
@@ -1303,11 +1343,10 @@
 }
 
 @media only screen and (max-width: 480px) {
-	#inter_choice .big_txt p {
-		font-size: 22px;
-	}
 	#choice .big_txt p,
-	#transitionTxt .big_txt p  {
+	#transitionTxt .big_txt p,
+	#menuBonus .big_txt p,
+	#playerAudio .big_txt p + p   {
 		font-size: 22px;
 	}
 	#inter_choice .big_txt p {
@@ -1316,6 +1355,13 @@
 	#theEnd h1 {
 		font-size: 40px;
 	}
+	#content .small_txt p {
+		font-size: 10px;
+	}
+	.boxAudio {
+		width: 340px;
+	}
+
 	/* la taille du texte (plus petit) */
 	footer ul {
 		font-size: 8px;
@@ -1350,6 +1396,9 @@
 		width: 18px;
 		height: 18px;
 	}
+	#content h2 {
+		font-size: 20px;
+	}
 	#content h3 {
 		font-size: 14px;
 	}
@@ -1381,6 +1430,7 @@
 		width: 10px;
 		height: 10px;
 	}
+
 }
 
 
@@ -1453,89 +1503,4 @@
 	#mobilhp footer #socialMedia {
 		margin-top: 0; 
 	}
-}
-/*
-	footer .logo_partners {
-		margin-bottom: 0; 
-	}
-	footer #socialMedia {
-		margin-top: 10px; 
-	}
-
-
-	.logo_partners {
-	float: none;
-	}
-	footer #socialMedia {
-	margin-top: 34px;
-	}
-
-	.hiddenPhone {
-		display: none !important;
-	}
-@media only screen and (max-width: 850px) {
-	#choice .big_txt p,
-	#transitionTxt .big_txt p {
-		font-size: 41px;
-	}
-}
-@media only screen and (max-width: 740px) {
-	#choice .big_txt p,
-	#transitionTxt .big_txt p {
-		font-size: 30px;
-	}
-}
-@media only screen and (max-width: 550px) {
-	#choice .big_txt p,
-	#transitionTxt .big_txt p {
-		font-size: 20px;
-	}
-}
-@media only screen and (min-width: 1200px) {
-
-}*/
-
-
-/*
-display: none;
-float: none;
-
-@-o-viewport {
-  width: device-width;
-  max-zoom: 1.0;
-  min-zoom: 1.0;
-  user-zoom: fixed;
-}
-
-html {
-	position: relative;
-	overflow: hidden;
-}
-body {
-	position: relative;
-	overflow: hidden;
-
-@media only screen and (max-height: 650px) and (min-height: 501px){
-	#choice .big_txt p {
-		font-size: 40px;
-	}
-}
-@media only screen and (max-height: 500px) and (min-height: 351px){
-	#choice .big_txt p {
-		font-size: 30px;
-	}
-}
-@media only screen and (max-height: 350px){
-	#choice .big_txt p {
-		font-size: 20px;
-	}
-}
-*/
-
-
-@media only screen and (device-width: 768px) and (orientation: portrait) {
-  /* rules for iPad in landscape orientation */
-}
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
-  /* iPhone, Android rules here */
 }
\ No newline at end of file

--- a/web/static/res/css/style_2048.css	Mon Jan 21 21:00:24 2013 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,1 +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: 86px;	color: #ffffff;}h2 {	font-family: Arial, sans-serif;  	font-size: 48px;	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;	color: aqua;	}a:hover,a:focus {	color: aqua;	}	/* 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;}/*----------------------------------------------*//*	4- Main				*//*----------------------------------------------*/#content {	height: 100%;	position: absolute;	top: 28px;  /* the height of the bar metanav FranceTV */	bottom: 0;	left: 0;	right: 0;}header {	height: 40%;}#title {	text-align : center;	margin: 22px 0 22px -26px; /* 53px */	text-transform: uppercase;}#title h1 {    margin: -1px 0 10px 0;}#title h2.h2_exeption {	font-size: 51px;	margin-left: -340px; /* 86px */}section {	height: 50%;}#canvas {	background-color: red;	width: 98%;	height: 50%;	margin: 5px auto;}footer {	height: 10%;}footer p {	color: #ffffff;}/*----------------------------------------------*//*	5- Video				*//*----------------------------------------------*//*----------------------------------------------*//*	6- Controls				*//*----------------------------------------------*//*----------------------------------------------*//*	9- Footer				*//*----------------------------------------------*/
\ No newline at end of file

Binary file web/static/res/img/btn_return.png has changed

Binary file web/static/res/img/ctrlback.jpg has changed

Binary file web/static/res/img/ctrlbackover.jpg has changed

Binary file web/static/res/img/ctrlfullscreen.jpg has changed

Binary file web/static/res/img/ctrlfullscreenover.jpg has changed

Binary file web/static/res/img/ctrlhd.jpg has changed

Binary file web/static/res/img/ctrlhdover.jpg has changed

Binary file web/static/res/img/ctrlnext.jpg has changed

Binary file web/static/res/img/ctrlnextover.jpg has changed

Binary file web/static/res/img/ctrlpause.jpg has changed

Binary file web/static/res/img/ctrlpauseover.jpg has changed

Binary file web/static/res/img/ctrlplay.jpg has changed

Binary file web/static/res/img/ctrlplayover.jpg has changed

Binary file web/static/res/img/player_btn.png has changed

Binary file web/static/res/img/poster1_video.png has changed

Binary file web/static/res/img/poster2_video.png has changed

Binary file web/static/res/img/poster3_video.png has changed

Binary file web/static/res/img/poster_ba.jpg has changed

Binary file web/static/res/img/poster_ba1.jpg has changed

Binary file web/static/res/img/poster_prologue.jpg has changed

Binary file web/static/res/img/poster_prologue.png has changed

Binary file web/static/res/img/transitionChoix2a.jpg has changed

--- a/web/static/res/js/audio.js	Mon Jan 21 21:00:24 2013 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,19 +0,0 @@
-        	
-			// Grab a handle to the video
-			var audio = document.getElementsByTagName('audio');
-			// Turn off the default controls
-			audio.controls = false;	
-        	
-/* function togglePlayPause() {
-   var playpause = document.getElementById("playpause");
-   if (video.paused || video.ended) {
-      playpause.title = "pause";
-      playpause.innerHTML = "pause";
-      video.play();
-   }
-   else {
-      playpause.title = "play";
-      playpause.innerHTML = "play";
-      video.pause();
-   }
-}*/
\ No newline at end of file

--- a/web/static/res/js/incchoice.js	Mon Jan 21 21:00:24 2013 +0100
+++ b/web/static/res/js/incchoice.js	Mon Jan 21 21:04:36 2013 +0100
@@ -18,7 +18,7 @@
 	// Words display
 	//----------------------------------------------------------------------------------------------------------------------------	
 
-	this.setMosaicImages = function(images1, images2, images3)
+	this.setMosaicImages = function(images1, images2, images3, postFirstImageCallback)
 	{
 		// Choose 2 image for the effect
 		this.image1 = images1[incMosaic.randomInt(0, images1.length)];
@@ -29,7 +29,7 @@
 	    incMosaic.addImageUrl("static/res/img/" + this.image2);
 	    incMosaic.addImageUrl("static/res/img/" + this.image3);
 
-	    incMosaic.start("mosaic", effectSpeed, 9, 5, true, true, function() {incChoice.effectIsDone();});		
+	    incMosaic.start("mosaic", effectSpeed, 9, 5, true, true, function() {incChoice.effectIsDone();}, postFirstImageCallback);		
 	};
 
 	this.setWordsAndEffect = function(choiceIndex)
@@ -104,7 +104,7 @@
 
 		if (this.currentWorldIndex == 3) {
 			// The 3 words get choosen
-			location.href = "niv1_videoplayer.html";
+			location.href = "film-aleatoire-the-end-etc.html";
 		} else {
 			
 			// Start the mosaic effect
@@ -270,36 +270,50 @@
 
 	this.createShareUrl = function(index1, index2, index3)
 	{
-		var index = this.getChoosenWords();		
-		var param = ((index[0] << 16) | (index[1] << 8) | index[2]) << 4;
+		var index = this.getChosenVideos();
+		var code = 	index[0] + index[2]	
+		var param = (index[0] << 24) | (index[1] << 16) | (index[2] << 8) | code;
 		var urlBase = document.URL;
+		urlBase = urlBase.replace("partage-du-film-aleatoire-the-end-etc", "film-aleatoire-the-end-etc");
 		var url = urlBase + "?" + param;
+		
 		return url;
 	}
 
 	this.readUrlVideosIndex = function()
 	{
 		var query = window.location.search.substring(1);
-		if (query.length < 0) {
-			return;
+		if (query.length == 0) {
+			return [];
 		}
+		return this.decodeUrlIndex(query);
+	};
 
+	this.decodeUrlIndex = function(query)
+	{
 		var number = parseInt(query);
 
-		number >>= 4;
+		var code = number & 255; 
+		number >>= 8;
 		var index3 = number & 255; 
 		number >>= 8;
 		var index2 = number & 255; 
 		number >>= 8;
 		var index1 = number & 255;
 
-		var maxVideoIndex = this.allSequencesData.videos.length - 1;
-		if (index1 > maxVideoIndex || index2 > maxVideoIndex || index3 > maxVideoIndex) {
+		if (code != index1 + index3) {
 			return [];
 		}
 
+		if (typeof( incPlayer ) != "undefined") {
+			var maxVideoIndex = incPlayer.allSequencesData.videos.length - 1;
+			if (index1 > maxVideoIndex || index2 > maxVideoIndex || index3 > maxVideoIndex) {
+				return [];
+			}
+		}
+
 		return [index1, index2, index3]; 
-	};				
+	}				
 
 	//----------------------------------------------------------------------------------------------------------------------------
 	// Cookies tools

--- a/web/static/res/js/incmosaic.js	Mon Jan 21 21:00:24 2013 +0100
+++ b/web/static/res/js/incmosaic.js	Mon Jan 21 21:04:36 2013 +0100
@@ -15,8 +15,10 @@
 	this.listeUrls = [];	// The images list to blend
 	this.pairImages = [];
 	this.imagesLoaded = 0;
+	this.imageLoadedIndex = -1;
 	this.imageWidth;
 	this.imageHeight;
+	this.postFirstImageCallback;
 
 	// Effect
 	this.waitStartEffectTime = 3000;
@@ -45,7 +47,7 @@
 		this.imageUrls.push(url);
 	};
 
-	this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc)
+	this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc, postFirstImageCallback)
 	{
 		// Canvas ID
 		this.canvasId = canvasId;
@@ -64,6 +66,9 @@
 		// Does the effect wait for go
 		this.waitStartEffectGo = waitStartEffectGo;
 
+		// callback to call after the load of the first image
+		this.postFirstImageCallback = postFirstImageCallback;
+
 		// Init the canvas objects
 		this.init();
 
@@ -150,13 +155,13 @@
 
 		if (this.pairImages.length == 0) {
 			this.imagesLoaded = 0;
-			this.pairImages.push(this.getImageFromUrl(this.listeUrls[0]));
-			this.pairImages.push(this.getImageFromUrl(this.listeUrls[1]));
+			this.pairImages.push(this.getImageFromUrl(this.listeUrls[0], 0));
+			this.pairImages.push(this.getImageFromUrl(this.listeUrls[1], 1));
 			this.listeUrls.remove(0);
 		} else {
 			this.imagesLoaded = 1;
 			this.pairImages[0] = this.pairImages[1]; // Swap
-			this.pairImages[1] = this.getImageFromUrl(this.listeUrls[0])
+			this.pairImages[1] = this.getImageFromUrl(this.listeUrls[0], 999)
 		}
 		this.listeUrls.remove(0);
 
@@ -180,15 +185,30 @@
 	{
 		var self = incMosaic;
 
-		if (self.imagesLoaded == 2) {
+		if (self.imagesLoaded === 2) {
 			// Redraw
 			self.redraw();
+		} else if (self.imageLoadedIndex === 0) {
+			// Draw first image
+			self.drawFirstImage();
+			self.imageLoadedIndex = -1;
 		}
 
 		// Loop
 		requestAnimationFrame(self.loopCallback);
 	};
 
+	this.drawFirstImage = function()
+	{
+		// Draw the first image
+		this.ctx.drawImage(this.pairImages[0], 0, 0, this.srcSquareWidth*this.squareCountX, this.srcSquareHeight*this.squareCountY, 0, 0, this.squareWidth*this.squareCountX, this.squareHeight*this.squareCountY);
+
+		if (this.postFirstImageCallback !== null) {
+			this.postFirstImageCallback();
+			this.postFirstImageCallback = null;
+		}
+	};
+
 	this.redraw = function()
 	{
 		// Get time
@@ -196,8 +216,7 @@
 
 		var timeToWait = (this.startTime + this.waitStartEffectTime)*this.effectSpeed;
 		if (time < timeToWait || this.waitStartEffectGo) {
-			// Draw the first image
-			this.ctx.drawImage(this.pairImages[0], 0, 0, this.srcSquareWidth*this.squareCountX, this.srcSquareHeight*this.squareCountY, 0, 0, this.squareWidth*this.squareCountX, this.squareHeight*this.squareCountY);
+			this.drawFirstImage();
 			return;
 		}
 
@@ -310,13 +329,19 @@
 		return Math.random() * (max - min) + min;
 	};
 
-	this.getImageFromUrl = function(url)
+	this.getImageFromUrl = function(url, index)
 	{
 		var self = incMosaic;
 		var image = new Image();
+		var ind = index;
+
 		image.onload = function() {
+
+			self.imageLoadedIndex = ind;
+
 			// When the first image is loaded we can get the image dimention and init the autoresize of the canvas
 			if (self.imagesLoaded === 0) {
+
 				// Set some image size related vars
 				self.imageWidth = image.width;
 				self.imageHeight = image.height;

--- a/web/static/res/js/incplayer.js	Mon Jan 21 21:00:24 2013 +0100
+++ b/web/static/res/js/incplayer.js	Mon Jan 21 21:04:36 2013 +0100
@@ -97,7 +97,7 @@
 		}		
 	};
 
-	this.createPopSequence = function(words, videosIndex)
+	this.createPopSequence = function(words, videosIndex, paramIndex)
 	{
 		if (!this.initDone) {
 			this.loge("incplayer not initialized");
@@ -108,7 +108,7 @@
 		this.destroySequence();
 
 		// Choose the 3 videos
-		this.choosePopSequence(words, videosIndex);
+		this.choosePopSequence(words, videosIndex, paramIndex);
 
 		// And init the popcorn sequence
 		this.initPopSequence();
@@ -117,18 +117,23 @@
 	this.playSingleVideo = function(videoUrl)
 	{
 		this.sequences = [];
+		this.singleVideo = true;
        	var video = { name : "xxx", src: videoUrl, in: 0, out: "1.44" };
        	this.sequences.push(video);
        	this.formatPopSequence();
 		this.initPopSequence();
-		this.singleVideo = true;
 	}
 
-	this.choosePopSequence = function(wordsIndex, videosIndex)
+	this.choosePopSequence = function(wordsIndex, videosIndex, paramIndex)
 	{
 		this.sequences = [];
 
-		if (videosIndex.length == 3) {
+		if (paramIndex.length == 3) {
+			// This is a shared link, we get the videos index from the url
+			for (var i = 0; i < paramIndex.length; ++i) {
+				this.sequences.push(this.allSequencesData.videos[paramIndex[i]]);		
+			}
+		} else if (videosIndex.length == 3) {
 			// The player got reloded, we use the previously choosen videos
 			for (var i = 0; i < videosIndex.length; ++i) {
 				this.sequences.push(this.allSequencesData.videos[videosIndex[i]]);		
@@ -185,7 +190,7 @@
 			}
 
 			// Extention
-			v.src += "." + /*this.videoExt*/ "mp4"; // TODO
+			v.src += "." + this.videoExt;
 
 			// Set the final file
 			this.sequences[i] = v;
@@ -356,6 +361,11 @@
 			// Hide controls
 			pop.controls(false);
 
+			// Add poster on ipad
+			if (self.ipad && !this.singleVideo) {
+				$(pop.media).attr('poster', 'static/res/img/poster' + (i + 1) + '_video.png');
+			}
+
 			// Play event
 			self.listenEvent(pop, "playing", false, i, function(index) {
 				self.displayPlayButton(false);

--- a/web/static/res/js/popUp.js	Mon Jan 21 21:00:24 2013 +0100
+++ b/web/static/res/js/popUp.js	Mon Jan 21 21:04:36 2013 +0100
@@ -6,6 +6,7 @@
 }
 
 var popupOn = false;
+var playOnClose = false;
 function popupPosition(windowname, contantId)
 {
 	if (!popupOn) {
@@ -32,4 +33,17 @@
 	popupPosition(windowname, contantId);
 	toggle('blanket');
 	toggle(windowname);
-}
\ No newline at end of file
+}
+
+function openClosePopup() {
+	if (popupOn) {
+		if (!incPlayer.popSeq.playing && playOnClose) {
+			incPlayer.ctrlPlay();
+			playOnClose = false;
+		}
+	} else if (incPlayer.popSeq.playing) {
+		incPlayer.ctrlPlay();
+		playOnClose = true;
+	}
+	popup('popUpDiv', 'content');
+}