// Galerie d'image

var IdSeprator = '_';		// Separateur contenu dans l'identifiant
var aGals = new Array();	// Cache des galleries (évite de faire des requètes PHP à chaque click d'image)


// Apres construction du DOM
$(document).ready(function(){
	// Pour chaque galerie trouvee
	$('div.ImageGallery').each(function (i) {
		if( this.id ) {
			$.getJSON( '/galleries/services/getJSGallery.php', { name: this.id }, function(oGal){
				// Si l'objet JSON est trouvé...
				if( oGal.Name ) {
					// Mise en cache
					aGals[oGal.Name] = oGal;
					// Affichage de la galerie
   					CreateGallery( oGal );
					// Sur click de souris sur une miniature
					$('#' + oGal.Name + ' ul.Thumbails a' ).click(function () {
						// Récuperation de l'image a afficher
						var aImgId = $(this).attr('id').split(IdSeprator);
						var oGal = aGals[aImgId[0]];
						var oImg = oGal.Images[aImgId[1]];
						// Affichage
						var divDisplayer = $('#' + oGal.Name + ' div.Displayer' );
						divDisplayer.empty();
						divDisplayer.append( '<img src="/galleries/services/getImage.php?name=' + oGal.Name + '&img=' + oImg.Id + '" />' );
						divDisplayer.append( '<p class="Description">' + oImg.Description + '</p>' );
					});
					oGal.ScrollState = 0;
					// Sur survol du bouton haut
					$('#' + oGal.Name + ' a.ButtonUp' ).hover( function() { oGal.ScrollState = -oGal.Scrolling.ActionSense; setTimeout( function() { ScrollThumbs( oGal ); }, oGal.Scrolling.Laps ); }, function() { oGal.ScrollState = 0; } );
					// Sur survol du bouton bas
					$('#' + oGal.Name + ' a.ButtonDown' ).hover( function() { oGal.ScrollState = oGal.Scrolling.ActionSense; setTimeout( function() { ScrollThumbs( oGal ); }, oGal.Scrolling.Laps ); }, function() { oGal.ScrollState = 0; } );
				}
 			});
		}
	});
});


// Monte ou descend la liste des miniatures
function ScrollThumbs( oGal )
{
	if( oGal.ScrollState != 0 )
	{
		var iScrollingSize = parseInt(oGal.Scrolling.Size);
		if( $.browser.msie && $.browser.version.substr(0,1) == 6 ) { iScrollingSize = parseInt(oGal.Scrolling.IE6Size); }				// Pour IE6....
		var ulThumbails = $( '#' + oGal.Name + ' ul.Thumbails' );
		var CssTop = parseInt( ulThumbails.css('top') );
		if( oGal.ScrollState > 0 ) { 
			if( CssTop + parseInt(oGal.Scrolling.Move) <= 0 ) { CssTop += parseInt(oGal.Scrolling.Move); }
			else { oGal.ScrollState = 0; return( false ); }
		} else {
			if( -iScrollingSize < CssTop - parseInt(oGal.Scrolling.Move) ) { CssTop -= parseInt(oGal.Scrolling.Move); }
			else { oGal.ScrollState = 0; return( false ); }
		}
		ulThumbails.css( 'top', CssTop + 'px' );
		setTimeout( function() { ScrollThumbs( oGal ); }, oGal.Scrolling.Laps );
	} 
}


// Construction du DOM de la galerie
function CreateGallery( oGal )
{
	var divGal = document.getElementById( oGal.Name );
	if( divGal )
	{
		// Création du titre de la galerie
		if( oGal.Title )
		{
			//var pTitle = document.createElement( 'p' );
			//pTitle.className  = 'Title';
			//pTitle.appendChild( document.createTextNode( oGal.Title ) );
			//divGal.appendChild( pTitle );
		}
		// Création du calque qui affiche les images
		var divDisplayer = document.createElement( 'div' );
		divDisplayer.className = 'Displayer';
		divGal.appendChild( divDisplayer );
		// Création du cadre des miniatures
		if( oGal.Images )
		{
			var divThumbailsBar = document.createElement( 'div' );
			divThumbailsBar.className = 'ThumbailsBar';
			var aButtonUp = document.createElement( 'a' );
			aButtonUp.className = 'ButtonUp';
			divThumbailsBar.appendChild( aButtonUp );
			var divScroller = document.createElement( 'div' );
			divScroller.className = 'Scroller';
			var ulThumbails = document.createElement( 'ul' );
			ulThumbails.className = 'Thumbails';
			for( var iImgs=0; iImgs < oGal.Images.length; iImgs++ )
			{
				var oImg = oGal.Images[iImgs];
				if(oImg.Id)
				{
					var liImg = document.createElement( 'li' );
					var aImg = document.createElement( 'a' );
					aImg.id = oGal.Name + IdSeprator + oImg.Id;
					var img = new Image();
					img.src = '/galleries/services/getImage.php?name=' + oGal.Name + '&img=' + iImgs + '&format=thumb';
					$(img).bind('load', function(e){
						this.style.width = this.width + 'px';
						this.style.height = this.height + 'px';
						this.style.marginTop = -this.height / 2 + 30 + 'px';
					});
					aImg.appendChild( img );
					liImg.appendChild( aImg );
					ulThumbails.appendChild( liImg );
				}
			}
			divScroller.appendChild( ulThumbails );
			divThumbailsBar.appendChild( divScroller );
			var aButtonDown = document.createElement( 'a' );
			aButtonDown.className = 'ButtonDown';
			divThumbailsBar.appendChild( aButtonDown );
			divGal.appendChild( divThumbailsBar );
		}
		// Création du saut de ligne
		//var brCleared = document.createElement( 'br' );
		//brCleared.className = 'Cleared';
		//divGal.appendChild( brCleared );
	}
}