$(document).ready(function(){
	$(window).resize(resizeImages);
	$(window).scroll(windowScroll);
	resizeImages();
	$("a.thumbnail_link").mouseenter(showThumbnailDescription);
	$("a.thumbnail_link").mouseleave(hideThumbnailDescription);
	$("a.thumbnail_link").click(showImage);
	$("a#pref_action_area").click(prevImage);
	$("a#next_action_area").click(nextImage);
	$("a#hide_action_area").click(hideImage);
	hideImage();
});

var heading_image_ratio = 2000 / 1051;

function resizeImages() {
	var window_width = $(window).width();
	$("img#heading_image").width(window_width);
	$("img#heading_image").height(window_width / heading_image_ratio);
}

function windowScroll() {
	var scroll = $(window).scrollTop();
	scroll = -(scroll / 3);
	$("div#heading_image_container").css("top", scroll+"px");
}

function showThumbnailDescription() {
	var id = this.id.substring(15);
	$("div#thumbnail_description_" + id).css("opacity", 1);
}

function hideThumbnailDescription() {
	var id = this.id.substring(15);
	$("div#thumbnail_description_" + id).css("opacity", 0);
}

var idx;

function showImage() {
	showImageById(this.id.substring(15));
}

function showImageById(id) {
	idx = id;
	adjustImageSizeAndPosition(idx);
	
	$("div#modal_container").css("z-index", 1001);
	$("div#modal_container").css("width", "100%");
	$("div#modal_container").css("height", "100%");
	$("div#modal_container").css("opacity", 1);
	$("img#facilities_image_" + idx).css("opacity", 1);
	$("div#image_placeholder_" + idx).css("opacity", 1);
}

function adjustImageSizeAndPosition(idx) {
	var window_width = $(window).width();
	var window_height = $(window).height();
	var window_ratio = window_width / window_height;
	
	var image_width = $("img#facilities_image_" + idx).width();
	var image_height = $("img#facilities_image_" + idx).height();
	var image_ratio = image_width / image_height;
	
	if (image_ratio >= window_ratio) {
		image_width = window_width * 70 / 100;
		image_height = image_width / image_ratio;
	} else {
		image_height = window_height * 70 / 100;
		image_width = image_height * image_ratio;
	}
	
	$("img#facilities_image_" + idx).css("width", image_width + "px");
	$("img#facilities_image_" + idx).css("height", image_height + "px");
	$("div#image_placeholder_" + idx).css("width", image_width + "px");
	$("div#image_placeholder_" + idx).css("height", image_height + "px");
	
	var left = (window_width - image_width) / 2;
	var top = (window_height - image_height) / 2;
	
	$("div#image_placeholder_" + idx).css("left", left + "px");
	$("div#image_placeholder_" + idx).css("top", top + "px");
	
	var prev_next_width = window_width * 35 / 100;
	$("a#pref_action_area").css("width", prev_next_width + "px");
	$("a#next_action_area").css("width", prev_next_width + "px");
	$("a#pref_action_area").css("height", "100%");
	$("a#next_action_area").css("height", "100%");
	$("a#next_action_area").css("left", (window_width-prev_next_width) + "px");
	$("a#hide_action_area").css("width", "30px");
	$("a#hide_action_area").css("height", "30px");
	$("a#hide_action_area").css("left", (window_width-100) + "px");
	$("a#hide_action_area").css("top", "100px");
	
	$("div#pref_action_area").css("left", "50px");
	$("div#next_action_area").css("left", (prev_next_width-68) + "px");
	var top_position = (window_height/2-15) + "px";
	$("div#pref_action_area").css("top", top_position);
	$("div#next_action_area").css("top", top_position);
}

function hideImage() {
	$("img.facilities_image" + idx).css("opacity", 0);
	$("div.image_placeholder").css("opacity", 0);
	$("div#modal_container").css("opacity", 0);
	
	setTimeout(function(){
		$("div#modal_container").css("z-index", -2);
		$("div#modal_container").css("width", "0");
		$("div#modal_container").css("height", "0");
	}, 500);
}

function prevImage() {
	idx--;
	if (idx < 1) {
		idx = 10;
	}
	adjustImageSizeAndPosition(idx);
	$("img.facilities_image").css("opacity", 0);
	$("div.image_placeholder").css("opacity", 0);
	$("img#facilities_image_" + idx).css("opacity", 1);
	$("div#image_placeholder_" + idx).css("opacity", 1);
}

function nextImage() {
	idx++;
	if (idx > 10) {
		idx = 1;
	}
	adjustImageSizeAndPosition(idx);
	$("img.facilities_image").css("opacity", 0);
	$("div.image_placeholder").css("opacity", 0);
	$("img#facilities_image_" + idx).css("opacity", 1);
	$("div#image_placeholder_" + idx).css("opacity", 1);
}