<%

  my $dbi = app->dbi;

  my $op = param('op') // '';

  my $book_id = param('book-id');

  my $show_word_count;

  my $word_count_h = {};

  my $word = param('word');

  my $word_length = length $word;

  my $word_q = quotemeta($word) if defined $word;

  if ($word_length) {

    $show_word_count = 1;

    for (my $i = 0; $i < 66; $i++) {

      my $num = sprintf "%02d", $i + 1;

      my $content = $dbi->select(

        'content_no_tag',

        table => 'book',

        where => {id => $num}

      )->value;

      my $content_length = length $content;

      $content =~ s/$word_q//g;

      my $content_length_no_word = length $content;

      # 文字の個数

      my $word_count = ($content_length - $content_length_no_word) / $word_length;

      $word_count_h->{$num} = $word_count;

    }

  }

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

  my $content;

  my $max_search_pos;

  if ($book_id) {

    $content = $dbi->model('book')->select(

      'content',

      where => {id => $book_id}

    )->value;

    # アンカーを追加

    if ($word_length) {

      my $i = 1;

      my $replace_cb = sub {

        my $word = shift;

        my $after = qq|<a style="background:#00ffff" id="word-$i">$word</a>|;

        $i++;

        return $after;

      };

      $content =~ s#($word_q)#$replace_cb->($1)#ge;

      $max_search_pos = $i - 1;

    }

  }

  # 前と次の見つかった書籍

  my $next_book_id;

  my $prev_book_id;

  my $found_books = [];

  for my $book (@$books) {

    if (!$word_length || $word_count_h->{$book->{id}} > 0) {

      push @$found_books, $book;

    }

  }

  for (my $i = 0; $i < @$found_books; $i++) {

    if ($book_id eq $found_books->[$i]{id}) {

      $prev_book_id = $found_books->[$i - 1]{id} if $i > 0;

      $next_book_id = $found_books->[$i + 1]{id} if $i < @$found_books;

    }

  }

%>

% layout 'common';

%= javascript begin

  $(document).ready(function () {

    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) {

        location.href = "<%= url_for('/')->query(word => $word, 'book-id' => $prev_book_id)->fragment("word-$word_count_h->{$prev_book_id}") %>";

      } 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 > <%= $max_search_pos %>) {

        location.href = "<%= url_for('/')->query(word => $word, 'book-id' => $next_book_id)->fragment('word-1') %>";

      }

      else {

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

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

      }

    });

  });

% end

<div id="container">

  <div id="boxA">

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

  </div>

  <div id="boxB">

      <form style="margin-bottom:5px" action="<%= url_for('current') %>" method="get">

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

        <input type="submit" value="検索" style="width:50px;padding:2px;">

      </form>

      <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>

              % if ($word_length) {

                <span>

                  <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">

                    <%= $book_id ? '　' : '-' %>

                  </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 style="border-collapse: collapse;width:100%;color:#333333">

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

              <td>

                書

              </td>

              <td style="text-align:right">

                % if ($word_length) {

                  回数

                % }

              </td>

            </tr>

          % my $prev_book_id;

          % for my $book (@$books) {

            <tr>

              % if (!$word_length || $word_count_h->{$book->{id}} > 0) {

                <td style="<%= ($book_id // '') eq $book->{id} ? 'background:#DDDDDD' : '' %>">

                  % my $book_url_query = {'book-id' => $book->{id}};

                  % $book_url_query->{word} = $word if $word_length;

                  % my $book_url = url_for->query($book_url_query);

                  % $book_url->fragment('word-1') if $word_length;

                  <a class="book" id="<%= "book-$book->{id}" %>" href="<%= $book_url %>">

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

                  </a>

                </td>

                <td style="text-align:right">

                  <%= $word_count_h->{$book->{id}} %>

                </td>

                % if ($prev_book_id && $book_id) {

                  $next_book_list->{$prev_book_id} = $book_id;

                  $prev_book_list->{$book_id} = $prev_book_id;

                % }

              % }

            </tr>

          % }

        </table>

      </div>

  </div>

  <div id="boxC">

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

      % if ($book_id) {

        %== $content

      % }

    </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>