// JavaScript Document

var gallery;
var loadedImage;
var busy = false;
var ajaxloader;

imageFade = function(source, target) 
{
	if(!busy)
	{
		busy = true;
		current = target.getFirst();
		current.setStyle('position', 'absolute');
		ajaxloader.setStyle('visibility', 'visible');
		image = new Asset.images(source, 
		{
			onProgress: function(i) {
				this.setStyles({
					'position': 'absolute',
					'opacity': 0,
					'z-index': 1
				});
				loadedImage = this;
			},
			onComplete: function() {
				loadedImage.injectAfter(current);
				var imgEffect = loadedImage.effect('opacity', {duration: 1500});
				imgEffect.start(1).chain(function() {
					if(current)
					{
						current.remove();
					}
					busy = false;				
				});
				ajaxloader.setStyle('visibility', 'hidden');
			}
		});
	}
}


window.addEvent('domready', function()
{
	target = $('slideshow');
	target.setStyle('position', 'relative');
	var busy = false, timer, current, loadedImages = [], gallery = $('slideshow'), progress = $('progress'), bar = $E('#progress .bar'); 
	ajaxloader = new Element('img', {
		'src': 'images/ajaxloader.gif',
		'styles': {
			'position': 'absolute',
			'z-index': 9999,
			'left':'20px',
			'top':'20px',
			'width':'auto',
			'height':'auto',
			'visibility': 'hidden'
		}}).injectInside(gallery);

	var list = $$('.thumbnail');
	list.each(function(element) 
	{
		element.setProperty('onclick', 'return false;');
		element.addEvent('click', function()
		{
			if(!busy)
			{
				source = element.getProperty('href');			
				imageFade(source, target);
				element.blur();
			}
			return false;
		});
	});
});