function showDetail(id) {
	if (!buttonClick) {
		return;
	}
	buttonClick = false;
	
	var arrayPageSize = getPageSize();
	var arrayScroll = getPageScroll();
	
	$("body").append("<div id='mask'></div>");
	$("body").append("<div id='loading'></div>");
	$("body").append("<div id='container'></div>");
	
	$("#mask").css("width", arrayPageSize[0]);
	$("#mask").css("height", arrayPageSize[1]);
	$("#mask").fadeTo("fast", 0.8, function() {
		$(this).click(function() {
			closeDetail();
		});
		requestData(id);
	});
	
	return true;
}

function closeDetail() {
	$("#container").fadeOut("fast");
	$("#mask").fadeTo("fast", 0, function() {
		buttonClick = true;
		$("#mask").remove();
		$("#loading").remove();
		$("#container").remove();
	});
}

function requestData(id) {
	var arrayPageSize = getPageSize();
	var arrayScroll = getPageScroll();
	
	$("#container").hide();
	$("#container").css("top", arrayScroll[1] + 10);
	$("#container").css("left", Math.round((arrayPageSize[0] - 620) / 2));
	$("#container").css("width", 620);
	
	$("#loading").css("top", arrayScroll[1] + 50);
	$("#loading").css("left", Math.round((arrayPageSize[0] - 37) / 2));
	$("#loading").fadeIn("fast", function() {
		$.ajax({
			type: "POST",
			url: ajaxUrl,
			data: "id=" + id,
			dataType: "json",
			success: function(data) { ajaxHandler(data); }
		});
	});
}

function showBase(data) {
	var arrayPageSize = getPageSize();
	var arrayScroll = getPageScroll();
	
	// load the image
	$("#container").append("<img />");
	var image = new Image();
	image.onload = function() {
		$("#container > img").attr("src", image.src).hide().fadeIn("fast", function() {
			imageWidth = $(this).width() + 10;
			imageHeight = $(this).height() + 5;
			
			// create the controller
			$("#container").append("<div id='navlist'>");
			$("#navlist").append("<a id='left_a'></a>");
			$("#navlist").append("<a id='right_a'></a>");
			if (data.list[0] == '0') {
				$("#left_a").css("display", "none");
			} else {
				$("#left_a").attr("href", showUrl + data.list[0]);
				$("#left_a").click(function() {
					requestData(data.list[0]);
					return false;
				});
				$("#left_a").css("height", imageHeight);
			}
			if (data.list[1] == '0') {
				$("#right_a").css("display", "none");
			} else {
				$("#right_a").attr("href", showUrl + data.list[1]);
				$("#right_a").click(function() {
					requestData(data.list[1]);
					return false;
				});
				$("#right_a").css("height", imageHeight);
			}
			
			if (imageWidth <= 650) {
				imageWidth = 650;	
			}
			// release the container
			$("#container").animate({width: imageWidth, left: Math.round((arrayPageSize[0] - imageWidth) / 2), top: arrayScroll[1] + 10}, 500, function() {$("#loading").fadeOut("slow");});
		});
	}
	image.src = imageUrl + data.image;
	
	// load the name and state
	$("#container").append("<div class='name'></div>");
	$("#container > .name").html(data.name);
	if (data.state == '1') {
		$("#container > .name").append("<span><img src='" + tempUrl + "new.gif' align='absmiddle' /></span>");
	}
	
	// show the container
	$("#container").fadeIn("fast", function() {
		$("#container").append("<div class='close'></div>");
		$("#container > .close").height(0).animate({height: "22"}, 500, function() {
			$(this).html("<img src='" + tempUrl + "closelabel.gif' />");
			$("#container > .close img").click(function() {
				closeDetail();
			});
		});
	});
}