// メイン処理。
$(function(){
	// 変数設定等。
	var fade_speed = 500;		// 共通フェード速度(ミリ秒)。
	var mask_alpha = 0.7;		// マスクの透過率(0.0～1.0)。
	
	// 主要なパーツ。
	var mask = $('<div id="mask"></div>');
	var detail = $('<div id="detail"><div class="inner"></div></div>');
	
	// 詳細ウィンドウは非表示。後からサイズを設定することによりチラつきを防止。
	detail.fadeTo(1, 0, function(){ $(this).hide().addClass('detail_size'); });
	
	// マスクは非表示。幅と高さはウィンドウサイズに合わせる(ウィンドウのリサイズ時も対応)。
	mask.fadeTo(1, 0, function(){
		$(this).hide();
		$(window).resize((function(){
			var resize = function(){
				mask.css('width', $(document).width() + 'px');
				mask.css('height', $(document).height() + 'px');
				mask.css('left', '0');
			};
			resize();
			return resize;
		})());
	});
	
	// マスクのクリック処理。
	mask.click(function(){
		// クリックで詳細ウィンドウと共に非表示及び無効化。
		mask.fadeTo(fade_speed, 0, function(){ $(this).hide(); });
		detail.fadeTo(fade_speed, 0, function(){ $(this).hide(); });
	});
	
	// 詳細ウィンドウとマスクをbodyに追加する。
	$('body').prepend(detail);
	$('body').prepend(mask);
	
	// クリック処理。
	$("div#tokuten1").click(function(e){
		if ($(this).css("opacity") != 1) return;
		detail.find('div.inner').load('./html/02.html');
		detail.css('left', ($(document).width()-detail.width())/2 );
		var posx = 0;
		var posy = 0;
		if (!e) var e = $(window).event;
		if (e.pageX || e.pageY) 	{
			posy = e.pageY;
		}
		else if (e.clientX || e.clientY) 	{
			posy = e.clientY + $(document).body.scrollTop
				+ $(document).documentElement.scrollTop;
		}
		detail.css('top', posy - 120 );
		mask.show().fadeTo(fade_speed, mask_alpha, function(){
			detail.show().fadeTo(fade_speed, 1.0);
		});
	});
	$("div#tokuten2").click(function(e){
		if ($(this).css("opacity") != 1) return;
		detail.find('div.inner').load('./html/04.html');
		detail.css('left', ($(document).width()-detail.width())/2 );
		var posx = 0;
		var posy = 0;
		if (!e) var e = $(window).event;
		if (e.pageX || e.pageY) 	{
			posy = e.pageY;
		}
		else if (e.clientX || e.clientY) 	{
			posy = e.clientY + $(document).body.scrollTop
				+ $(document).documentElement.scrollTop;
		}
		detail.css('top', posy - 120 );
		mask.show().fadeTo(fade_speed, mask_alpha, function(){
			detail.show().fadeTo(fade_speed, 1.0);
		});
	});
	$("div#tokuten3").click(function(e){
		if ($(this).css("opacity") != 1) return;
		detail.find('div.inner').load('./html/05.html');
		detail.css('left', ($(document).width()-detail.width())/2 );
		var posx = 0;
		var posy = 0;
		if (!e) var e = $(window).event;
		if (e.pageX || e.pageY) 	{
			posy = e.pageY;
		}
		else if (e.clientX || e.clientY) 	{
			posy = e.clientY + $(document).body.scrollTop
				+ $(document).documentElement.scrollTop;
		}
		detail.css('top', posy - 120 );
		mask.show().fadeTo(fade_speed, mask_alpha, function(){
			detail.show().fadeTo(fade_speed, 1.0);
		});
	});

});