/**
 * JPAP レイヤー表示
 * 例示のA要素をクリックするとFAQパネルをレイヤー展開
 * 回答はpop.phpで取得し、Ajax通信でパネルに流し込み
 * 
 * @example
 * A要素の<code>class="layer"</code>は必須
 * <a href="pop.php?1" class="layer">＊＊＊＊</a>
 * 
 * Copyright (c) KFW 2010
 * Require: jQuery 1.3
 */
(function($) {
	
	var OPACITY = 0.8;
	var SPEED = 400;
	
	var LOADING = "<img id='LayerLoading' src='/cmn/generally/img/loadingAnimation.gif' />";
	var BACKGROUND_TEMPLATE = "<div id='LayerBackground' />";
	var MARKER_TEMPLATE = "<div id='LayerMarker' />";
	
	var DROPSHADOW_TEMPLATE = "<table id='LayerPanelContainer' class='dropshadow'>"
		+"<tr><td class='c1' /><td class='c2' /><td class='c3' /></tr>"
		+"<tr><td class='c4' /><td class='c5' /><td class='c6' /></tr>"
		+"<tr><td class='c7' /><td class='c8' /><td class='c9' /></tr></table>";
	
	var PANEL_TEMPLATE = "<div id='LayerPanel'>"
		+"<div class='title' /><div class='answer' /><img class='close' src='/faq/images/close.gif'>"
		+"</div>";
	
	var _window = $(window);
	var _document = $(document);
	var _background, _panel, _panel_container, _marker, _loading;
	
	
	/**
	 * レイヤー展開
	 * 回答データを$().loadで取得
	 * 
	 * @param	event {Object} イベントオブジェクト
	 * @return false
	 */
	function onLayer(event) {
		var anchor = $(event.target);
		var url = anchor.attr("href") +" p";
		
		onResize();
		_background.fadeIn(SPEED);
		_loading.fadeIn(SPEED);
		
		_panel
		.find(".title").html(anchor.text()).end()
		.find(".answer").empty().load(
			url,
			openLayer(anchor)
		);
		
		return false;
	};
	
	/**
	 * $().loadのコールバック
	 * クリック元のA要素の位置情報から拡大アニメーションするマーカーを描画
	 * 
	 * @param	anchor {jQuery} A要素
	 * @return {Function} クロージャ
	 */
	function openLayer(anchor) {
		return function(xhr) {
			var point = getRect(_panel_container);
			
			_loading.hide();
			
			_marker
			.css({
				"width": anchor.width() +"px",
				"height": anchor.height() +"px",
				"left": anchor.offset().left +"px",
				"top": anchor.offset().top +"px"
			})
			.show()
			.animate({
				"width": point.width,
				"height": point.height,
				"left": point.left,
				"top": point.top
			}, SPEED, "swing", function() {
					_marker.hide();
					_panel_container.css({"left": point.left, "top": point.top}).show();
			});
		}
	};
	
	/**
	 * レイヤー終了
	 * 
	 * @param	event {Object} イベントオブジェクト
	 */
	function deLayer(event) {
		_background.fadeOut(SPEED);
		_panel_container.hide();
		_loading.hide();
		_marker.hide()
		.css({"width": "0px", "height": "0px", "left": "0px", "top":"0px"});
		
		return false;
	};	
	
	/**
	 * リサイズ処理
	 * 
	 * @param	event {Object} イベントオブジェクト
	 */
	function onResize(event) {
		var point;
		
		point = getRect(_panel_container);
		_panel_container.animate({"left": point.left, "top": point.top}, SPEED, "swing");
		
		point = getRect(_loading);
		_loading.css({"left": point.left, "top": point.top});
		
		_background.height(_document.height());
	};
	
	/**
	 * 要素の位置情報
	 * セレクタだけど返すのは単一
	 * 
	 * @param selector {String} セレクタ
	 * @return 位置情報詰め合わせ
	 */
	function getRect(selector) {
		var w = $(selector).width();
		var h = $(selector).height();
		return {
			width: w,
			height: h,
			left: (_window.width() - w) / 2 + _window.scrollLeft(),
			top: (_window.height() - h) / 2 + _window.scrollTop()
		}
	};
	
	
	//初期化開始
	$(document).ready(function() {
		//初期化
		_panel = $(PANEL_TEMPLATE);
		_background = $(BACKGROUND_TEMPLATE).css("opacity", OPACITY).appendTo("body");
		_marker = $(MARKER_TEMPLATE).css("opacity", OPACITY).appendTo("body");
		_loading = $(LOADING).appendTo("body");
		_panel_container = $(DROPSHADOW_TEMPLATE).appendTo("body");
		_panel_container.find(".c5").append(_panel);
		
		//リスナー設定
		$("a.layer").bind("click", onLayer);
		_window.bind("resize", onResize);
		_panel.find(".close")
		.bind("click", deLayer)
		.hover(
			function() { $(this).css({"opacity": 0.6}) },
			function() { $(this).css({"opacity": 1}) }
		);
	});
	
})(jQuery);