<side_common>
    <div class="side">

        <virtual if={level1('about')}>
            <div class="side-wrapper">
                <h2 class="side-title tbsp-fs-small"><span>アリウェル<br class="tb">について</span></h2>
            </div>
        </virtual>
        <!--/第2階層が「about」の時表示-->

        <virtual if={level1('company')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>会社概要</span></h2>
                <ul class="side-nav">
                    <li class="side-nav__item">
                        <a href="{base}/company/outline.html" class="side-nav__link">企業情報</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/company/history.html" class="side-nav__link">沿革</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/company/philosophy.html" class="side-nav__link">経営理念</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/invitation/" class="side-nav__link">勧誘方針</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/privacy/" class="side-nav__link">プライバシーポリシー</a>
                    </li>
                </ul>
            </div>
        </virtual>
        <!--/第2階層が「company」の時表示-->

        <virtual if={level1('real_estate')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>不動産部門</span></h2>
                <ul class="side-nav">
                    <li class="side-nav__item">
                        <a href="{base}/real_estate/brokerage.html" class="side-nav__link">仲介事業<span>（第二種金融商品取引業）</span></a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/real_estate/development.html" class="side-nav__link">開発事業</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/real_estate/leasing.html" class="side-nav__link">賃貸・<br class="pc">駐車場事業</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/real_estate/building.html" class="side-nav__link">保有物件一覧</a>
                    </li>
                </ul>
            </div>
        </virtual>
        <!--/第2階層が「real_estate」の時表示-->

        <virtual if={level1('insurance')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>保険部門</span></h2>
                <ul class="side-nav">
                    <li class="side-nav__item">
                        <a href="{base}/insurance/customer.html" class="side-nav__link">お客さま本位の<br class="pc">業務運営方針</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/insurance/damage.html" class="side-nav__link">損害保険</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/insurance/life.html" class="side-nav__link">生命保険</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/insurance/internet.html" class="side-nav__link">インターネット<br class="pc">でご契約</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/insurance/list.html" class="side-nav__link">取扱保険会社</a>
                    </li>
                    <li class="side-nav__item">
                        <a href="{base}/insurance/accident.html" class="side-nav__link">事故受付窓口</a>
                    </li>
                </ul>
            </div>
        </virtual>
        <!--/第2階層が「insurance」の時表示-->

        <virtual if={level1('hospitality')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>ホスピタリティ部門</span></h2>
            </div>
        </virtual>
        <!--/第2階層が「hospitality」の時表示-->

        <virtual if={level1('recruit')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>採用情報</span></h2>
            </div>
        </virtual>
        <!--/第2階層が「recruit」の時表示-->

        <virtual if={level1('inquiry')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>お問い合わせ</span></h2>
            </div>
        </virtual>
        <!--/第2階層が「inquiry」の時表示-->

        <virtual if={level1('privacy')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>プライバシー<br class="tb">ポリシー</span></h2>
            </div>
        </virtual>
        <!--/第2階層が「privacy」の時表示-->

        <virtual if={level1('sitemap')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>サイトマップ</span></h2>
            </div>
        </virtual>
        <!--/第2階層が「sitemap」の時表示-->

        <virtual if={level1('invitation')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>勧誘方針</span></h2>
            </div>
        </virtual>
        <!--/第2階層が「invitation」の時表示-->

        <virtual if={level1('notice')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>社名変更のご案内</span></h2>
            </div>
        </virtual>
        <!--/第2階層が「notice」の時表示-->

        <virtual if={level1('news')}>
            <div class="side-wrapper">
                <h2 class="side-title"><span>新着情報</span></h2>
                <virtual if={!level2('article')}>
                    <ul class="side-nav">
                        <li class="side-nav__item" data-group="all">
                            <a href="{base}/news/index.html?id=all" class="side-nav__link">全て</a>
                        </li>
                        <li class="side-nav__item" data-group="info">
                            <a href="{base}/news/index.html?id=info" class="side-nav__link">お知らせ</a>
                        </li>
                        <li class="side-nav__item" data-group="recruit">
                            <a href="{base}/news/index.html?id=recruit"class="side-nav__link">採用情報</a>
                        </li>
                        <!-- <li class="side-nav__item" data-group="estate">
                            <a href="{base}/news/index.html?id=estate"class="side-nav__link">不動産</a>
                        </li> -->
                        <li class="side-nav__item" data-group="insurance">
                            <a href="{base}/news/index.html?id=insurance"class="side-nav__link">保険</a>
                        </li>
                    </ul>
                </virtual>
                <virtual if={level2('article')}>
                    <ul class="side-nav sp-none">
                        <li class="side-nav__item" data-group="all">
                            <a href="{base}/news/index.html?id=all" class="side-nav__link">全て</a>
                        </li>
                        <li class="side-nav__item" data-group="info">
                            <a href="{base}/news/index.html?id=info" class="side-nav__link">お知らせ</a>
                        </li>
                        <li class="side-nav__item" data-group="recruit">
                            <a href="{base}/news/index.html?id=recruit"class="side-nav__link">採用情報</a>
                        </li>
                        <!-- <li class="side-nav__item" data-group="estate">
                            <a href="{base}/news/index.html?id=estate"class="side-nav__link">不動産</a>
                        </li> -->
                        <li class="side-nav__item" data-group="insurance">
                            <a href="{base}/news/index.html?id=insurance"class="side-nav__link">保険</a>
                        </li>
                    </ul>
                </virtual>
            </div>
        </virtual>
        <!--/第2階層が「news」の時表示-->

    </div>

    <script>
        //ニュースのカテゴリ絞り込み処理
        this.on('mount', function() {

            var searchItem = '.side-nav__item';   // 絞り込む項目を選択するエリア
            var listItem = '.news-list__item';    // 絞り込み対象のアイテム
            var hideClass = 'is-hide';         // 絞り込み対象外の場合に付与されるclass名
            var activeClass = 'active';     // 選択中のグループに付与されるclass名

            $(function() {
                // 絞り込みを変更した時
                $(searchItem).on('click', function() {
                    $(searchItem).removeClass(activeClass);
                    var group = $(this).addClass(activeClass).data('group');
                    search_filter(group);
                });
            });

            /**
            * リストの絞り込みを行う
            * @param {String} group data属性の値
            */
            function search_filter(group) {
                // 非表示状態を解除
                $(listItem).removeClass(hideClass);
                // 値が空の場合はすべて表示
                if(group === '') {
                    return;
                }
                // リスト内の各アイテムをチェック
                for (var i = 0; i < $(listItem).length; i++) {
                    // アイテムに設定している項目を取得
                    var itemData = $(listItem).eq(i).data('group');
                    // 絞り込み対象かどうかを調べる
                    if(itemData !== group) {
                        $(listItem).eq(i).addClass(hideClass);
                    }
                }
            }

            $(function() {
                // URLのパラメータを取得
                var urlParam = location.search.substring(1);

                // URLにパラメータが存在する場合
                if(urlParam) {
                    // 「&」が含まれている場合は「&」で分割
                    var param = urlParam.split('&');

                    // パラメータを格納する用の配列を用意
                    var paramArray = [];

                    // 用意した配列にパラメータを格納
                    for (i = 0; i < param.length; i++) {
                        var paramItem = param[i].split('=');
                        paramArray[paramItem[0]] = paramItem[1];
                    }

                    // パラメータidがinfoかどうかを判断する
                    if (paramArray.id == 'info') {
                        $('.side-nav__item[data-group="info"]').children().addClass(activeClass);
                        $('.news-list__item[data-group!="info"]').addClass(hideClass);
                    }
                    if (paramArray.id == 'recruit') {
                        $('.side-nav__item[data-group="recruit"]').children().addClass(activeClass);
                        $('.news-list__item[data-group!="recruit"]').addClass(hideClass);
                    }
                    if (paramArray.id == 'estate') {
                        $('.side-nav__item[data-group="estate"]').children().addClass(activeClass);
                        $('.news-list__item[data-group!="estate"]').addClass(hideClass);
                    }
                    if (paramArray.id == 'insurance') {
                        $('.side-nav__item[data-group="insurance"]').children().addClass(activeClass);
                        $('.news-list__item[data-group!="insurance"]').addClass(hideClass);
                    }
                    if (paramArray.id == 'all') {
                        $('.side-nav__item[data-group="all"]').children().addClass(activeClass);
                        $('.news-list__item').removeClass(hideClass);
                    }
                }

            });
        });

        // カレント設定
        this.on('mount', function() {
            $('.side-nav__item a').each(function() {
                var href = $(this).attr('href');
                var reg = new RegExp(href + '$');
                var locationHref = location.href;
                locationHref = locationHref.replace(location.search, '');
                locationHref = locationHref.replace(location.hash, '');

                if (locationHref.match(reg)) {
                    $(this).addClass('active');
                }
            });
        });

    </script>

</side_common>
