var $jx = jQuery.noConflict();

		var $jxCURRENT_PAGE_ID = "#pageOne";	// global ID for the current page.

		function setupPages() {
			var windowHeight = $jx(window).height() - $jx("#header").outerHeight(true) - $jx("#links").outerHeight(true) - $jx("#footer").outerHeight(true);
			$jx(".page").css({
				'min-height': (windowHeight -300) + 'px'
			});
		}
		
		function goToPage(pageId, animate) {
			// Animate by default.
			if (animate === undefined) animate = true;

			var pageMap = { '#one': '#pageOne', '#two': '#pageTwo', '#three': '#pageThree', '#four': '#pageFour', '#five': '#pageFive', '#six': '#pageSix', '#seven': '#pageSeven', '#eight': '#pageEight', '#nine': '#pageNine', '#ten': '#pageTen', '#eleven': '#pageEleven', '#twelve': '#pageTwelve', '#thirteen': '#pageThirteen', '#fourteen': '#pageFourteen', '#fifteen': '#pageFifteen', '#sixteen': '#pageSixteen', '#seventeen': '#pageSeventeen', '#eighteen': '#pageEighteen', '#nineteen': '#pageNineteen', '#twenty': '#pageTwenty' };
			var page = $jx(pageMap[pageId]);
			if (animate) {
				$jx('#pages-inner').animate({
					top: '-'+page.position().top+'px'
				}, 300);
				$jx("#pages").animate({
					height: page.height()+'px'
				}, 300);
			} else {
				$jx('#pages-inner').css({ top: '-'+page.position().top+'px' });
				$jx('#pages').css({ height: page.height()+'px' });
			}
			
			$jx("#links a").removeClass("selected");
			$jx("#links a[href='"+pageId+"']").addClass("selected");
			
			$jxCURRENT_PAGE_ID = pageMap[pageId];
		}
		
		$jx(document).ready(function() {
			// Initialize the height of main elements.
			setupPages();
			$jx("#pages-inner").css({
				overflow: 'hidden',
				position: 'relative'
			});
			$jx('#pages').css({ 
				overflow: 'hidden', 
				position: 'relative' 	// fix for IE bug with overflow:hidden.
			});
			
			// Hook up the link events
			var links = $jx("#links a");
			links.each(function(i) {
				$jx(this).click(function (e) {
					goToPage($jx(this).attr('href'), true);
					e.preventDefault();
				});
			});
			
			// Add hookup for when the user resizes the window.
			$jx(window).bind("resize", function(e) {
				// Readjust the size of main elements.
				setupPages();				
				// Readjust the scroll position of the pages.
				var page = $jx($jxCURRENT_PAGE_ID);
				$jx('#pages-inner').css({ top: '-'+page.position().top+'px' });
				$jx('#pages').css({ height: page.height()+'px' });
			});
			
			// Directly go to the requested page based on the #hash of the adress bar.
			// (by default, go to the first page)
			var requestedAnchor = window.location.hash;
			if (requestedAnchor == '' || requestedAnchor == '#')
				requestedAnchor = '#one';
			
			$jx('html, body').scrollTop(0);
			goToPage(requestedAnchor, false);
		});