/*
 * Imgbox 1.0 (Requires -my- _a_ center-plugin)
 *
 * Copyright (c) 2007 Andreas Lagerkvist (exscale.se)
 */
jQuery.fn.imgbox = function(conf) {
	// Config for plug-in
	var config = {
		id: 'imgbox', 				// Id of imgbox container
		show: 'show', 				// Show-animation for imgbox
		hide: 'hide', 				// Hide-animation for imgbox
		speed: 0, 					// Animation-speed
		loadingText: 'Bezig met laden...'
	};
	config = jQuery.extend(config, conf);

	// These are LinksThatPointToImages
	var ltpti = 'a[href$=".jpg"], a[href$=".bmp"], a[href$=".gif"], a[href$=".png"]';

	// Create imgbox container and loader if not already created
	if(!$('#imgbox').length) {
		jQuery('<div id="' +config.id +'"></div>').appendTo('body').hide();
		jQuery('<div id="' +config.id +'-loading">' +config.loadingText +'</div>').appendTo('body').hide();
	}

	// Always return each...
	return this.each(function() {
		// Create list of images in this scope that will be used as navigation in this "album"
		var loi	= '<ul>', 
			j	= 0;

		jQuery(this).find(ltpti).each(function() {
			var alt		= jQuery(this).find('img').attr('alt') || '', 
				title	= jQuery(this).attr('title') || '';

			loi += '<li><a href="' +jQuery(this).attr('href') +'" title="' +title +'"><img src="' +jQuery(this).attr('href') +'" alt="' +alt +'" /></a></li>';
			j++;
		});

		loi += '</ul>';

		// No need for navigation if there's just one image
		if(j === 1) {
			loi = '';
		}

		// Find all links that point to images, and when you click them...
		jQuery(this).find(ltpti).click(function() {
			// Get information to display in imgbox
			var href		= jQuery(this).attr('href'), 
				title		= jQuery(this).attr('title'), 
				alt			= jQuery(this).find('img').attr('alt'), 
				imgTitle	= (title === undefined) ? '' : '<h2>' +title +'</h2>', 
				imgSrc		= (href === undefined) ? '' : '<p><a href="#" id="' +config.id +'-image" title="Klik om te sluiten"><img src="' +href +'" alt="" /></a></p>', 
				imgDesc		= (alt === undefined) ? '' : '<p>' +alt +'</p>', 
				close		= '', //<a href="#" id="' +config.id +'-close" title="Close">Close</a>', 
				imgboxHtml	= imgTitle +imgSrc +imgDesc +loi + close;

			// Hide loading, display imgbox and run self on #imgbox (so the list of images acts
			// as navigation) also add .selected class to currently displayed image in list of images
			var displayImgbox = function() {
				jQuery('#' +config.id +'-loading').hide();
				jQuery('#' +config.id).html(imgboxHtml)[config.show](config.speed).center().imgbox();
				jQuery('#' +config.id +' a[href="' +href +'"]').addClass('selected');

				// Close-link
				jQuery('#' +config.id +'-image').click(function() {
					jQuery('#' +config.id)[config.hide](config.speed);
					jQuery('#' +config.id +'-loading').hide();
					return false;
				});

				// Image-link
				/*
				jQuery('#' +config.id +'-image').click(function() {
					window.location = jQuery(this).find('img').attr('src');
					return false;
				});*/
			};

			// Preload image
			var preload = new Image();
			preload.src = jQuery(this).attr('href');

			if(preload.complete) {
				displayImgbox();
			}
			else {
				jQuery('#' +config.id +'-loading').show().center();

				preload.onload = function() {
					displayImgbox();
				};
			}

			return false;
		});
	});
};