$(document).ready(function(){
						   
	$("#wrapper").addClass("active");
			   
	function setup() {
		
		$("#page").css({"position": "absolute","left": "0","top": "0"});
		
		// detect the click on a link
		$("a.scroll").click(function(){
									 
			var bodyClass = $(this).attr("rel");
			var url = $(this).attr("href");
			
			// check if bodyClass is "services", if so change it to skin
			if(bodyClass == 'services') {
				bodyClass = 'skin';
			}
			
			// create a new div ready to load a new page into
			$("<div id='new'></div>").css({"width": "800px","height": "404px","position": "absolute","left": "0","top": "600px"}).insertAfter("#page");
			
			// change #page to #old ready for scroll and removing
			$("#page").attr("id","old");
	
			$("#old").animate({"top": "-404px"}, "slow",
				function(){
				
					$("#old").remove();
					$("body").removeAttr("className");
					$("body").addClass(bodyClass);
					$("#new").addClass(bodyClass);
			
					// load the content
					$("#new").load(url + " #page>div",
						function(){
							
							$('#scroller').jScrollPane();
							
							tb_init('a.thickbox');
							
							// scroll the new div into view
							$("#new").animate({"top": "0"}, "slow",
								function(){
									
									// once all animation is done, we need to swap the divs ready to create a new one
									$("#new").attr("id","page");
									
									setup();
								});
							
						});
					
				});
			
			return false;
			
		});
	
	}
	
	setup();
	
});