<bird-menu>
    <div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <bird-menu-title></bird-menu-title>
                <bird-menu-search></bird-menu-search>
                <bird-menu-info></bird-menu-info>
                <bird-menu-legend></bird-menu-legend>
                <bird-menu-modal></bird-menu-modal>
            </ul>
        </div>
    </div>
    <style scoped>
        #sidebar-wrapper {
            z-index: 1040;
            position: fixed;
            right: 315px;
            width: 340px;
            height: 100%;
            margin-right: -315px;
            overflow-y: scroll;
            background: rgba(0,0,0,0.7);
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }
        .sidebar-nav li {
            line-height: 0px;
            padding: 0px 30px 0px 30px;
            list-style: none;
        }
        .sidebar-nav .row {
            padding: 0px 0px 0px 0px;
        }
        .sidebar-nav li a {
            display: block;
            text-decoration: none;
            color: #FFFFFF;
            font-weight: normal;
        }
        .sidebar-nav h3 {
            font-size: 16px;
            color: #FFFFFF;
            font-weight: normal;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
        }
        .sidebar-nav h4 {
            font-size: 14px;
            color: #FFFFFF;
            font-weight: normal;
            margin: 8px 0px 0px 0px;
        }
        .sidebar-nav p {
            font-size: 12px;
            color: #FFFFFF;
            font-weight: normal;
            margin-top: 25px;
        }
        .sidebar-nav span {
            color: rgba(251,168,72,1);
            font-weight: normal;
            margin-top: 5px;
        }
        .sidebar-nav select,
        .sidebar-nav input {
            font-size: 12px;
            color: #FFFFFF;
            font-weight: normal;
        }
        .sidebar-nav li a:hover {
            text-decoration: none;
            color: #FFFFFF;
            background: rgba(255,255,255,0.2);
        }
        .sidebar-nav li a:active,
        .sidebar-nav li a:focus {
            text-decoration: none;
        }
        .sidebar-nav li a {
            color: rgba(251,168,72,1);
        }
        .sidebar-nav .form-group {
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
        }
        _::-webkit-full-page-media, .sidebar-nav .fa-lg {
            vertical-align: initial;
        }
        _::-webkit-full-page-media, #sidebar-wrapper {
            width: 320px;
            overflow-y: initial;
        }
        .divicon {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
            font-size:  12px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            text-align: center;
            padding: 16px 0px 0px 0px;
        }
    </style>
    <script>
        this.on('mount', function() {
            var swWidth = $('#sidebar-wrapper').prop('clientWidth');
            if (swWidth === 340) {
                $('#sidebar-wrapper').hide();
                $('#sidebar-wrapper').css('width', '315px');
            }else {
            }
            $('#sidebar-wrapper').hide();
            $.material.init();
            $(function () {
                $('[data-toggle="tooltip"]').tooltip();
            });
            $("#menu-toggle").click(function(e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });
            $('#sidebar-wrapper').show();
        })
    </script>
</bird-menu>
<bird-menu-title>
    <div class="bird-title">
        <li class="sidebar-brand">
            <div class="row">
                <div class="col-xs-43">
                    <a href="./index.html">KIKI-TORI Map</a>
                </div>
                <div class="col-xs-1 table-link05">
                    <a href="#div-modal02" role="button" class="btn" data-toggle="modal"><span class="fa fa-info-circle fa-2x" data-container="body" data-toggle="tooltip" data-placement="left" title="MAPの使い方と解説"></span></a>
                </div>
            </div>
        </li>
    </div>
    <style scoped>
        .bird-title .sidebar-brand {
            font-size: 28px;
            color: #FFFFFF;
            font-weight: normal;
            margin: 20px 0px 27px 0px;
        }
        .bird-title .table-link05 {
            margin: -20px 0px 0px 11px;
            padding: 0px 0px 0px 0px;
        }
        .bird-title .table-link05 a {
            margin: 0px -20px 0px -2px;
            padding: 0px 0px 5px 0px;
        }
    </style>
</bird-menu-title>
<bird-menu-search>
    <div class="bird-search">
        <li>
            <div class="row">
                <div class="col-xs-48">
                    <h4><span class="bird-bird"></span>種名を選ぶ</h4>
                </div>
                <div class="col-xs-29 ccc" id="birdnamechange">
                    <input type="text" value="キビタキ" ref="birdname" class="form-control" id="birdnamedata">
                </div>
                <div class="col-xs-8 table-link01">
                    <a href="#div-modal" role="button" class="btn" data-toggle="modal"><span class="fa fa-list-alt fa-lg" data-container="body" data-toggle="tooltip" title="種選択画面表示" ></span></a>
                </div>
                <div class="col-xs-11">
                </div>
            </div>
        </li>
        <li>
            <div class="row">
                <div class="col-xs-48">
                    <h4><span class="fa fa-calendar"></span>調査年を選ぶ</h4>
                </div>
                <div class="col-xs-16">
                    <select ref="yearstart" class="form-control">
                        <option selected="selected">未選択</option>
                        <option each={list, count in lists} value={list}>{list}年</option>
                    </select>
                </div>
                <div class="col-xs-8 ddd">
                    <p>〜</p>
                </div>
                <div class="col-xs-16">
                    <select ref="yearend" class="form-control">
                        <option selected="selected">未選択</option>
                        <option each={list, count in lists} value={list}>{list}年</option>
                    </select>
                </div>
                <div class="col-xs-8">
                </div>
            </div>
        </li>
        <li>
            <div class="row">
                <div class="col-xs-48 table-link99">
                    <h4>
                        <a href="#div-modal03" role="button" class="btn" data-toggle="modal">
                            <span class="fa fa-exclamation-triangle" data-container="body" data-toggle="tooltip" title="凡例表示"></span>
                        </a>
                        避難指示区域カテゴリを表示
                    </h4>
                </div>
                <div class="col-xs-16">
                    <select ref="yearzone" class="form-control">
                        <option each={list, count in lists} value={list}>{list}年</option>
                    </select>
                </div>
                <div class="col-xs-12">
                </div>
                <div class="col-xs-10 table-link22">
                    <p>検索</p>
                </div>
                <div class="col-xs-8 table-link02" data-toggle="tooltip" data-placement="left" title="検索実行">
                    <a onclick={click}><span class="icon-binoculars"></span></a>
                </div>
            </div>
        </li>
    </div>
    <style scoped>
        .bird-search {
            border: solid 1px #FFFFFF;
            margin: -17px 30px 0px 30px;
            border-radius: 3px;
        }
        .bird-search li {
            padding: 0px 0px 0px 15px;
        }
        .bird-search p {
            margin-top: 19px;
        }
        .bird-search span {
            color: #FFFFFF;
            padding: 0px 5px 0px 0px;
        }
        .bird-search .ccc {
            margin: 0px -10px 0px 0px;
        }
        .bird-search .ddd {
            margin: 0px -15px 0px -15px;
        }
        .bird-search .form-control {
            background-image: linear-gradient(rgba(251,168,72,1), rgba(251,168,72,1)), linear-gradient(rgba(251,168,72,1), rgba(251,168,72,1));
            background-size: 0 2px, 100% 2px;
        }
        .bird-search .form-group.is-focused .form-control {
            background-image: linear-gradient(rgba(251,168,72,1), rgba(251,168,72,1)), linear-gradient(rgba(251,168,72,0.5), rgba(251,168,72,0.5));
        }
        .bird-search .table-link01 {
            margin: 10px 0px 0px 0px;
            padding: 0px 0px 5px 0px;
        }
        .bird-search .table-link01 a {
            margin: 1px 14px 0px 1px;
            padding: 0px 0px 4px 4px;
        }
        .bird-search .table-link02 {
            margin: 9px 0px 0px -21px;
            padding: 0px 0px 0px 0px;
        }
        .bird-search .table-link02 a {
            margin: 0px 14px 0px -3px;
            padding: 14px 0px 12px 6px;
            border: solid 1px #FFFFFF;
            border-radius: 2px;
        }
        .bird-search .table-link22 {
            margin: 5px 0px 0px 25px;
            padding: 0px 0px 0px 0px;
        }
        .bird-search .table-link99 {
            margin: 0px 0px 0px 15px;
            padding: 0px 0px 0px 0px;
        }
        .bird-search .table-link99 a {
            margin: 0px 3px 0px 0px;
            padding: 0px 0px 0px 0px;
            display: inline;
        }
        .bird-search .table-link99 span {
            margin: 0px -3px 0px 0px;
            padding: 0px 0px 0px 0px;
            vertical-align: text-top;
        }
        .bird-search option {
            color: rgba(70,70,70,1);
        }
    </style>
    <script>
        fetch('./vecter/birddata.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                var year = _.map(_.uniqBy(json, "year"), 'year');
                this.lists = year;
                this.update();
            }.bind(this))
            .catch(function(error) {
                console.log('request failed', error)
            });
        this.click = function(e) {
            var inputval = [];
            inputval[0] = this.refs.birdname.value;
            inputval[1] = this.refs.yearstart.value;
            inputval[2] = this.refs.yearend.value;
            inputval[3] = this.refs.yearzone.value;
            fetch('./vecter/birdlist.json')
                .then( function(data) {
                    return data.json();
                })
                .then( function(json) {
                    var length = Object.keys(_.uniqBy(json, "birdname01")).length;
                    length = length - 1;
                    var i;
                    var flag = 0;
                    for (i = 0; i <= length; i++) {
                        if (inputval[0] !== json[i].birdname01) {
                            flag = flag + 1;
                        }else {
                        }
                    }
                    if (flag !== length && inputval[0] !== "") {
                        alert("鳥名がリストに存在しません!!");
                        return;
                    }else {
                        var yearall = inputval[2] - inputval[1];
                        if (inputval[1] === "未選択" && inputval[2] !== "未選択") {
                            alert("調査年の選択が不正です！！");
                        }else if (yearall < 0) {
                            alert("調査年の選択が不正です！！");
                        }else{
                            obs.trigger("infoEvent", inputval);
                            obs.trigger("infoinfoEvent", inputval);
                            obs.trigger("mapEvent", inputval);
                            obs.trigger("mapmapEvent", inputval);
                        }
                    }
                    this.update();
                }.bind(this))
                .catch(function(error) {
                    console.log('request failed', error)
                });
        }.bind(this);
        obs.on("searchEvent", function(data) {
            this.refs.birdname.value = data;
            this.update();
        }.bind(this));
        this.on('mount', function() {
            $('#birdnamedata').autoComplete({
                minChars: 1,
                source: function(term, suggest){
                    $.getJSON('./vecter/birdlist.json', function(json){
                        term = term.toLowerCase();
                        var choices = json;
                        var suggestions = [];
                        for (i=0;i<choices.length;i++)
                            if (~choices[i].birdname01.toLowerCase().indexOf(term)) suggestions.push(choices[i].birdname01);
                        suggest(suggestions);
                    });
                }
            });
        })
    </script>
</bird-menu-search>
<bird-menu-info>
    <div class="bird-info">
        <bird-menu-info-first if={answerfirst}></bird-menu-info-first>
        <bird-menu-info-one if={answerone}></bird-menu-info-one>
        <bird-menu-info-yearone if={answeryearone}></bird-menu-info-yearone>
        <bird-menu-info-all if={answerall}></bird-menu-info-all>
    </div>
    <style scoped>
        .bird-info {
            height: 357px;
        }
        .bird-info .panel {
            margin: 10px 30px 10px 30px;
            padding: 0px 0px 0px 0px;
        }
        .bird-info .panel .panel-body {
            padding: 10px 0px 15px 0px;
            height: 306px;
        }
        .bird-info .panel.panel-default .panel-heading  {
            background-color: rgba(251,168,72,0.9);
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
            height: 37px;
        }
        .bird-info .panel-heading span {
            padding: 0px 10px 0px 0px;
            margin-top: 0px;
        }
        .bird-info .panel-body span {
            color: rgba(70,70,70,1);
            margin-top: 8px;
            padding: 0px 0px 0px 8px;
        }
        .bird-info .panel-body .eee span {
            color: rgba(70,70,70,1);
            margin-top: 0px;
            padding: 0px 0px 0px 8px;
        }
        .bird-info .imgsize img {
            margin-right: 95px;
            margin-bottom: 10px;
            height: 100%;
            width: 100%;
        }
        .bird-info h3 {
            color: rgba(70,70,70,1);
        }
        .bird-info  h4 {
            margin: 1px 0px 0px 0px;
            font-weight: bold;/*add*/
        }
        .bird-info p {
            color: rgba(70,70,70,1);
            margin-top: 15px;
        }
        .bird-info h2 {
            color: rgba(70,70,70,1);
            font-size: 14px;
            font-weight: normal;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
        }
        .bird-info span {
            color: #FFFFFF;
            font-weight: normal;
            margin-top: 5px;
        }
        .bird-info .aaa {
            margin: 7px 83px 33px -2px;
        }
        .bird-info .bbb {
            margin: 0px -5px 0px 0px;
        }
        .bird-info .eee {
            margin: 5px 0px 0px 0px;
        }
        .bird-info .fff {
            margin: 0px 0px 0px -15px;
        }
        .bird-info .data-table {
            overflow-y: scroll;
            height: 275px;
            padding: 15px 20px 0px 20px;
        }
        .bird-info .data-table table th {
            padding-top: 0px;
            font-size:  14px;
            font-weight: normal;
            color: rgba(70,70,70,1);
        }
        .bird-info .data-table table td {
            padding-top: 10px;
            font-size:  12px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            border: solid 1px rgba(221,221,221,1);
        }
        .bird-info .bird-info-table .panel-body {
            padding: 5px 0px 0px 0px;
        }
        .bird-info .bird-info-table li {
            padding: 0px 15px 0px 15px;
        }
        .bird-info .table-link04 {
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
        }
        .bird-info .brbr{
            margin: 5px -60px 0px -20px;
        }
    </style>
    <script>
        this.answerfirst = true;
        obs.on("infoEvent", function(inputval) {
            if (inputval[1] === "未選択" && inputval[0] !== "") {
                this.answerone = true;
                this.answeryearone = false;
                this.answerall = false;
                this.answerfirst = false;
            }else if (inputval[1] !== "未選択" && inputval[0] !== "") {
                this.answerone = false;
                this.answeryearone = true;
                this.answerall = false;
                this.answerfirst = false;
            }else if (inputval[1] !== "未選択" && inputval[0] === "") {
                this.answerone = false;
                this.answeryearone = false;
                this.answerall = true;
                this.answerfirst = false;
            }else {
            }
            this.update();
        }.bind(this));
    </script>
</bird-menu-info>
<bird-menu-info-first>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-4 bbb">
                    <span></span>
                </div>
                <div class="col-xs-4 bbb">
                    <span class="bird-bird"></span>
                </div>
                <div class="col-xs-4 bbb">
                    <span class="fa fa-arrow-right"></span>
                </div>
                <div class="col-xs-32">
                    <h4>全期間の出現率 (%)</h4>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <li>
                <div class="row">
                    <div class="col-xs-29 imgsize" id="tooltipadd" data-toggle="tooltip" data-placement="top" data-container="body" title="">
                        <img src={imgadd} class="img-responsive center-block">
                    </div>
                    <div class="col-xs-19">
                        <div class="row">
                            <div class="col-xs-48 table-link04" data-toggle="tooltip" data-placement="bottom" data-container="body" title="さえずりナビ(NPO法人バードリサーチ提供)">
                                <a href={saezuriadd} target="_blank"><span class="fa fa-external-link  fa-lg"></span></a>
                            </div>
                            <div class="col-xs-48">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-48">
                        <div class="row brbr">
                            <div class="aaa">
                                <div class="col-xs-4">
                                    <span class="bird-bird"></span>
                                </div>
                                <div class="col-xs-40">
                                    <h3>{birdadd01}</h3>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd02}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd03}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd04}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-language"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd05}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-flask"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd06}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </div>
    </div>
    <script>
        var byadd;
        fetch('./vecter/birdlist.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                var length = Object.keys(_.uniqBy(json, "birdname01")).length;
                var i;
                for (i = 0; i < length; i++) {
                    if ("キビタキ" === json[i].birdname01) {
                        this.birdadd01 = json[i].birdname01;
                        this.birdadd02 = json[i].birdname02;
                        this.birdadd03 = json[i].birdname03;
                        this.birdadd04 = json[i].birdname04;
                        this.birdadd05 = json[i].birdname05;
                        this.birdadd06 = json[i].birdname06;
                        this.imgadd = json[i].img;
                        this.saezuriadd = json[i].link;
                        byadd = "by " + json[i].credit + " - " + json[i].licence;
                    }else {
                    }
                }
                this.update();
                $(function () {
                    $('[data-toggle="tooltip"]').tooltip();
                    $('#tooltipadd').attr('title', byadd).tooltip('fixTitle').tooltip();
                });
            }.bind(this))
            .catch(function(error) {
                console.log('request failed', error)
            });
    </script>
</bird-menu-info-first>
<bird-menu-info-one>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-4 bbb">
                    <span></span>
                </div>
                <div class="col-xs-4 bbb">
                    <span class="bird-bird"></span>
                </div>
                <div class="col-xs-4 bbb">
                    <span class="fa fa-arrow-right"></span>
                </div>
                <div class="col-xs-32">
                    <h4>全期間の出現率 (%)</h4>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <li>
                <div class="row">
                    <div class="col-xs-29 imgsize" id="tooltipadd" data-toggle="tooltip" data-placement="top" data-container="body" title="">
                        <img src={imgadd} class="img-responsive center-block">
                    </div>
                    <div class="col-xs-19">
                        <div class="row">
                            <div class="col-xs-48 table-link04" data-toggle="tooltip" data-placement="bottom" data-container="body" title="さえずりナビ(NPO法人バードリサーチ提供)">
                                <a href={saezuriadd} target="_blank"><span class="fa fa-external-link  fa-lg"></span></a>
                            </div>
                            <div class="col-xs-48">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-48">
                        <div class="row brbr">
                            <div class="aaa">
                                <div class="col-xs-4">
                                    <span class="bird-bird"></span>
                                </div>
                                <div class="col-xs-40">
                                    <h3>{birdadd01}</h3>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd02}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd03}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd04}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-language"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd05}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-flask"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd06}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </div>
    </div>
    <script>
        obs.on("infoinfoEvent", function(inputval) {
            var byadd;
            fetch('./vecter/birdlist.json')
                .then( function(data) {
                    return data.json();
                })
                .then( function(json) {
                    var length = Object.keys(_.uniqBy(json, "birdname01")).length;
                    var i;
                    for (i = 0; i < length; i++) {
                        if (inputval[0] === json[i].birdname01) {
                            this.birdadd01 = json[i].birdname01;
                            this.birdadd02 = json[i].birdname02;
                            this.birdadd03 = json[i].birdname03;
                            this.birdadd04 = json[i].birdname04;
                            this.birdadd05 = json[i].birdname05;
                            this.birdadd06 = json[i].birdname06;
                            this.imgadd = json[i].img;
                            this.saezuriadd = json[i].link;
                            byadd = "by " + json[i].credit + " - " + json[i].licence;
                        }else {
                        }
                    }
                    this.update();
                    $(function () {
                        $('[data-toggle="tooltip"]').tooltip();
                        $('#tooltipadd').attr('title', byadd).tooltip('fixTitle').tooltip();
                    });
                }.bind(this))
                .catch(function(error) {
                    console.log('request failed', error)
            });
        }.bind(this));
    </script>
</bird-menu-info-one>
<bird-menu-info-yearone>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-4 bbb">
                    <span class="bird-bird"></span>
                </div>
                <div class="col-xs-4 bbb">
                    <span class="fa fa-calendar"></span>
                </div>
                <div class="col-xs-4 bbb">
                    <span class="fa fa-arrow-right"></span>
                </div>
                <div class="col-xs-30">
                    <h4>期間別の出現率 (%)</h4>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <li>
                <div class="row">
                    <div class="col-xs-29 imgsize" id="tooltipadd" data-toggle="tooltip" data-placement="top" data-container="body" title="">
                        <img src={imgadd} class="img-responsive center-block">
                    </div>
                    <div class="col-xs-19">
                        <div class="row">
                            <div class="col-xs-48 table-link04" data-toggle="tooltip" data-placement="bottom" data-container="body" title="さえずりナビ(NPO法人バードリサーチ提供)">
                                <a href={saezuriadd} target="_blank"><span class="fa fa-external-link  fa-lg"></span></a>
                            </div>
                            <div class="col-xs-48">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-48">
                        <div class="row brbr">
                            <div class="aaa">
                                <div class="col-xs-4">
                                    <span class="bird-bird"></span>
                                </div>
                                <div class="col-xs-40">
                                    <h3>{birdadd01}</h3>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd02}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd03}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-tag"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd04}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-language"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd05}</p>
                            </div>
                            <div class="col-xs-4">
                                <span class="fa fa-flask"></span>
                            </div>
                            <div class="col-xs-40">
                                <p>{birdadd06}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </div>
    </div>
    <script>
        this.on('mount', function() {
            $(function () {
                $('[data-toggle="tooltip"]').tooltip();
            });
        })
        obs.on("infoinfoEvent", function(inputval) {
            var byadd;
            fetch('./vecter/birdlist.json')
                .then( function(data) {
                    return data.json();
                })
                .then( function(json) {
                    var length = Object.keys(_.uniqBy(json, "birdname01")).length;
                    var i;
                    for (i = 0; i < length; i++) {
                        if (inputval[0] === json[i].birdname01) {
                            this.birdadd01 = json[i].birdname01;
                            this.birdadd02 = json[i].birdname02;
                            this.birdadd03 = json[i].birdname03;
                            this.birdadd04 = json[i].birdname04;
                            this.birdadd05 = json[i].birdname05;
                            this.birdadd06 = json[i].birdname06;
                            this.imgadd = json[i].img;
                            this.saezuriadd = json[i].link;
                            byadd = "by " + json[i].credit + " - " + json[i].licence;
                        }else {
                        }
                    }
                    this.update();
                    $(function () {
                        $('[data-toggle="tooltip"]').tooltip();
                        $('#tooltipadd').attr('title', byadd).tooltip('fixTitle').tooltip();
                    });
                }.bind(this))
                .catch(function(error) {
                    console.log('request failed', error)
                });
        }.bind(this));
    </script>
</bird-menu-info-yearone>
<bird-menu-info-all>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-4 bbb">
                    <span></span>
                </div>
                <div class="col-xs-4 bbb">
                    <span class="fa fa-calendar"></span>
                </div>
                <div class="col-xs-4 bbb">
                    <span class="fa fa-arrow-right"></span>
                </div>
                <div class="col-xs-32">
                    <h4>期間別の出現種類数</h4>
                </div>
            </div>
        </div>
        <div class="bird-info-table">
            <div class="panel-body">
                <li>
                    <div class="row">
                        <div class="eee">
                            <div class="col-xs-8">
                                <span class="fa fa-map-pin"></span>
                            </div>
                            <div class="col-xs-40 fff">
                                <h2>{schooladd}</h2>
                            </div>
                        </div>
                        <div class="col-xs-48 data-table">
                            <table class="table table-striped table-hover ">
                                <tbody>
                                <tr each={list, count in lists}>
                                    <td>{count + 1}</td>
                                    <td>{list}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </li>
            </div>
        </div>
    </div>
    <script>
        this.schooladd = "地点名称";
        this.lists = ["名称表示","","","","","",""];
        obs.on("mapmoveEvent", function(data) {
            this.lists = data;
            this.update();
        }.bind(this));
        obs.on("mapmovemoveEvent", function(data) {
            this.schooladd = data;
            this.update();
        }.bind(this));
    </script>
</bird-menu-info-all>
<bird-menu-legend>
    <div class="bird-legend">
        <li>
            <div class="row">
                <div class="col-xs-39">
                    <div class="row">
                        <div class="legend01">
                            <div class="panel panel-default">
                                <div class="col-xs-6">
                                    <div class="circle01"></div>
                                    <div class="circle02"></div>
                                    <div class="circle03"></div>
                                    <div class="circle04"></div>
                                </div>
                                <div class="col-xs-42">
                                    <p>帰還困難区域</p>
                                    <p>居住制限区域</p>
                                    <p>避難指示解除準備区域</p>
                                    <p>避難指示なし</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-39">
                    <div class="row">
                        <div class="legend02">
                            <div class="panel panel-default">
                                <div class="col-xs-48">
                                    <p>数値 : 期間中の出現率(%)</p>
                                    <p>種名無指定の場合は種数</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-9">
                    <div class="row">
                        <div class="col-xs-48 table-link03" data-toggle="tooltip" data-placement="left" data-container="body" title="ダウンロードリンク">
                            <a onclick={click}><span class="fa fa-download fa-lg"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </div>
    <style scoped>
        .bird-legend .legend01 .panel {
            margin: -5px 15px 0px 15px;
            padding: 0px 0px 125px 5px;
        }
        .bird-legend .legend02 .panel {
            margin: 7px 15px 0px 15px;
            padding: 0px 0px 60px 5px;
        }
        .bird-legend .legend02 .panel p {
            margin-top: 20px;
        }
        .bird-legend h3,
        .bird-legend p {
            color: rgba(70,70,70,1);
        }
        .bird-legend .col-xs-6 {
            margin: 7px 0px 0px 0px;
            padding: 0px 0px 0px 10px;
        }
        .bird-legend .circle01 {
            width:15px;
            height:15px;
            border: solid 2px rgba(255,0,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 15px;
            margin: 11px 0px 0px 0px;
        }
        .bird-legend .circle02 {
            width:15px;
            height:15px;
            border: solid 2px rgba(255,190,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 15px;
            margin: 10px 0px 0px 0px;
        }
        .bird-legend .circle03 {
            width:15px;
            height:15px;
            border: solid 2px rgba(60,255,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 15px;
            margin: 10px 0px 0px 0px;
        }
        .bird-legend .circle04 {
            width:15px;
            height:15px;
            border: solid 2px rgba(14,122,196,0.7);
            background:rgba(255,255,255,1);
            border-radius: 15px;
            margin: 10px 0px 0px 0px;
        }
        .bird-legend .table-link03 {
            margin: 37px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
        }
        .bird-legend .table-link03 a {
            margin: 0px 15px 0px 8px;
            padding: 0px 0px 5px 6px;
        }
    </style>
    <script>
        this.click = function(e) {
        　　 window.open("http://db.cger.nies.go.jp/JaLTER/ER_DataPapers/archives/2017/ERDP-2017-05");
        }.bind(this);
	</script>
</bird-menu-legend>
<bird-menu-modal>
    <div id="div-modal02" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">KIKI-TORI Mapとは</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-48">
                            <p>国立環境研究所では、福島第一原発事故後に避難指示区域とその周辺にて録音調査による鳥類モニタリングを実施しています。</p>
                            <p>モニタリングにより得られたデータを可視化して公開したのが「KIKI-TORI Map」です。</p>
                            <p>KIKI-TORI Mapを利用することにより、避難指示区域内外の野鳥の現況を地図上で見ることができます。各地点に表示される数字は出現頻度を表しています。出現頻度は、音声データを1分間ずつに切り分けて種の出現の有無を調べ、そのうち何割で出現したかを示す値です。</p>
                            <p>KIKI-TORI Mapの利用規約は<a href = "../sitepolicy.html" target="_blank">こちら</a>を参照ください。</p>
                            <p>なお、データの一部は、市民参加型鳥類種判別イベント「バードデータチャレンジ」を通して得られました。バードデータチャレンジの詳細については<a href="../bdc.html" target="_blank">こちら</a>をご覧ください。</p>
							<p>注：国および県レッドリストの絶滅危惧種(ランクVU,EN,CR)およびサンコウチョウの分布情報は非公開としています。</p>
							
                            <p style="text-decoration:underline;">製作スタッフ</p>
                            <p>国立環境研究所
                                <br>三島啓雄・戸津久美子・深澤圭太・羽賀淳・吉岡明良・二宮英美・竹中明夫・熊田那央・大嶋直子
                            </p>
                            <p>合同会社 MIERUNE
                                <br>桐本靖規(開発担当)・朝日孝輔・古川泰人
                                <br><a href="http://www.mierune.co.jp/" target="_blank">http://www.mierune.co.jp/</a></p>
								<p style="text-decoration:underline;">録音音声による種判別データ作成チーム</p>
<p>株式会社エコリス(http://www.ecoris.co.jp/), バードデータチャレンジ参加者の皆様, 羽賀淳
<br><br>現地調査担当および協力者
<br><br>玉置雅紀,小熊宏之,松島野枝, 株式会社エコリス</p>
                        </div>
                    </div>
                    <img src="./img/info/info.png" class="img-responsive center-block" alt="使い方">
                    <img src="./img/info/search_01.png" class="img-responsive center-block" alt="全期間の出現率">
                    <img src="./img/info/search_02.png" class="img-responsive center-block" alt="期間別の出現率">
                    <img src="./img/info/search_03.png" class="img-responsive center-block" alt="期間別の出現種類数">
                </div>
            </div>
        </div>
    </div>
    <div id="div-modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"><span class="fa fa-search fa-lg"></span>検索したい種名を選択</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-hover ">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>種名</th>
                                <th>目</th>
                                <th>科</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr each={list, count in lists}>
                                <td onclick={check}>{count + 1}</td>
                                <td onclick={check}>{list.birdname01}</td>
                                <td onclick={check}>{list.birdname02}</td>
                                <td onclick={check}>{list.birdname03}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="div-modal03" class="modal fade">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">避難指示区域 凡例</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="panel panel-default">
                            <div class="col-xs-5">
                                    <div class="circleall">
                                    <div class="circle01"></div>
                                    <div class="circle02"></div>
                                    <div class="circle03"></div>
                                    <div class="circle04"></div>
                                </div>
                            </div>
                            <div class="col-xs-42">
                                <p>帰還困難区域</p>
                                <p>居住制限区域</p>
                                <p>避難指示解除準備区域</p>
                                <p>避難指示なし</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        #div-modal .modal-title {
            font-size:  16px;
            font-weight: normal;
            color: rgba(70,70,70,1);
        }
        #div-modal .modal-body {
            overflow-y: scroll;
            height: 500px;
        }
        #div-modal02 .modal-title {
            font-size:  22px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            margin-bottom: 20px;
            padding: 0px 0px 0px 30px;
        }
        #div-modal03 .modal-title {
            font-size:  20px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            margin-bottom: 20px;
            padding: 0px 0px 0px 10px;
        }
        #div-modal03 .modal-body {
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 50px;
            height: 230px;
        }
        #div-modal03 .modal-body p {
            font-size: 15px;
            color: rgba(70,70,70,1);
            font-weight: normal;
            padding: 0px 0px 0px 0px;
            margin: 12px 0px 24px 15px;
        }
        .modal-dialog table {
            border: solid 2px rgba(221,221,221,1);
        }
        .modal-dialog table th {
            font-size:  14px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            border: solid 1px rgba(221,221,221,1);
        }
        .modal-dialog table td {
            font-size:  12px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            border: solid 1px rgba(221,221,221,1);
            cursor: pointer;
        }
        .modal-dialog .modal-header .modal-title span {
            padding: 0px 10px 0px 5px;
            margin: 0px 0px 0px 0px;
        }
        .modal-dialog .modal-header .modal-title .fa-lg {
            vertical-align: 0%;
        }
        .modal-body h4 {
            font-size: 16px;
            color: rgba(70,70,70,1);
            font-weight: normal;
            margin-top: 45px;
            margin-bottom: 10px;
            padding: 0px 0px 0px 30px;
        }
        .modal-body p {
            font-size: 14px;
            color: rgba(70,70,70,1);
            font-weight: normal;
            padding: 0px 130px 0px 70px;
        }
        .modal-body a {
            font-size: 14px;
            color: rgba(251,168,72,0.9);
            font-weight: normal;
        }
        .modal-body .circle01 {
            width: 25px;
            height: 25px;
            border: solid 3px rgba(255,0,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 25px;
            margin: 10px 0px 0px 0px;
        }
        .modal-body .circle02 {
            width: 25px;
            height: 25px;
            border: solid 3px rgba(255,190,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 25px;
            margin: 20px 0px 0px 0px;
        }
        .modal-body .circle03 {
            width: 25px;
            height: 25px;
            border: solid 3px rgba(60,255,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 25px;
            margin: 20px 0px 0px 0px;
        }
        .modal-body .circle04 {
            width: 25px;
            height: 25px;
            border: solid 3px rgba(14,122,196,0.7);
            background:rgba(255,255,255,1);
            border-radius: 25px;
            margin: 20px 0px 0px 0px;
        }
        .modal-content .modal-body {
            padding-top: 10px;
        }
        .modal-backdrop {
            background-color: rgba(0,0,0,1);
            z-index: -1;
            -webkit-transform: translate3d(0,0,0);
        }
        _::-webkit-full-page-media, .modal-dialog .modal-header .modal-title .fa-lg {
            vertical-align: initial;
        }
    </style>
    <script>
        fetch('./vecter/birdlist.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                this.lists = json;
                this.update();
            }.bind(this))
            .catch(function(error) {
                console.log('request failed', error)
            });
        check(e) {
            $('#div-modal').modal('hide');
            obs.trigger("searchEvent", e.item.list.birdname01);
        }
    </script>
</bird-menu-modal>
