var currentFileName = "";
var currentTmb = "";
var loaderSrc = "/images/avioport-loader.gif";
var loaderWidth = 32;
var loaderHeight = 32;
var standardWidth = 413;
var standardHeight = 248;
var preloadedImages = new Array();



function writeImg (imgId, newSrc) {
	
	/*
		PREREQUIREMENTS: 
		1) Mootools 1.1
		2) The idea that every browser keep in memory all content of the pages. 
		   This let me to have an "image basket" where pick images for an immediate display. 
		
		The problem is to have image cached before starting events on them.
		Solution: 	dynamically load images and store in a hidden div of the page, 
					called "image basket".
		
		This script assume to have a background image showing "loading.." to the 
		div that contains big image.
		
		Instead of this, is it possible to load dynamically a loader and replace 
		the original image. When loaded, repeat replacement.
		
		An array stores preloaded images values, to speed up display.
		
	*/
	
	
	if (preloadedImages.indexOf(newSrc) != -1) {
		
		var image = $(imgId);
		var fader = image.effects({duration: 250, transition: Fx.Transitions.Quart.easeOut});
			fader.start({'opacity': 0}).chain(function(){
											 			image.src = newSrc;
											 			this.start.delay(250, this, {'opacity': 1});
														}); //end of chain
				
	} else {
		
		var currentImage = $(imgId);
		var fader = currentImage.effects({duration: 250, transition: Fx.Transitions.Quart.easeOut});
			fader.start({'opacity': 0}).chain(function(){
									
				
							var tempImg = new Element('img');
							tempImg.src = newSrc;
							tempImg.addEvent('load', function() {
												  
										var fader2 = currentImage.effects({duration: 250, transition: Fx.Transitions.Quart.easeOut});
											
											/* Uncomment and tune to load a "loading" images...
											
											
											currentImage.src 	= loaderSrc;
											currentImage.width 	= loaderWidth;
											currentImage.height = loaderHeight;								
											currentImage.setStyle('opacity', '1');
											
											set margins, height... ecc...
											*/
							
											
											/*
												I need a little delay, to avoid flickering on IE6
											*/
											
											fader2.start({'opacity': 0}).chain(function(){
											 			currentImage.src 	= newSrc;
											 			this.start.delay(250, this, {'opacity': 1});
														}); //end of chain													   
																			
											/* remove event handler */
											this.removeEvent('load', arguments.callee);
											preloadedImages.push(newSrc);
																			
											var basket = $('image-basket');
												basket.setHTML(basket.innerHTML + '<img src="' + newSrc + '"/>');
																
											}); //end onLoad handler function
											
									}); // end chain
	} // end else

}

function switchImage(galleryId, fileName, tmbId, captionId, captionValue) {
	
	if(fileName != currentFileName) {
		var baseUrl = "";
		if (galleryId == "g1") {
			baseUrl = "/images/gallery1/";
		} else if (galleryId == "g2") {
			baseUrl = "/images/gallery2/";
		}
		
		var preloadImgSrc = baseUrl + fileName;
		
		writeImg(galleryId, preloadImgSrc);
		
		currentFileName = fileName;
		
		if (currentTmb != "") {
			var previousThumb = $(currentTmb);
			previousThumb.className = "";
		}
		
		var thumb = $(tmbId);
			thumb.className = "current-tmb";
			currentTmb = tmbId;
		
		var caption = $(captionId); 
			caption.innerHTML = captionValue;
	}
	return false;
}