window.addEvent('domready', function( ){

	var myMenu = [ "granite", "kitchens", "kitchen_acc", "energy" ];

	function call_ajax( section )
	{
		var url = "";
		var chainOfEvents = new Chain( );
		
		var fadeIn = function( ){
			myFx = new Fx.Style( 'details', 'opacity' ).start( 0, 1 );
			$('loader').removeClass('ajax-loading');		
		}
		
		var fadeOut = function( ){
			myFx = new Fx.Style( 'details', 'opacity' ).start( 1, 0 );
			$('loader').addClass('ajax-loading');	
		}
		
		var loadContent = function( ){
			myAjaxCall = new Ajax( url, { method: 'get', update: 'details' } ).request( );
		}
		
		switch( section )
		{
			case 'granite':
				url = "text.granite.html";
				break;
			case 'kitchens':
				url = "text.kitchens.html";
				break;
			case 'kitchen_acc':
				url = "text.kitchen_acc.html";
				break;
			case 'energy':
				url = "text.energy.html";
				break;
		}
		
		if( url.length == 0 )
		{
			return;
		}


	/*
	/	Removed effects temporarily until figuring out why headers change when fading 
	/	with images.
	*/
	
		chainOfEvents.chain( fadeOut );
		chainOfEvents.chain( loadContent );
		chainOfEvents.chain( fadeIn );
		
		chainOfEvents.callChain( );
		chainOfEvents.callChain.delay( 500, chainOfEvents );
		chainOfEvents.callChain.delay( 1500, chainOfEvents );
	};
	
	$( myMenu[ 0 ] ).addEvent( 'click' ,function( ){ call_ajax( myMenu[ 0 ] ) } );
	$( myMenu[ 1 ] ).addEvent( 'click' ,function( ){ call_ajax( myMenu[ 1 ] ) } );
	$( myMenu[ 2 ] ).addEvent( 'click' ,function( ){ call_ajax( myMenu[ 2 ] ) } );
	$( myMenu[ 3 ] ).addEvent( 'click' ,function( ){ call_ajax( myMenu[ 3 ] ) } );
	
});