diff -r 45c889eae324 -r 2c7fc855eba8 front_idill/src/mosaic/js/mosaic.js
--- a/front_idill/src/mosaic/js/mosaic.js	Fri Apr 27 14:38:23 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js	Fri May 11 11:04:06 2012 +0200
@@ -143,7 +143,9 @@
 mosaic.prototype.preZoom = function(snapshot)
 {
     if(this.fullscreen)
+	{
         return;
+	}
     //Mosaïque.
     var mosaic = this;
     //Dimensions de la mosaïque.
@@ -160,10 +162,16 @@
     
     //Si un zoom est déjà en cours, on ne zoom sur rien d'autre en attendant que ce snapshot ai dézoomé en cas de mouseleave.
     if(this.zoomed)
+	{
         if($('#preZoomContainer-' + currentId) != $(this) && this.previousZoomedSN != '' && this.previousId != '')
+		{
             this.preUnzoom();
+		}
         else
+		{
             return;
+		}
+	}
     
     //On indique qu'on a zoomé et on spécifie le snapshot sur lequel on a zoomé.
     this.zoomed = true;
@@ -195,13 +203,21 @@
         
         //CAS PARTICULIER pour la position du snapshot zoomé : les bordures.
         if(finalDivTop < 0)
+		{
             finalDivTop = -margin;
+		}
         if(finalDivTop + finalDivHeight > h)
+		{
             finalDivTop = h - finalDivHeight;
+		}
         if(finalDivLeft < 0)
+		{
             finalDivLeft = 0;
+		}
         if(finalDivLeft + finalDivWidth + margin*2 > w)
+		{
             finalDivLeft = w - finalDivWidth - margin*2;
+		}
         
         ////Code de debug.
         ////CAUTION////
@@ -234,7 +250,9 @@
     $('#prezoomContainer-' + currentId).click(function ()
     {
         if(this.previousZoomedSN != '')
+		{
             mosaic.zoom();
+		}
     });
 }
 
@@ -245,7 +263,9 @@
 {
     //Si on n'a pas zoomé, on quitte la fonction.
     if(!this.zoomed)
+	{
         return;
+	}
     
     //On spécifie la marge afin de centrer le prédézoom.
     var margin = this.marginWidth;
@@ -280,7 +300,9 @@
     
     //Si la mosaïque est en pleine écran, pas la peine de zoomer.
     if(this.fullscreen)
+	{
         return;
+	}
     
     //On prend les attributs nécessaires au calculs.
     var margin = this.marginWidth, len = this.length, imgs = this.imagesToShow;
@@ -293,7 +315,7 @@
     var initialDivTop = this.previousZoomedSN.position().top, initialDivLeft = this.previousZoomedSN.position().left;
     //Dimensions et coordonnées finales du div.
     var finalDivWidth = initialDivWidth * (this.zoomPercentage+1), finalDivHeight = initialDivHeight * (this.zoomPercentage+1);
-    var newZoomTop = -this.previousZoomedSN.position().top*(newPreMPHeight/initMPHeight) - this.zoomedMargin/2 + (initMPHeight - initMPHeight * this.zoomPercentage)/2 + 'px', newZoomLeft = -this.previousZoomedSN.position().left*(newPreMPWidth/initMPWidth) - this.zoomedMargin/2 + (initMPWidth - initMPWidth * this.zoomPercentage)/2 + 'px';
+    var newZoomTop = -this.previousZoomedSN.position().top*(newPreMPHeight/initMPHeight) - this.zoomedMargin/2 + (initMPHeight - initMPHeight * this.zoomPercentage)/2, newZoomLeft = -this.previousZoomedSN.position().left*(newPreMPWidth/initMPWidth) - this.zoomedMargin/2 + (initMPWidth - initMPWidth * this.zoomPercentage)/2;
     var newSnWidth = initMPWidth * this.zoomPercentage, newSnHeight = initMPHeight * this.zoomPercentage;
     
     this.preUnzoom(this);
@@ -336,29 +358,94 @@
         mos.centerId = zoomedImgId;
         mos.listenToNeighbours();
         mos.currentMode = 'VIDEO';
+		
+		console.log('h : ' + -newZoomLeft + " " + zoomedImg.position().left);
+		
+		mos.loadPlayer((zoomedImg.position().top + newZoomTop + mos.MPTop_margin), (zoomedImg.position().left + newZoomLeft), newSnWidth + 1, newSnHeight + 1);
+		
         /*mos.unload();
         mos.localMos.loadLocalMosaic(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, mos.imgs, tab[1]);*/
     });
 }
 
 /*
+ * Chargement du player basé sur le metadataplayer.
+*/
+mosaic.prototype.loadPlayer = function(newZoomTop, newZoomLeft, newSnWidth, newSnHeight)
+{
+	//On configure les options de lancement.
+	IriSP.libFiles.defaultDir = "../lib/";
+	IriSP.widgetsDir = "./player/metadataplayer/"
+	
+	console.log(newZoomTop + " " + newZoomLeft);
+	
+	var _metadata = {
+		url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/7c912bce-66b8-11e1-80f6-00145ea4a2be?callback=?',
+		format: 'ldt'
+	};
+	var _config = {
+		gui: {
+			width: newSnWidth,
+			height: newSnHeight,
+			container: 'LdtPlayer',
+			default_options: {
+				metadata: _metadata
+			},
+			css:'./player/metadataplayer/LdtPlayer-core.css',
+			widgets: [
+				{
+					type: "Timeline"
+				}
+			]
+		},
+		player:{
+			type: 'html5', // player type
+			video: 'http://media.iri.centrepompidou.fr/video/ldtplatform/body_trail_cctv.mp4',
+			live: true,
+			height: newSnHeight,
+			width: newSnWidth,
+			autostart: true
+		}
+	};
+	
+	//On positionne le player.
+	$('.LdtPlayer').css(
+	{
+		//display: 'none',
+		position: 'absolute',
+		'background-color': '#000000',
+		top: newZoomTop,
+		left: newZoomLeft
+	});
+	
+	//On démarre le player.
+	var _myPlayer = new IriSP.Metadataplayer(_config, _metadata);
+	console.log(_myPlayer);
+}
+
+/*
  * Retour à la taille normale de la mosaïque.
  */
 mosaic.prototype.unzoom = function()
 {
     //Si on n'est pas en plein écran, on quitte.
     if(!this.fullscreen)
+	{
         return;
+	}
     
     //On charge les attributs nécessaires aux calculs.
     var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight;
     var mpWidth = this.width, mpHeight = this.height;
     var mos = this;
     
-    //On passe le snapshot sur lequel on a zoomé en LD.
+    //On passe le snapshot sur lequel on a zoomé en SD.
     var zoomedImg = $('img', this.previousZoomedSN);
     var src = zoomedImg.attr('src');
     zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/'));
+	
+	$('div').remove('.LdtPlayer');
+	$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
     
     //On rend leur opacité aux snapshots. Qui ne sont alors plus grisés.
     $('.snapshotDivs').animate(
@@ -383,7 +470,7 @@
         //On revient en mode MOSAIC.
         mos.currentMode = 'MOSAIC';
         //On ne permet plus le déplacement vers les voisins.
-        $('.snapshotDivs').unbind('mouseenter', mos.changeNeighbourColor);
+        $('.snapshotDivs').unbind('mouseenter', mos.selectNeighbour);
     });
 }
 
@@ -409,12 +496,17 @@
     //Si le voisin du bas est sur la même colonne, on n'est pas sur la bordure du bas.
     this.neighboursIds[3] = (currentLine < (this.imagesToShow / this.length)) ? (+this.centerId + this.length) : -1;
     
+	//ID du cadre voisin.
+	var preId;
+	
     for(var i = 0 ; i < this.neighboursIds.length ; i++)
     {
         if(this.neighboursIds[i] != -1)
-        {
+        {
+			preId = '#neighbourFrameBorder-' + this.neighboursIds[i];
             //On permet le déplacement vers les voisins.
-            $('#snapshotDiv-' + this.neighboursIds[i]).mouseenter(mos.changeNeighbourColor);
+            // $('#snapshotDiv-' + this.neighboursIds[i] + ', ' + preId + '-left,' + preId + '-right,' + preId + '-up,' + preId + '-down').mouseenter(mos.selectNeighbour);
+            $('#snapshotDiv-' + this.neighboursIds[i]).mouseenter(mos.selectNeighbour);
         }
     }
 }
@@ -422,7 +514,7 @@
 /*
  * Change la coloration d'une bordure où on se positionne lors d'une vue en plein écran.
  */
-mosaic.prototype.changeNeighbourColor = function()
+mosaic.prototype.selectNeighbour = function()
 {
     ////TEST
     //$('.test').append(mos.currentMode + " " + $(this).attr('id') + " " + 'snapshotDiv-' + mos.centerId + ',');
@@ -430,47 +522,89 @@
     //Si on est en mode VIDEO (plein écran) ET si le snapshot pointé est un voisin.
     if((mos.currentMode == 'VIDEO') && ($(this).attr('id') != 'snapshotDiv-' + mos.centerId))
     {
-        //On crée le div cyan qui va être superposé au voisin.
-        var cyanDiv = '<div class="cyan" id="cyan-' + $(this).attr('id') + '"></div>';
+        //On crée le cadre qui va être superposé au voisin.
         //On le colle au voisin.
-        $('#mainPanel').append(cyanDiv);
-        $('#cyan-' + $(this).attr('id')).css('top', $(this).position().top).css('left', $(this).position().left).css('width', $(this).width()).css('height', $(this).height()).css('margin', $(this).css('margin')).animate(
+		var tab = $(this).attr('id').split('-');
+		var snapshotId = tab[1];
+        var neighbourFrame = '';
+		var marginValue = parseFloat($(this).css('margin'));
+		
+		neighbourFrame += '<div class="neighbourFrame" id="neighbourFrame-' + snapshotId + '"><div class="neighbourImgBg" id="neighbourImgBg-' + snapshotId + '"><div class="neighbourImg" id="neighbourImg-' + snapshotId + '"></div></div></div>';
+		
+        $('#mainPanel').append(neighbourFrame);
+		
+		//On positionne le div de background juste au niveau du voisin.
+        $('#neighbourFrame-' + snapshotId).css(
+		{
+			'top': (+$(this).position().top + marginValue),
+			'left': (+$(this).position().left + marginValue),
+			'width': $(this).width(),
+			'height': $(this).height()
+		});
+		//On positionne le div de background noir juste au niveau de l'image du voisin.
+        $('#neighbourImgBg-' + snapshotId).css(
+		{
+			'top': marginValue,
+			'left': marginValue,
+			'width': $(this).width() - marginValue*2,
+			'height': $(this).height() - marginValue*2,
+		});
+		//On met par dessus le div de l'image clonée du voisin.
+		$('#neighbourImg-' + snapshotId).css(
+		{
+			'top': 0,
+			'left': 0,
+			'width': $(this).width() - marginValue*2,
+			'height': $(this).height() - marginValue*2,
+			'background-image': 'url(' + $('img', $(this)).attr('src') + ')',
+			'background-size': $(this).width() + 'px ' + $(this).height() + 'px',
+			'background-position': -marginValue + 'px ' + -marginValue + 'px',
+			'opacity': '0.4'
+		});
+		
+		var fId = '#neighbourFrame-' + snapshotId;
+		
+		$(fId).animate(
         {
             //On le fait apparaître.
-            opacity: '0.4'
-        }, timeNeighbourUnglowing, function()
+            opacity: '1'
+        }, timeNeighbourGlowing, function()
         {
             //On peut désormais se déplacer vers ce voisin.
             mos.canMoveToNeighbour = true;
-        }).mouseleave(mos.unchangeNeighbourColor).click(mos.moveToNeighbour);
+        });
+		//Lorsqu'on quitte un des snapshots (bien entendu le voisin en question), on retire le cadre.
+		$(fId).mouseleave(mos.deselectNeighbour)
+		//Si on clique sur le voisin ou son cadre, on passe au voisin suivant.
+		$(fId).click(mos.moveToNeighbour);
     }
 }
 
 /*
  * Change la coloration d'une bordure quittée lors d'une vue en plein écran.
  */
-mosaic.prototype.unchangeNeighbourColor = function()
+mosaic.prototype.deselectNeighbour = function()
 {
     ////TEST
     //$('.test').append('un,');
-    
+	
     //On ne peut plus se déplacer vers les voisins.
     mos.canMoveToNeighbour = false;
-    
+    
+	//On récupère le voisin.
+	var neighbourFrame = $(this);
+	
     //Si on est en mode VIDEO.
     if(mos.currentMode == 'VIDEO')
     {
-        //On obtient le div de coloration superposé au voisin.
-        var cyanDiv = $(this);
-        
         //On le fait disparaître progressivement.
-        $(this).animate(
+        neighbourFrame.animate(
         {
             opacity: '0'
-        }, timeNeighbourGlowing, function()
+        }, timeNeighbourUnglowing, function()
         {
             //Une fois invisible, on le supprime.
-            cyanDiv.remove();
+            neighbourFrame.remove();
         });
     }
 }
@@ -482,45 +616,50 @@
 {
     //Si on ne peut pas se déplacer vers les voisins, on quitte.
     if(!mos.canMoveToNeighbour)
+	{
         return;
+	}
     
     //On obtient l'ID de destination.
     var tab = $(this).attr('id').split('-');
-    var destinationId = tab[2];
+    var destinationId = tab[1];
     
     //On charge les attributs nécessaires aux calculs.
     var MPCurrentTop = $('#mainPanel').position().top, MPCurrentLeft = $('#mainPanel').position().left;
     var divideCoeffTop = Math.floor(destinationId / mos.length) == 0 ? 1 : Math.floor(destinationId / mos.length);
     var divideCoeffLeft = destinationId % mos.length == 0 ? 1 : destinationId % mos.length;
-    var cyanTop = $(this).position().top, cyanLeft = $(this).position().left;
+    var neighbourFrameTop = $('#snapshotDiv-' + destinationId).position().top, neighbourFrameLeft = $('#snapshotDiv-' + destinationId).position().left;
     
     //On définit pour le déplacement vertical s'il est nécessaire de se déplacer en haut ou en bas.
-    if(mos.previousZoomedSN.position().top > cyanTop)
-        MPCurrentTop += Math.abs(cyanTop - mos.previousZoomedSN.position().top);
-    else if(mos.previousZoomedSN.position().top < cyanTop)
-        MPCurrentTop -= Math.abs(cyanTop - mos.previousZoomedSN.position().top);
+    if(mos.previousZoomedSN.position().top > neighbourFrameTop)
+        MPCurrentTop += Math.abs(neighbourFrameTop - mos.previousZoomedSN.position().top);
+    else if(mos.previousZoomedSN.position().top < neighbourFrameTop)
+        MPCurrentTop -= Math.abs(neighbourFrameTop - mos.previousZoomedSN.position().top);
     //On définit pour le déplacement horizontal s'il est nécessaire de se déplacer à gauche ou à droite.
-    if(mos.previousZoomedSN.position().left > cyanLeft)
-        MPCurrentLeft += Math.abs(cyanLeft - mos.previousZoomedSN.position().left);
-    else if(mos.previousZoomedSN.position().left < cyanLeft)
-        MPCurrentLeft -= Math.abs(cyanLeft - mos.previousZoomedSN.position().left);
+    if(mos.previousZoomedSN.position().left > neighbourFrameLeft)
+        MPCurrentLeft += Math.abs(neighbourFrameLeft - mos.previousZoomedSN.position().left);
+    else if(mos.previousZoomedSN.position().left < neighbourFrameLeft)
+        MPCurrentLeft -= Math.abs(neighbourFrameLeft - mos.previousZoomedSN.position().left);
     
     //On passe le snapshot de destination en HD.
     var destinationImg = $('#snapshot-' + destinationId);
     var destinationImgSrc = destinationImg.attr('src');
     destinationImg.attr('src', destinationImgSrc.replace('snapshots-little/', 'snapshots/'));
     
-    //On passe l'ancien snapshot en LD.
+    //On passe l'ancien snapshot en SD.
     var currentImgSrc = $('img', mos.previousZoomedSN).attr('src');
     $('img', mos.previousZoomedSN).attr('src', currentImgSrc.replace('snapshots/', 'snapshots-little/'));
     
     //On obtient l'ID du div de coloration du snapshot vers lequel on se déplace afin de le supprimer.
-    var cyan = $(this);
-    var tab = cyan.attr('id').split('-');
-    mos.centerId = tab[2];
+    var neighbourFrame = $(this);
+    var tab = neighbourFrame.attr('id').split('-');
+    mos.centerId = tab[1];
     $(this).css('opacity', '0');
-    cyan.remove();
-    
+    neighbourFrame.remove();
+    
+	$('div').remove('.LdtPlayer');
+	$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
+	
     //On grise le snapshot qu'on vient de quitter.
     mos.previousZoomedSN.animate(
     {
@@ -541,9 +680,11 @@
         }, mos.zoomTime, function()
         {
             //On recharge les voisins.
-            $('.snapshotDivs').unbind('mouseenter', mos.changeNeighbourColor);
+            $('.snapshotDivs').unbind('mouseenter', mos.selectNeighbour);
             mos.previousZoomedSN = $('#snapshotDiv-' + mos.centerId);
             mos.listenToNeighbours();
+			
+			mos.loadPlayer((destinationImg.position().top + MPCurrentTop + mos.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height());
         });
     });
 }