var slidesSelector = '#right .ce_image'; // Selecteur CSS pour les elements de la gallerie
var imageSelector = 'img'; // Selecteur CSS de l'image dans l'element
var captionSelector = '.caption'; // Selecteur CSS du titre dans l'element
var thumbnailWidth = 30; // Largeur des vignettes
var thumbnailHeight = 30; // Hauteur des vignettes
var imageWidth = 303; // Largeur maximum des images
var useLightBox = true; // Utiliser une lightbox ou non

window.addEvent('domready', function() {
	var slides = $$(slidesSelector);
	if (slides.length) {
		var thumbnails = new Element('div', {'class': 'thumbnails'}); // Element de stockage des vignettes
		var thumbnailsContainer = new Element('ul'); // Conteneur des vignettes (ul)
		var thumbnailsSlider = new Element('div'); // Conteneur du conteneur de vignettes, utilise pour le defilement
	
		thumbnailsContainer.inject(thumbnailsSlider);
		thumbnailsSlider.inject(thumbnails);
	
		thumbnails.inject($('right'), 'top');
		
		var images = [];
		var thumbnailsItems = [];
		slides.each(function(slide, i) {
			var thumbnail = slide.clone();
			thumbnailsItems.push(thumbnail);
			var caption = thumbnail.getElement(captionSelector);
			var image = thumbnail.getElement(imageSelector);
			
			// ajout dans le tableau pour lightbox
			images.push([image.src, caption.get('html')]);
			
			// redimensionnement de la vignette
			var imageReal = slide.getElement(imageSelector);
			var sizeReal = {x: imageReal.getProperty('width'), y: imageReal.getProperty('height')};
			if (sizeReal.x > imageWidth) {
				imageReal.setProperty('width', imageWidth);
				imageReal.setProperty('height', Math.round(imageWidth * sizeReal.y / sizeReal.x));
			} else {
				imageReal.setStyle('padding', '0 ' + ((imageWidth - sizeReal.x) / 2) + 'px');
			}
			
			// redimensionnement de la vignette
			var imageParent = image.getParent();
			imageParent.setStyle('overflow', 'hidden');
			var size = {x: image.getProperty('width'), y: image.getProperty('height')};
			if ((size.x / size.y) > (thumbnailWidth / thumbnailHeight)) {
				image.setProperty('height', thumbnailHeight * 2);
				image.setProperty('width', Math.round(thumbnailHeight * 2 * size.x / size.y));
				image.setStyle('margin-left', ((thumbnailWidth - image.getProperty('width')) / 2) + 'px');
				image.setStyle('margin-top', ((thumbnailHeight - image.getProperty('height')) / 2) + 'px');
			} else {
				image.setProperty('width', thumbnailWidth * 2);
				image.setProperty('height', Math.round(thumbnailWidth * 2 * size.y / size.x));
				image.setStyle('margin-left', ((thumbnailWidth - image.getProperty('width')) / 2) + 'px');
				image.setStyle('margin-top', ((thumbnailHeight - image.getProperty('height')) / 2) + 'px');
			}
			
			// indication du titre comme attribut title
			thumbnail.setProperty('title', caption.get('html'));
			
			// ajout dans le DOM
			var thumbnailItem = new Element('li');
			thumbnail.inject(thumbnailItem);
			thumbnailItem.inject(thumbnailsContainer);
			thumbnail.fade('show');
			
			// clic sur une vignette
			thumbnail.slide = slide;
			thumbnail.addEvent('click', function(e) {
				thumbnailsItems.each(function(thumbnail) { thumbnail.removeClass('active'); });
				var slideToShow = this.slide;
				this.addClass('active');
				slides.each(function(slide) { 
					slide.setStyle('position', 'absolute');
					slide.fade('out');
				});
				slideToShow.setStyle('position', '');
				slideToShow.fade('in');
			});
			
			// Affichage de la premiere image seulement
			slide.fade(i == 0? 'show': 'hide');
			if (i > 0) {
				slide.setStyle('position', 'absolute');
			} else {
				thumbnail.addClass('active');
			}
		});
		
		
		// Initialisation des containers de vignettes
		var totalWidth = 0;
		thumbnailsContainer.getChildren().each(function(child) {
			totalWidth += child.getSize().x;
		});
		thumbnailsContainer.setStyle('width', totalWidth + 'px');
		thumbnailsContainer.setStyle('overflow', 'hidden');
		thumbnailsContainer.setStyle('position', 'relative');
		thumbnailsContainer.setStyle('z-index', '5');
		
		thumbnailsSlider.setStyle('width', '100%');
		thumbnailsSlider.setStyle('overflow', 'hidden');
		thumbnailsSlider.setStyle('position', 'relative');
		thumbnailsSlider.setStyle('z-index', '10');
		
		
		// Fleche gauche de navigation dans les vignettes
		var tbPrevious = new Element('a', {
			'class': 'thumbnail-previous thumbnail-previous-disabled',
			'html': 'Vignettes précédentes'
		});
		tbPrevious.inject(thumbnails, 'top');
		tbPrevious.disable = function() {
			if (!tbPrevious.hasClass('thumbnail-previous-disabled')) {
				tbPrevious.addClass('thumbnail-previous-disabled');
				tbPrevious.removeEvent('click', tbPrevious.scrollSliderLeft);
			}
		};
		tbPrevious.enable = function() {
			if (tbPrevious.hasClass('thumbnail-previous-disabled')) {
				tbPrevious.removeClass('thumbnail-previous-disabled');
				tbPrevious.addEvent('click', tbPrevious.scrollSliderLeft);
			}
		};
		tbPrevious.scrollSliderLeft = function() {
			var sliderWidth = thumbnailsSlider.getSize().x;
			var diff = thumbnailsContainer.getSize().x - sliderWidth;
			var leftMargin = thumbnailsContainer.getStyle('margin-left').toInt() || 0;
			
			var scrollWidth = 0;
			var totalWidth = 0;
			thumbnailsContainer.getChildren().each(function(child) {
				totalWidth += child.getSize().x;
				if (totalWidth - sliderWidth < -leftMargin && -leftMargin < totalWidth) {
					scrollWidth += child.getSize().x;
				}
			});
			
			leftMargin += scrollWidth;
			if (leftMargin > 0) leftMargin = 0;
			thumbnailsContainer.tween('margin-left', leftMargin);
			
			if (leftMargin >= 0) {
				tbPrevious.disable();
			}
			if (-leftMargin < diff) {
				tbNext.enable();
			}
		};

		// Fleche droite de navigation dans les vignettes
		var tbNext = new Element('a', {
			'class': 'thumbnail-next thumbnail-next-disabled',
			'html': 'Vignettes suivantes'
		});
		tbNext.inject(thumbnails, 'bottom');
		tbNext.disable = function() {
			if (!tbNext.hasClass('thumbnail-next-disabled')) {
				tbNext.addClass('thumbnail-next-disabled');
				tbNext.removeEvent('click', tbNext.scrollSliderRight);
			}
		};
		tbNext.enable = function() {
			if (tbNext.hasClass('thumbnail-next-disabled')) {
				tbNext.removeClass('thumbnail-next-disabled');
				tbNext.addEvent('click', tbNext.scrollSliderRight);
			}
		};
		tbNext.scrollSliderRight = function() {
			var sliderWidth = thumbnailsSlider.getSize().x;
			var diff = thumbnailsContainer.getSize().x - sliderWidth;
			var leftMargin = thumbnailsContainer.getStyle('margin-left').toInt() || 0;
			
			var scrollWidth = 0;
			var totalWidth = 0;
			thumbnailsContainer.getChildren().each(function(child) {
				totalWidth += child.getSize().x;
				if (totalWidth < -leftMargin + sliderWidth && -leftMargin < totalWidth) {
					scrollWidth += child.getSize().x;
				}
			});
			
			leftMargin -= scrollWidth;
			if (-leftMargin > diff) leftMargin = -diff;
			thumbnailsContainer.tween('margin-left', leftMargin);
			
			if (leftMargin < 0) {
				tbPrevious.enable();
			}
			if (-leftMargin >= diff) {
				tbNext.disable();
			}
		};

		// Initialise les fleches de navigation dans les vignettes
		tbPrevious.disable();
		if (thumbnailsContainer.getSize().x <= thumbnailsSlider.getSize().x) {
			tbNext.disable();
		} else {
			tbNext.enable();
		}
		
		// Affiche la lightbox/slimbox au clic sur l'element
		if (useLightBox) {
			slides.each(function(slide, i) {
				slide.addClass('lightbox');
				var magnifier = new Element('span', {'class': 'magnifier'});
				magnifier.inject(slide.getElement('.image_container'));
				slide.addEvent('click', function() {
					Slimbox.open(images, i);
				});
			});
		}
	}
});