/**
* FileName:index.map.js
* @fileoverview index.html > 地域から探すの地図切り替えUI機能を提供します
* @author uniteair.co.jp
*/
(function ($) {
    $(function () {
        $('.areaMap').storeIndexMap({
            selector_maps: 'p',
            linkMap: [
                { selector_area: '#js-areaMap-area1', selector_linkToThisArea: '.js-areaMap-linkTo-area1' },
                { selector_area: '#js-areaMap-area2', selector_linkToThisArea: '#js-areaMap-linkTo-area2' },
                { selector_area: '#js-areaMap-area3', selector_linkToThisArea: '#js-areaMap-linkTo-area3' },
                { selector_area: '#js-areaMap-area4', selector_linkToThisArea: '#js-areaMap-linkTo-area4' },
                { selector_area: '#js-areaMap-area5', selector_linkToThisArea: '#js-areaMap-linkTo-area5' },
                { selector_area: '#js-areaMap-area6', selector_linkToThisArea: '#js-areaMap-linkTo-area6' },
                { selector_area: '#js-areaMap-area7', selector_linkToThisArea: '#js-areaMap-linkTo-area7' },
                { selector_area: '#js-areaMap-area8', selector_linkToThisArea: '#js-areaMap-linkTo-area8' },
                { selector_area: '#js-areaMap-area9', selector_linkToThisArea: '#js-areaMap-linkTo-area9' }
            ]
        });
    });
}(jQuery));

(function ($) {
    /**
    * @class
    * @name $.fn.storeIndexMap
    * @description 地図の地域切り替えUI機能を提供します
    * @param {Object} options
    * @example
    * 引数のオブジェクトに selector_maps と linkMap の値を指定します。
    * linkMap はオブジェクトを内包する配列型で、最初の値に含まれる selector_area
    * プロパティから得られる要素が、デフォルトで表示される要素となります。
    *
    * $(親要素のセレクタ).storeIndexMap({
    *     selector_maps: 子要素で各地域の要素群を示すセレクタ
    *     linkMap: [
    *         {
    *             selector_area: 任意地域の要素セレクタ,
    *             selector_linkToThisArea: ここで指定した要素のクリック時、併記した selector_area へ表示を切り替えます
    *         },
    *         ...必要分繰り返し
    *     ]
    * }
    */
    $.fn.storeIndexMap = function (options) {

        var element = this,

            options = $.extend({
                selector_maps: 'p',
                linkMap: null
            }, options),

            $maps = element.find(options.selector_maps),
            currentIndex = 0;

        init();

        /**
        * @function
        * @name init
        * @description linkMapオブジェクトを走査してクリックイベントを登録します
        */
        function init () {

            var maxH = 0; // 高さ揃え用数値

            $(options.linkMap).each(function (i) {

                var $area = $(this.selector_area),
                    $linkTo = $(this.selector_linkToThisArea);

                $linkTo.bind('click', { showIndex: i }, clickHandler);

                /* スタイルの初期化 */
                $area.css({
                    opacity: '1'
                }).show();

                /* linkMapで最初に登録された地域だけを表示 */
                if (i !== currentIndex) {
                    $area.css({
                        opacity: '0'
                    }).hide();
                }

                /* さらに大きい高さの値を見つけたら更新 */
                maxH = Math.max(maxH, $area.height());
            });

            /* 取得した最大の高さを全地域要素に適用 */
            $maps.height(maxH);
        }

        /**
        * @function
        * @name clickHandler
        * @description 地域表示の切り替えを行います
        */
        function clickHandler (e) {

            var showIndex = e.data.showIndex,
                linkMap = options.linkMap,
                $currentArea = $(linkMap[currentIndex].selector_area),
                $newArea = $(linkMap[showIndex].selector_area);

            if (currentIndex === showIndex) { return false; }
            if (element.find(':animated').size() !== 0) { return false; }

            /* 現在表示中の地域をフェードアウト */
            $currentArea.animate({
                opacity: '0'
            }, 800).hide();

            /* 新しく表示する地域をフェードイン */
            $newArea.animate({
                opacity: '1'
            }, 800).show();

            currentIndex = showIndex;

            return false;
        }

        return this;
    }
}(jQuery));