//object to handle the picture fading
var slideshow = {

	speed: 3,
	duration: 4,
	path: 'images/', //path to photos
	photos: new Array(),
	current: 1,
	total: 0,
	order: [ 'home-photo-4', 'home-photo-3' ],
	
	init: function() {

		//total images in the slideshow
		slideshow.total = slideshow.order.length;

		//preload images and set photo order
		for( var i = 0; i < slideshow.total; i++ ) {
			slideshow.photos[i] = new Image();
			slideshow.photos[i].src = slideshow.path + slideshow.order[i] + '.jpg';
		}

		//initialise rotation
		setTimeout( function() { slideshow.advance() }, slideshow.duration * 1000 );

		//set handler
		Event.observe( $('photo2'), 'load', function() { slideshow.animate() } );

	},

	//work out next image to show
	advance: function() {

		//set the src of photo 2 and update current pointer
		$('photo2').src = slideshow.photos[ slideshow.current ].src;
		slideshow.current = slideshow.current == slideshow.total - 1 ? 0 : slideshow.current + 1

	},
	
	//when it's loaded...
	animate: function() {

		//show it and set the opacity to 0
		$('photo2').show();
		$('photo2').setStyle( { opacity: 0 } );
		
		//fade the photos into each other
		new Effect.Opacity( 'photo1', { from: 1, to: 0, duration: 1 } );
		new Effect.Opacity( 'photo2', { from: 0, to: 1, duration: 1 } );
	
		//recurse
		setTimeout( function() {
		
			//swap the src of the 2 and hide photo 2
			$('photo1').src = $('photo2').src;
			$('photo1').setStyle( { opacity: 1 } );
			$('photo2').setStyle( { opacity: 0 } );
			$('photo2').hide();
		
		}, ( slideshow.speed * 1000 ) + 100 );
		
		//recurse
		setTimeout( function() {
		
			slideshow.advance();
		
		}, ( ( slideshow.speed + slideshow.duration ) * 1000 ) + 100 );
	
	}
	
}

slideshow.init();