	
	var loadedImages = [];
	var timer = 0;
	var canvas;
	var crossfade;
	var transition_duration = 1500;

	window.addEvent('load', function(){
		canvas = $('crossfade_canvas');
		// Start preloading all images

		new Asset.images(paths,{
			
			onProgress: function(i) {
				if (!loadedImages.contains(this)) {		
					// Set the style of the preloaded image to be centered in it's container
					// (which will be "canvas")
					this.setStyles({
						'position': 'absolute',
						//'left': (canvas.getCoordinates().width / 2) - (this.width / 2),
						//'top': (canvas.getCoordinates().height / 2) - (this.height / 2),
						'z-index': 1000-i
					});
					loadedImages[i] = this;
				}
			},
			
			onComplete: function(){
				canvas.innerHTML = "";
				crossfade = function() {
					// Reset all opacities to 100
					$$('#crossfade_canvas img').setStyles({'opacity':1});
					timer = 0;
					loadedImages.each(function(image, i) {
						image.inject(canvas);
						timer += transition_duration;
						fx = function() {
							if (i == loadedImages.length - 1) {
								loadedImages[0].effect('opacity',{duration:transition_duration}).start(0,1).chain(function(){
									crossfade();
								});
							} else {
								image.effect('opacity',{duration:transition_duration}).start(1,0);
							}
						}.delay(timer * 6);						
					});			
				}
				crossfade();
			}
			
		});

	});
