var nav = {

	current: 'welcome',

	init: function() {
		
		//add event handlers
		$$('#menu li a').each( function( elm ) { 
		
			$(elm).observe( 'click', function(e) {

				e.stop();
			
				nav.switch_class( elm.id );
				nav.goto( elm.id );
			
			} );
		
		} );
		
	},
	
	switch_class: function( id ) {
	
		$( nav.current ).removeClassName( 'selected' );
		$( id ).addClassName( 'selected' );
	
		nav.current = id;
	
	},
	
	goto: function( id ) {

		new Ajax.Updater( 'lhc', id + '.php' );
		new Ajax.Updater( 'rhc', 'feedbacka54e.html?page=' + id );

	}

}

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

	speed: 2,
	duration: 2,
	path: '/images/photos/', //path to photos
	photos: new Array(),
	current: 1,
	total: 0,
	order: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ],
	
	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.Parallel( [
			new Effect.Opacity( 'photo1', { from: 1, to: 0, sync: true } ),
			new Effect.Opacity( 'photo2', { from: 0, to: 1, sync: true } )
		], {
			duration: slideshow.speed,
			afterFinish: function() {
			
				//swap the src of the 2 and hide photo 2
				$('photo1').src = $('photo2').src;
				$('photo2').setStyle( { opacity: 0 } ).hide();
				$('photo1').setStyle( { opacity: 1 } );
		
			//recurse
			slideshow.advance.delay( slideshow.duration + 0.1 );
			
			}
		} );
	
	}
	
}


Event.observe( document, 'dom:loaded', function() {
//	nav.init();
//	slideshow.init();
	$('menu-line').setStyle('opacity: 0.3');
} );