diff -r 2c7fc855eba8 -r 4003f84cd349 front_idill/src/mosaic/js/mosaic.js
--- a/front_idill/src/mosaic/js/mosaic.js	Fri May 11 11:04:06 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js	Mon May 14 17:20:35 2012 +0200
@@ -32,6 +32,7 @@
         //Nombre d'images dans la mosaïque.
         this.imagesToShow = imgToShow;
         //Tableaux des urls des vidéos, des snapshots et de leur position dans la mosaïque.
+        this.videos = [];
         this.urls = [];
         this.imgs = [];
         this.ids = [];
@@ -78,6 +79,10 @@
         this.neighboursIds = [];
         //ID du snapshot du milieu lors d'un zoom.
         this.centerId;
+		
+		this.player;
+		
+		this.loadFromJson('./player/json/videos.json');
     }
     else
     {
@@ -106,20 +111,30 @@
         }
     }
     
+	console.log(this.imagesToShow);
+	
     return str;
 }
 
 /*
  * Permet de raffraichir la mosaïque.
  */
-mosaic.prototype.loadMosaic = function(imgsTab)
+mosaic.prototype.loadMosaic = function()
 {
+	var createMosaic = this.createMosaic();
+	
+	if(createMosaic == '')
+	{
+		return;
+	}
+	
+	var _this = this;
+	
     //On affecte les chemins vers les images à la mosaïque.
-    this.imgs = imgsTab;
     this.previousZoomedSN;
     //this.width = 
     //On met à jour la mosaïque.
-    $('#mainPanel').html(this.createMosaic());
+    $('#mainPanel').html(createMosaic);
     //On récupère la taille des bordures.
     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
     this.marginWidth = parseFloat(mos.marginWidth)*2;
@@ -134,6 +149,20 @@
     //On centre verticalement la mosaïque.
     this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
     $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
+	
+	$('.snapshotDivs').mouseenter(function ()
+	{
+		//On effectue un prézoom dès qu'on va sur une image.
+		_this.preZoom($(this));
+	});
+	$('body').keypress(function (event)
+	{
+		//Si on a appuié sur la touche 'q' ou 'Q';
+		if(event.which == 113 || event.which == 81)
+		{
+		   _this.unzoom();
+		}
+	});
 }
 
 /*
@@ -377,10 +406,15 @@
 	IriSP.libFiles.defaultDir = "../lib/";
 	IriSP.widgetsDir = "./player/metadataplayer/"
 	
+	var videoToPlay = this.videos[this.centerId];
+	var currentMetadata = this.urls[this.centerId];
+	console.log('VIDEO[' + this.centerId + '] : ' + videoToPlay);
+	console.log('MD[' + this.centerId + '] : ' + currentMetadata);
+	
 	console.log(newZoomTop + " " + newZoomLeft);
 	
 	var _metadata = {
-		url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/7c912bce-66b8-11e1-80f6-00145ea4a2be?callback=?',
+		url: currentMetadata,
 		format: 'ldt'
 	};
 	var _config = {
@@ -400,7 +434,7 @@
 		},
 		player:{
 			type: 'html5', // player type
-			video: 'http://media.iri.centrepompidou.fr/video/ldtplatform/body_trail_cctv.mp4',
+			video: videoToPlay,
 			live: true,
 			height: newSnHeight,
 			width: newSnWidth,
@@ -419,8 +453,8 @@
 	});
 	
 	//On démarre le player.
-	var _myPlayer = new IriSP.Metadataplayer(_config, _metadata);
-	console.log(_myPlayer);
+	this.player = null;
+	this.player = new IriSP.Metadataplayer(_config, _metadata);
 }
 
 /*
@@ -556,7 +590,7 @@
 			'left': 0,
 			'width': $(this).width() - marginValue*2,
 			'height': $(this).height() - marginValue*2,
-			'background-image': 'url(' + $('img', $(this)).attr('src') + ')',
+			'background-image': 'url("' + $('img', $(this)).attr('src') + '")',
 			'background-size': $(this).width() + 'px ' + $(this).height() + 'px',
 			'background-position': -marginValue + 'px ' + -marginValue + 'px',
 			'opacity': '0.4'
@@ -734,4 +768,48 @@
         }
     }
     return true;
+}
+
+/*
+ * Charge les vidéos, les snapshots et les annotations depuis un fichier json.
+*/
+mosaic.prototype.loadFromJson = function(path)
+{
+	var _this = this;
+
+	$.getJSON(path, function(data)
+	{
+		$.each(data, function(key, val)
+		{
+			// console.log(val);
+			$.each(val, function(key_video, val_video)
+			{
+				$.getJSON(val_video.metadata, function(meta)
+				{
+					_this.affectVideoById(val_video.metadata, meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
+					//console.log(meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
+				});
+				
+				_this.imgs.push(val_video.snapshot);
+				_this.urls.push(val_video.metadata);
+			});
+		});
+		console.log('rdy');
+		_this.loadMosaic();
+	});
+}
+
+/*
+ * Affecte une vidéo au tableau des vidéos selon son id
+*/
+mosaic.prototype.affectVideoById = function(metadata_id, video)
+{
+	for (i = 0 ; i < this.urls.length ; i++)
+	{
+		if(this.urls[i] == metadata_id)
+		{
+			this.videos[i] = video;
+			break;
+		}
+	}
 }
\ No newline at end of file