var currentPage = null;

function reloadCurrentPage() {
	loadPage(currentPage);
}

function loadPage(page) {
	setMenuItemClass(currentPage, false, "menu-selected");
	currentPage = page;
	setMenuItemClass(currentPage, true, "menu-loading");
	
	switchPageDiv(
		true,
		function() {
			requestPage(page);
		}
	);
}

function requestPage(page) {
	$.ajax(
		{
			url: "request/page.php",
			data: { page: page },
			success: function(content) {
				$('#page-div').html(content);
			},
			error: function(xhr, textStatus, errorThrown) {
				var html = "<img src='graphics/status.php?status=" + xhr.status + "' title='error-" + xhr.status + "' /> " + xhr.responseText;
				$('#page-div').html(html);
			},
			complete: function() {
				setMenuItemClass(currentPage, false, "menu-loading");
				setMenuItemClass(currentPage, true, "menu-selected");
				switchPageDiv(
					false,
					function() {}
				);
			}
		}
	);
}

function switchPageDiv(loading, finishFunc) {
	var dx = 20;
	var dy = 10;
	var fadeOutElement = $('#' + (loading ? "page-div" : "page-loading-div"));
	var fadeInElement  = $('#' + (loading ? "page-loading-div" : "page-div"));
	
	fadeOutElement.animate(
		{
			opacity: 0,
			top: "+="+dy,
			left: "+="+dx
		},
		300,
		function() {
			fadeOutElement.css("display", "none");
			fadeOutElement.css("top", "-=" + dy);
			fadeOutElement.css("left", "-=" + dx);
			fadeInElement.css("top", "-=" + dy);
			fadeInElement.css("left", "-=" + dx);
			fadeInElement.css("display", "block");
			fadeInElement.animate(
				{
					opacity: 1,
					top: "+="+dy,
					left: "+="+dx
				},
				300,
				finishFunc
			);
		}
	);
}

function setMenuItemClass(page, addClass, className) {
	if($('#menu-item-' + page)) {
		$('#menu-item-' + page).toggleClass(className, addClass);
	}
}