<%

  my $dbi = app->dbi;

  my $books = $dbi->model('book')->select(['id', 'short_name'])->all;

%>

% layout 'common';

%= javascript begin

  $(document).ready(function () {

    var current_word;

    var current_book_id;

    var found_book_ids = [];

    var fragment = location.hash;

    var current_pos;

    if (fragment) {

      var ret = fragment.match(/word-(\d)/);

      current_pos = ret[1] - 0;

    }

    else {

      current_pos = 1;

    }

    $("#word-pos").text(current_pos);

    $("#up-arrow").on('click', function () {

      var current_pos = $('#word-pos').text();

      var prev_pos = current_pos - 1;

      if (prev_pos < 1) {

      } else {

        location.href = '#word-' + prev_pos;

        $('#word-pos').text(prev_pos);

      }

    });

    $("#down-arrow").on('click', function () {

      var current_pos = $('#word-pos').text();

      var next_pos = current_pos - 0 + 1;

      if (next_pos > 10) {

      }

      else {

        location.href = '#word-' + next_pos;

        $('#word-pos').text(next_pos);

      }

    });

    // 書をクリック

    $('.book').on('click', function () {

      var book_id_str = $(this).attr('id');

      var ret = book_id_str.match(/book-(\d+)/);

      var book_id = ret[1];

      $.get('/api/book/' + book_id + '/content', function (result) {

        if (current_word) {

          var i = 1;

          var replace_cb = function (all, group1) {

            var after = '<a style="background:#00ffff" id="word-' + i + '">' + group1 + '</a>';

            i = i + 1;

            return after;

          };

          var word_re = new RegExp('(' + current_word + ')', 'g');

          result.content = result.content.replace(word_re, function (all, group1) { return replace_cb(all, group1); });

        }

        $("#content").html(result.content);

        current_book_id = book_id;

        $('#books tr').each(function () {

          var book_id_str = $(this).attr('id');

          if (book_id_str) {

            var book_id = (book_id_str.match(/book-(\d+)/))[1];

            if (book_id === current_book_id) {

              $(this).find('.book-short-name').css('background', '#DDDDDD');

            }

            else {

              $(this).find('.book-short-name').css('background', '#FFFFFF');

            }

          }

        });

      });

    });

    // 検索をクリック

    $('#search').on('click', function () {

      var word = $(this).closest('div').find('[name=word]').val();

      if (word) {

        var word_count_h;

        $.get('/api/word-count/' + word, function (result) {

          var word_count_h = result.word_count;

          $('#books tr').each(function () {

            var book_id_str = $(this).attr('id');

            if (book_id_str) {

              var book_id = (book_id_str.match(/book-(\d+)/))[1];

              if (word_count_h[book_id] === 0) {

                $(this).css('display', 'none');

              }

              else {

                found_book_ids.push(book_id);

              }

              $(this).find('.word-count').text(word_count_h[book_id]);

            }

          });

          $('#word-count-header').text('回数');

          current_word = word;

        });

      }

      return false;

    });

  });

% end

<div id="container">

  <div id="boxA">

    <h1>口語訳聖書オンライン語句検索</h1>

  </div>

  <div id="boxB">

      <div style="margin-bottom:5px">

        <%= text_field 'word' , style => "width:160px" %>

        <button id="search" style="width:50px;padding:2px;">検索</button>

      </div>

      <div style="margin-bottom:10px;">

        <table style="border-collapse: collapse;width:100%;color:#333333">

          <tr>

            <td style="width:90px">

              <a href="<%= url_for('/') %>" style="color:blue">聖書</a>

            </td>

            <td>

              <span id="up-down">

                <a id="up-arrow" href="javascript:void()">▲</a>

                <div id="word-pos" style="display:inline-block;border:1px solid #DDDDDD;padding:2px 5px;width:35px;text-align:center">

                </div>

                <a id="down-arrow" href="javascript:void()">▼</a>

              </span>

            </td>

          </tr>

        </table>

      </div>

      <div style="border:1px solid gray;width:218px;height:400px;overflow:auto;padding:5px">

        <table id="books" style="border-collapse: collapse;width:100%;color:#333333">

            <tr style="border-bottom:1px solid #EEEEEE">

              <td>

                書

              </td>

              <td id="word-count-header" style="text-align:right">

              </td>

            </tr>

          % my $prev_book_id;

          % for my $book (@$books) {

            <tr id="<%= "book-$book->{id}" %>">

              <td class="book-short-name">

                <a class="book" id="<%= "book-$book->{id}" %>" href="javascript:void(0)">

                  <%= $book->{short_name} %>

                </a>

              </td>

              <td class="word-count" style="text-align:right">

              </td>

            </tr>

          % }

        </table>

      </div>

  </div>

  <div id="boxC">

    <div id="content" style="height:500px;overflow:auto">

    </div>

  </div>

  <div id="boxD">

    <div style="border-top:1px solid #AAAAAA;padding-top:10px;">

      This site is create by

      <a href="http://d.hatena.ne.jp/perlcodesample">Perl</a> +

      <a href="http://d.hatena.ne.jp/perlcodesample/20140319/1395203665">Mojolicious</a>.

      Auther is <a href="https://twitter.com/yukikimoto2">Yuki kimoto</a>.

    </div>

  </div>

</div>