var curr_url;

function showTitle(title) {
	
	div = document.getElementById('hoverTitle');
	new Effect.Opacity('hoverTitle', { from: 1.0, to: 0, duration: 1 });
	
	div.innerHTML = '<h2>' + title + '</h2>';
	new Effect.Opacity('hoverTitle', { from: 0, to: 1.0, duration: 1 });
	
}

function switchImage(link_url, url) {
	
	if (curr_url == url) return;
	viewer = document.getElementById('gbViewer');
	new Effect.Opacity('gbViewer', { from: 1.0, to: 0, duration: 0.5 });
	
	a = document.createElement('a');
	a.href = link_url;
	
	img = new Image;
	img.setAttribute('class', 'giThumbnail');
	
	img.onload = function(){
		dim_limit = 350;
		ratio = img.height / img.width;
		if (img.height > img.width) {
			height = dim_limit;
			width = height / ratio;
		} else {
			width = dim_limit;
			height = width * ratio;
		}
		img.setAttribute('height', height);
		img.setAttribute('width', width);
		img.style.border = 'solid 1px #fff';
		
		setTimeout(function(){
			a.appendChild(img);
			viewer.removeChild(viewer.getElementsByTagName('a')[0]);
			viewer.appendChild(a);
			new Effect.Opacity('gbViewer', { from: 0, to: 1.0, duration: 0.5 });
			}, 500);
	}
	img.src = url;
	
	
	curr_url = url;
	
}

preloadImages = {
	count: 0 /* keep track of the number of images */
	,loaded: 0 /* keeps track of how many images have loaded */
	,onComplete: function(){} /* fires when all images have finished loadng */
	,onLoaded: function(){} /*fires when an image finishes loading*/
	,loaded_image: "" /*access what has just been loaded*/
	,images: [] /*keeps an array of images that are loaded*/
	,incoming:[] /*this is for the process queue.*/
	/* this will pass the list of images to the loader*/
	,queue_images: function(images){
		//make sure to reset the counters
		this.loaded = 0;
		
		//reset the images array also
		this.images = [];
		
		//record the number of images
		this.count = images.length;
		
		//store the image names
		this.incoming = images;
		
		//start processing the images one by one
		this.process_queue();
	}
	,process_queue: function(){
		//pull the next image off the top and load it
		this.load_image(this.incoming.shift());
	}
	/* this will load the images through the browser */
	,load_image: function(image){
		var this_ref = this;
		this_ref.startTime = new Date().getTime();
		var preload_image = new Image;
		preload_image.onload = function(){
			//store the loaded image so we can access the new info
			this_ref.loaded_image = preload_image;
			
			//push images onto the stack
			this_ref.images.push(preload_image);
			
			//note that the image loaded
			this_ref.loaded +=1;
			
			this_ref.endTime = new Date().getTime();
			this_ref.loaded_image.loadTime = this_ref.endTime - this_ref.startTime;
			
			//fire the onloaded
			(this_ref.onLoaded)();
			
			//if all images have been loaded launch the call back
			if(this_ref.count == this_ref.loaded){
				(this_ref.onComplete)();
			}
			//load the next image
			else {
				this_ref.process_queue();
			}
		}
		preload_image.src = image;
	}
}

//preloadImages.onLoaded = function(){
//	document.getElementById('preloadCnt').innerHTML += '<br />Image #' + preloadImages.loaded + ' loaded in ' + preloadImages.loaded_image.loadTime + 'ms' + ' (' + preloadImages.loaded_image.width + 'x' + preloadImages.loaded_image.height + ')';
//}
var image_dims = new Array();
var preload_images = new Array();