/**
 * フォーカス時にバルーン表示JavaScript
 *
 * class（.js_focus_ballon_trigger）にフォーカスした際に
 * DOM構造上で、フォーカスしたエレメントの親の兄弟の中から、
 * class(.js_focus_ballon_target）を持つエレメントを表示する。
 * ブラー時には、表示したエレメントを非表示に戻す。
 *
 * HTMLのDOM構成
 * 親
 *   .js_focus_ballon_trigger (1...N) フォーカス、ブラーのトリガとなるエレメント
 * .js_focus_ballon_target  (1...N) 表示されるエレメント
 *
 * @require jquery.js
 */

$(function(){
	//トリガとなるセレクタ
	var triggerSelector = '.js_focus_ballon_trigger';
	//ターゲットとなるセレクタ
	var targetSelector  = '.js_focus_ballon_target';

	$(triggerSelector).each(function(index){
		//トリガとなるテキストフォーム
		var triggerElm = $(this);
		//ターゲットの親の兄弟で、ターゲットのセレクタを抽出
		var targetElm = $(this).parent().siblings(targetSelector);
		//ターゲットのホバー時にblurイベントを解除、ホバー終了時に再度focus実行
		targetElm
			.hover(
				function(ev){
					triggerElm.unbind("blur.focus_ballon");
				},
				function(ev){
					triggerElm.trigger("focus");
				}
			)
			//最初に隠す
			.hide()
		;
		//フォーカス、ブラーの挙動設定
		triggerElm
			.bind("focus.focus_ballon", function(){
				targetElm.show();
				$(this).bind("blur.focus_ballon", function(){
					targetElm.hide();
				})
			})
		;
	});
});