/* 
 * Copyright (c) 2006 Halmat Ferello (http://greydust.com/halmat)
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * Build: v0.2
 * Date: 5 Feb 2007
*/

var old_link = null;
var active_link = null;

$.fn.jgallery = function ()
{
	var settings = {
		borderColor: '#cccccc', // border colour for thumbnails
		activeBorderColor: '#14A3E0', //border colour for active thumbnail
		fadeSpeed: 500,  // fade in and out of images
		loadingText: 'loading...'  // what the user will see when the image is being preloaded
	}
	
	var gallery = this;
	// find first image tag, which will be the main image
	var img = $(this).find('img').get(0);

	// create new image
	var image = new Image();
	
	// set up divs
	// loading text div
	$(gallery).prepend('<div id="jgallery_loading"></div>');
	// wrap a div around the image
	$(img).wrap('<div id="jgallery_new_image"></div>');
	// wrap a new div around the div image
	if ($.browser.firefox) {
		$('#jgallery_new_image').after('<div id="jgallery_old_image"></div>');
	} else {
		$('#jgallery_new_image').before('<div id="jgallery_old_image"></div>');
	}
	
	// if thumbnails doens't exist it will return false
	if ($('#thumbnails').is('ul') == 'false') { return false };

	// when you click on a thumbnail 
	// do this...	
	$('#thumbnails a').click(function(){
		
		// when you click on a thumbnail, it becomes the active_link variable
		var active_link = this;
		
		// old image put into variable
		var old_image_html = $('#jgallery_new_image').html();
		
		// preload the image
		image.src = this.href;
		
		// if old_link (the previous thumbnail you clicked on) is not equal the active_link (the thumbnail you just clicked)
		//  do this...
		if ( old_link != active_link ) {
			
			// if the old_link isn't null, change its border colour
			if ( old_link ) $(old_link).css('borderColor', settings.borderColor);
			
			// change border color for active thumbnail
			$(active_link).css('borderColor', settings.activeBorderColor); 
			
			// check whether the image has loaded
			// otherwise it will keep displaying the loading div
			intervalID = setInterval(function() {
				
				if (image.complete == false) {
					// add loading text and fade in
					$('#jgallery_loading').html(settings.loadingText).fadeIn('slow');
				}
				else {
					// remove the loading text 
					$('#jgallery_loading').remove();
					
					// display none for new image div
					$('#jgallery_new_image').hide();
					
					// put old image html inside old image div
					$('#jgallery_old_image').html(old_image_html).fadeOut(settings.fadeSpeed);
					
					// attach src to main image after image has been preloaded
					$(img).attr('src', active_link.href); //$(img).css('border', '2px solid #000');
					
					// fade in new image
					$('#jgallery_new_image').fadeIn(settings.fadeSpeed);
					
					// clear the interval so it doesn't keep checking to see if image has been preloaded
					clearInterval(intervalID);
				}
				
			}, 100);
			
			// now the thumbnail you clicked on is old
			old_link = this;
		
		}
				
		// blur the thumbnail, so in firefox we don't get that annoying selection outline
		$(this).blur();
		
		// so it doesn't go to the link
		return false;
	});

}