diff -r 34afef0f9e18 -r b6a115568b52 front_idill/src/mosaic/js/notifications.js
--- a/front_idill/src/mosaic/js/notifications.js	Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js	Sun Sep 09 15:11:32 2012 +0200
@@ -2030,16 +2030,193 @@
 /*
  * Affiche les crédits.
 */
-Mosaic.prototype.notifyCredits = function()
+Mosaic.prototype.notifyCredits = function(tabCredits)
 {
-	if($('#notify_credits').length())
+	//Si ils sont déjà affichés on quitte.
+    if(this.creditsDisplayed)
+    {
+        return;
+    }
+	
+    //On enlève les autres notifications.
+    this.removeNotifications();
+    
+    //On indique qu'ils sont affichés.
+    this.creditsDisplayed = true;
+	
+	//Panneau des crédits.
+	//On crée les flèches au niveau du container en cas d'overflow du texte.
+	var credits = "<div id='notify_credits'><div id='credits_upArrow' class='credits_arrows'></div><div id='credits_container'></div><div id='credits_downArrow' class='credits_arrows'></div></div>";
+	
+	//Pied de page des crédits.
+	var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer + "</div><div id='credits_footer_partners'></div></div>";
+	
+	$('body').append(credits);
+	
+	//On récupère les éléments css du div des crédits.
+	var notify_credits = $('#notify_credits'), window_width = $(window).width(), window_height = $(window).height(), notify_margin = parseInt(notify_credits.css('margin-left')), notify_padding = parseInt(notify_credits.css('padding-left'));
+
+	//On ajoute le pied de page aux crédits.
+	notify_credits.append(credits_footer);
+	
+	//Elements html contenant les crédits.
+	var credits_elements = "<div id='credits_content'><div id='credits_title' class='credits_text'>" + this.creditsMetadata.title + "<br /></div><div id='credits_subtitle' class='credits_text'><i>" + this.creditsMetadata.subtitle + "</i><br /><br /></div>";
+	
+	for(var i = 0 ; i < this.tabCredits.length ; i++)
 	{
-		return;
+		credits_elements += "<div class='credits_film credits_text'>" + this.tabCredits[i].film + "</div><div class='credits_body credits_text'>";
+		if(this.tabCredits[i].realisation)
+		{
+			credits_elements += this.creditsMetadata.realisation + " : " + this.tabCredits[i].realisation + "<br />";
+		}
+		if(this.tabCredits[i].company)
+		{
+			credits_elements += this.creditsMetadata.company + " : " + this.tabCredits[i].company + "<br />";
+		}
+		if(this.tabCredits[i].production)
+		{
+			credits_elements += this.creditsMetadata.production + " : " + this.tabCredits[i].production + "<br />";
+		}
+		if(this.tabCredits[i].choregraphy)
+		{
+			credits_elements += this.creditsMetadata.choregraphy + " : " + this.tabCredits[i].choregraphy + "<br />";
+		}
+		if(this.tabCredits[i].music)
+		{
+			credits_elements += this.creditsMetadata.music + " : " + this.tabCredits[i].music + "<br />";
+		}
+		
+		credits_elements += "<br /></div>"
 	}
 	
-	var credits = "<div id='notify_credits'></div>";
+	credits_elements += "</div>";
+	
+	$('#credits_container').append(credits_elements);
+	
+	//On le positionne
+	notify_credits.css(
+    {
+        left: "0px",
+        top: "0px",
+        width: window_width - notify_margin * 2 - notify_padding * 2,
+        height: window_height - notify_margin * 2 - notify_padding * 2,
+        'z-index': 1000
+	});
+	
+	//$('#credits_content').css('background-color', '#0000FF');
+	
+	this.column_gap = 30;
+	// this.column_width = (notify_credits.width() - notify_margin * 2 - notify_padding * 2) / 3 - this.column_gap * 3;
+	this.column_width = 150;//Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2);
+	//console.log(Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2));
+	//Dimensions des flèches.
+	var arrowWidth = 50, arrowHeight = 50;
+	//Dimensions du footer.
+	var footer_height = 100;
+	
+	//On spécifie les colonnes.
+	$('#credits_container').css(
+	{
+		position: 'absolute',
+		'-moz-column-width': this.column_width,
+		'-webkit-column-width': this.column_width,
+		'-moz-column-gap': this.column_gap,
+		'-webkit-column-gap': this.column_gap,
+		'-moz-column-rule': '1px solid #ddccb5',
+		'-webkit-column-rule': '1px solid #ddccb5'
+    });
 	
-	$('body').append(credits);
+	//CSS du pied de page.
+	$('#credits_footer').css(
+	{
+		position: 'absolute',
+		'background-color': '#FFF',
+		width: +notify_credits.width() + notify_margin + notify_padding,
+		height: footer_height,
+		top: +notify_credits.height() - 100 + notify_margin + notify_padding,
+		left: '0px'
+	});
+	$('#credits_footer_BBM').css(
+	{
+		position: 'absolute',
+		'background-image': 'url(./img/creditsBBM.png)',
+		'background-repeat': 'no-repeat',
+		'background-size': '300px 40px',
+		width: '300px',
+		height: '40px',
+		top: '0px',
+		left: '0px'
+	});
+	$('#credits_footer_partners').css(
+	{
+		position: 'absolute',
+		'background-image': 'url(./img/creditsPartners.png)',
+		'background-repeat': 'no-repeat',
+		width: '386px',
+		height: '41px',
+		top: $('#credits_footer').height() - 41,
+		left: +notify_credits.width() - 386 + notify_margin + notify_padding
+	});
+	$('#credits_footer_text').css(
+	{
+		position: 'absolute',
+		width: notify_credits.width() - $('#credits_footer_partners').width(),
+		top: '40px',
+		left: '0px',
+	});
+	
+	//On ajoute les flèches à l'interface, bien qu'elles soient invisibles s'il n'y a pas d'overflow du texte.
+	$('#credits_upArrow').css(
+	{
+		top: 0,
+		left: notify_credits.width() / 2 - arrowWidth / 2
+	});
+	$('#credits_downArrow').css(
+	{
+		top: $('#credits_footer').position().top - arrowHeight,
+		left: notify_credits.width() / 2 - arrowWidth / 2
+	});
+	
+	//Hauteur totale du texte des crédits.
+	var credits_total_height = $('#credits_content').height();
+	//Nombre de pages de crédits.
+	this.creditsPageLength = Math.ceil(credits_total_height / (notify_credits.height() * 3));
+	
+	//On suppose qu'il n'y a pas d'overflow du texte des crédits.
+	this.isCreditsTextOverflow = false;
+	
+	//Si la taille totale des crédits excède celle de la hauteur du panneau des crédits x 3, alors le panneau sera en plusieurs parties.
+	if(credits_total_height > notify_credits.height() * 3)
+	{
+		//Si on est arrivé là, on a constaté un overflow du texte des crédits.
+		this.isCreditsTextOverflow = true;
+		
+		//Si on est sur la première page des crédits.
+		if(this.creditsPageNumber == 0)
+		{
+			//On ne laisse pas la place du haut pour la flèche haut puisqu'on est sur la première page.
+			$('#credits_container').css(
+			{
+				//top: 0,
+				height: notify_credits.height() - footer_height - arrowHeight
+			});
+			$('#credits_downArrow').css('opacity', '1');
+		}
+		//Sinon si on est sur la dernière page des crédits.
+		else if(this.creditsPageNumber + 1 == creditsPageLength)
+		{
+			$('#credits_downArrow').css('opacity', '0');
+		}
+		//Sinon on laisse la place pour revenir en arrière ou en avant.
+		else
+		{
+			$('#credits_container').css(
+			{
+				//top: arrowHeight,
+				height: notify_credits.height() - footer_height - arrowHeight * 2,
+			});
+		}
+	}
 }
 
 /*
@@ -2047,5 +2224,8 @@
 */
 Mosaic.prototype.removeCredits = function()
 {
+	//On indique qu'ils ne sont plus affichés.
+    this.creditsDisplayed = false;
+	this.creditsPageNumber = 0;
 	$('#notify_credits').remove();
 }
\ No newline at end of file