/**
 * The object az holds the functions used on this website.
 * Putting all the funcions inside an object makes sure there won't be
 * any naming conflict. 
 */

az = {}


/**
 * This functions preloads an image and registers the onclick event for
 * the loading of the full sized image.
 * 
 * @param sender	The calling thumb <img> tag
 * @param img_src	The image path.
 */

az.add_image = function(sender,img_src) {

	if ($(sender).data('image')) return;

	var img 	= new Image();
				
	// Preload the image
	img.src = img_src;

	// Use the cache provided by jQuery to store the loaded image in the thumb <img> node.
	$(sender).data('image',img);
	
	
	// Bind the click event...
	$(sender).click(function() {
		// ... show the progress indicator...
		$('#image_view').addClass('loading');
		// ... and then load the image.
		az.load(sender);
	});
	
}



/**
 * 
 * define a onload handler, if the image data is still loading
 * 
 * @param sender	The calling thumb <img> tag
 */

az.load = function(sender) {
	
	var img 	= $(sender).data('image');
	
	var s = sender;

	if (!img.complete) {
		// This seems to work best in most browsers. Of course
		// an onload handler would be nicer, but IE has its problems 
		// with that...
		setTimeout(function() { az.load(s);},100);
	}
	else {

		var nimg = new Image();
		nimg.src = img.src;

		$('#image_view > img').after(
			$(nimg)
			.css({width: img.width+'px', height: img.height+'px'})	// Make sure the image gets displayed with the correct dimensions (IE again...).
			//.attr('src',img.src)									// Set src to the new image.
			.attr('alt', $(s).attr('alt') ? $(s).attr('alt') : '')
			.attr('title', $(s).attr('title') ? $(s).attr('title') : '')
		).remove();
		$('#image_view >img').parent().removeClass('loading')						// Finished loading, this means we can hide the progress indicator.
			;

		if ($('#image_view > legend').length == 0) {
			$('#image_view').append('<legend><\/legend>');
		}
		$('#image_view > legend').html( $(s).attr('title') ? $(s).attr('title') : '' );
		
		if (parseInt($('#content').css('width')) != img.width) $('#content').css({width: img.width+'px'});

	}
}



/**
 * Per default we load the first image of the project into #image_view, 
 * but we wait until the DOM is ready.
 */

$(document).ready(function() {

	
	// Make sure, the current image gets loaded first.
	setTimeout(function() {
		var firstImage = $('img.thumb.display');
		if (firstImage.length == 0) {
			firstImage = $('img.thumb:first');
		}

		az.add_image(firstImage, firstImage.next('input').val());
		az.load(firstImage);
	}, 100);

	// This is a replacement for the onload handler of the img tag.
	$('img.thumb').each(function() {
		// Every thumb img-tag is followed by a hidden input tag,
		// which holds the path to the full sized image.
		// <img onload="..." /> is not valid in xhtml.
		var img_src	= $(this).next('input').val();
		
		// setTimeout makes sure that the images are loaded in the background.
		var obj = this;
		setTimeout(function() {az.add_image(obj, img_src)},500);
	})
	
	
});