/*!
 * 用語説明プレビュー
 */
$(function() {
    // 用語定義要素 集合
    var elems = $(".term");
    if (elems.length < 1) { return; }
    // 用語定義収録 JSON ファイル名
    var jsonFile = "script/terms.json";
    // ポップアップ要素を追加する親要素
    var root = $(document.body);
    // 追加要素 マークアップテンプレート
    var template = {
        // ポップアップ要素
        popup  : '<div class="term-popup" tabindex="-1"></div>',
        // タイトル
        title  : '<h5></h5>',
        // 「閉じる」ボタン
        close  : '<p class="close"><input type="image" src="media/btn_close.png" alt="閉じる" /></p>',
        // 表示ボタン
        show   : '<input type="image" src="media/icon_term.png" alt="（用語説明）" title="クリックで著訳者紹介ポップアップを表示" />'
    };

    // ポップアップ要素（jQuery オブジェクト）キャッシュ
    var cache = {
        // 用語 : {
        //     popup : ポップアップ要素,
        //     title : タイトル要素,
        //     close : 「閉じる」ボタン,
        //     show  : 表示ボタン
        // }, ...
    };
    // 現在表示中の用語
    var now = "";

    // JSON ファイル取得時のみ実行
    $.getJSON(jsonFile, function(data) {
        // 現在表示中のポップアップを位置を指定
        function setPosition() {
            // 本関数のロジックを凝った造りにすることで
            // ViewPort 上下左右端での自動位置調整など、複雑な調整が可能
            if (now) {
                var btn = cache[now].show;
                var pos = btn.offset();
                // 表示ボタン上端 + 表示ボタン高さで固定してあるだけ
                cache[now].popup.css({
                    top  : (pos.top+btn.outerHeight())+"px",
                    left : pos.left+"px"
                });
            }
        }

        // リサイズ時にポップアップ位置がズレるので都度修正
        $(window).resize(setPosition);

        // ポップアップ外のクリック → 閉じる
        $(document).click(function() {
            now && cache[now].close.trigger("click");
        });

        // 対象要素を処理
        elems.each(function() {
            var obj = $(this);
            // 用語
            var text = obj.text();
            if (!text || !data[text]) { return; }

            // 表示ボタン＆イベント設定
            obj.append($(template.show).click(function() {
                if (now) {
                    // 同一名で表示中 → 閉じる
                    cache[now].close.trigger("click");
                } else {
                    // 表示
                    now = text;
                    // キャッシュ生成
                    if (!cache[now]) {
                        cache[now] = {
                            // ポップアップ要素
                            popup : $(template.popup),
                            // タイトル
                            title : $(template.title).append(now),
                            // 「閉じる」ボタン
                            close : $(template.close)
                        };
                        // 要素追加
                        cache[now].popup.append(cache[now].title)
                                        .append(data[now])
                                        .append(cache[now].close);
                    }
                    // 表示ボタンだけは都度設定
                    //   -> ページ内に同一用語が複数ある場合を考慮
                    cache[now].show = $(this);
                    // 「閉じる」ボタン イベント設定
                    cache[now].close.click(function() {
                        cache[now].popup.remove();
                        cache[now].show.trigger("focus");
                        now = "";
                    });
                    // ポップアップ イベント設定
                    cache[now].popup.click(function(event) {
                        event.stopPropagation();
                    });
                    // 表示処理
                    setPosition();
                    root.append(cache[now].popup);
                    // ポップアップにフォーカス
                    cache[now].popup.trigger("focus");
                }
                // 何もしない
                return false;
            }));
        });
    });
});