{% if config.crowi['searcher.url'] %}

<form id="headerSearch" class="navbar-form navbar-left form-inline" role="search">
  <div class="form-group">
    <input id="searchQuery" name="q" type="text" class="form-control" placeholder="検索文字...">
    <button type="submit" class="btn btn-default">検索</button>
    <p>
    </p>
    <script>
      function Searcher () {
      };
      Searcher.prototype = {
        baseUrl: "{{ config.crowi['searcher.url'] }}",
        currentQuery: "",
        searchData: [],
        setData: function (data) {
          this.searchData = data;
        },
        search: function (query) {
          var self = this;
          self.currentQuery = query;
          if (query == "") {
            return false;
          }
          $("#searchQuery").addClass('searching');
          $.ajax({
            url: self.baseUrl + '/search?type=json&callback=?',
            data: {q: query},
            cache: false,
            dataType: 'jsonp'
          }).done(function (data) {
            self.setData(data);
            self.showSearchWidget();
            $("#searchQuery").removeClass('searching');
          });
        },
        showSearchWidget: function () {
          if (this.searchData.length > 0) {
            $('#headerSearch').popover('show');
          }
          $("#searchQuery").removeClass('searching');
        },
        createSearchContent: function () {
          var self = this;
          var contentHtml = $('<ul class=\"search-list\"></ul>');
          $.each(self.searchData.slice(0, 6), function (i, d) {
            var $li = $("<li class=\"list-link\"></li>");
            var $a = $("<a></a>");
            $a.attr('href', d.path).html(d.path + "<br>");
            var $span = $("<span class=\"search-description\"></span>");
            $span.text(d.body.substr(0, 50) + "...");
            $a.append($span);
            $li.append($a);
            contentHtml.append($li);
          });

          var $li = $("<li class=\"divider\"></li>");
          contentHtml.append($li);
          $li = $("<li class=\"next-link\"></li>");
          $li.html("<a href=\"" + self.baseUrl + "/search?q=" + encodeURIComponent(self.currentQuery) + "\">もっと見る</a>");
          contentHtml.append($li);
          return contentHtml;
        },
        jump: function (query) {
          self = this;
          top.location.href = self.baseUrl + '/search?q=' + query;
        }
      };
      var SearcherObject = new Searcher();

      $('#headerSearch').popover({
        placement: 'bottom',
        trigger: 'manual',
        html: 'true',
        content: function () {
          return SearcherObject.createSearchContent();
        }
      });
      $('#searchQuery').on('focus', function(e) {
        SearcherObject.showSearchWidget();
      });
      $('#searchQuery').on('blur', function(e) {
        $('#headerSearch').popover('hide');
      });
      $('#headerSearch').on('submit', function(e) {
        SearcherObject.jump($("#searchQuery").val());
        return false;
      });

      var previousText = "";
      setInterval(function (e) {
        var text = $("#searchQuery").val();
        if (text != previousText) {
          SearcherObject.search(text);
        }
        previousText = text;
      }, 1000);
    </script>
  </div>
</form>

{% endif %}