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

	// Toggle and load AJAX content
	if ($('toggle-ajax')) {
		// Dynamically loaded AJAX content
		$('loading').setStyle('display', 'none'); // hides the loading image
		var content = new Fx.Slide('ajax-content').hide(); // creates new Fx.Slide object from ajax-content div, also the hide() function hides the div when the page loads
		$('toggle-ajax').addEvent('click', function(e) { // adds an onClick event to toggle-ajax div
			e = new Event(e); 	
			if ($('toggle-ajax').hasClass('hidden')) { // checks if the content is visible
				$('ajax-content').empty() // empties the ajax-content
				$('loading').setStyle('display', 'block'); // displays the loading image

				var req = new Request.HTML({
					method: 'get',
					url: 'http://www.antonsten.com/resume/',
					update: $('ajax-content'),
					onComplete: function(html) { 
						$('loading').setStyle('display', 'none'); //Hides the loading image
						content.toggle(); //toggles the ajax-content
					}
				}).send();
			}
			else { 
				content.toggle(); //in case we dont want to send ajax request, we just slide it out
			}
			if ($('toggle-ajax').hasClass('hidden')){
				$('toggle-ajax').removeClass('hidden').addClass('visible');
			}
			else {
				$('toggle-ajax').removeClass('visible').addClass('hidden');
			}
			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 
		});
	}


});