var Gallery = {
	
	// Affiche la galerie
	show: function() {
		var liste = $('album');
		var imgItems = $$('#album img');
		var linkItems = new Array();
		// On remplace toutes les images par des liens contenant les miniatures des images, qu'on rend presque transparentes
		imgItems.each(function(imgItem) {
			var link = new Element('a', {href: 'javascript:;'});
			imgItem.inject(link);
			// On attribue une action au clic sur le lien
			link.addEvent('click', function(e) {
				e = new Event(e).stop();
				var imgSrc = link.getFirst('img').getProperty('src');
				Gallery.update(imgSrc);
			});
			// On place le lien qu'on vient de créer dans le tableau linkItems
			linkItems.push(link);
		});
		// On crée un conteneur pour la grande image, et l'image elle-même
		var bigPicWrapper = new Element('div', {id: 'bigPicWrapper'});
		var bigPic = new Element('img', {id: 'bigPic', src: imgItems[0].getProperty('src'), alt: ''});
		bigPic.addClass('principale');
		bigPic.inject(bigPicWrapper);
		// On l'insère dans la page, juste avant avant la galerie
		bigPicWrapper.inject(liste, 'top');
		// On crée un conteneur pour les thumbs et on l'insère en-dessous de la grande image
		var thumbsWrapper = new Element('ul', {id: 'thumbsWrapper'});
		linkItems.each(function(li) {
			li.inject(thumbsWrapper);
		});
		thumbsWrapper.inject(liste, 'bottom');
	},
	
	// Met à jour la grande image
	update: function(src) {
		$('bigPic').setProperty('src', src);
	}
	
}
window.addEvent('load', function() {
	Gallery.show();
});