var miniGallery = function() {
	
	return {
		init: function() {
			var galleries = $$('div.gallery');
			galleries.each(function(galleryContainer, i) {
				
				var images = galleryContainer;
				var activeIndex = 0;
				var bigImages = images.getElements('img.big-images');			
				var previews = images.getElements('img.small-preview');
				
				// if there are no images, cancel
				if(bigImages.length == 0 || previews.length == 0)
					return;
					
				// if there is only one image, don't show preveiws
				if(bigImages.length == 1) {
					previews.setStyle('display', 'none');
					galleries.getElements('div.viewport')[0].setStyle('height', 'auto');
					return;
				}
				
				// calculate the heigth of the viewport
				var minHeight = bigImages[0].getSize().y;
				bigImages.each(function(img) {					
					var height = img.getSize().y;
					
					if(height < minHeight)
						minHeight = height;
				});
				
				// only show first big image
				bigImages[activeIndex].setStyle('display', 'inline');
				previews.setStyle('cursor', 'pointer');

				
				// console.log(minHeight);
				galleries.getElements('div.viewport')[0].setStyle('height', minHeight);
				
				
				previews.each(function(img, i) {					
					img.addEvent('click', function(e) {
						bigImages[i].setStyle('display', 'inline');
						bigImages[activeIndex].setStyle('display', 'none');
																		
						activeIndex = i;
					}.bind(this));
				});
			});
		}
	};
	
} ();

document.addEvent("domready", miniGallery.init);