window.addEvent('domready', function() {
	//hides the loading image
	$('loading').setStyle('display', 'none');

	//What to do when link is clicked
	$$('.linkclass').addEvent('click', function(e) {
        //Adds an onClick event to header div
        e = new Event(e);
		
		//FadeIn followed by FadeOut with chain
		var x = new Chain();
		var fadein = function(){new Fx.Style('shelf', 'opacity').start(1.0)};
		var fadeout = function(){new Fx.Style('shelf', 'opacity').start(0.0)};
		x.chain(fadeout);
		x.chain(fadein);

		//Fade out div shelf
		 x.callChain(); 

		 //Show loading image
		 $('loading').setStyle('display', 'block');
		 //shows image for header - up is closed state - down is open state
		 $('header').removeClass('arrow-down').addClass('arrow-up');
		
		//load url that was clicked in link
		new Ajax(this.name, 
		//url of file
		{
			method: 'get',
			update: $('shelf'),  // element that will be updated with response           
			onComplete: function() {
				x.callChain.delay(800, x); //delay the fade in for the content
				$('loading').setStyle('display', 'none');  //Hides the loading image 
				$('header').removeClass('arrow-up').addClass('arrow-down');
				}
		}).request(); //sends the request
            
        e.stop();
        //this makes sure that the user wont be sent to given url (or that the page refreshes when using dummy url like "#") if the clicked element was a link 
     });
});