{# vim: set ts=2 et sts=2 sw=2: #}
{% extends "search/base.html" %}
{% set meta = (('WT.oss', q),
               ('WT.oss_r', num_results)) %}
{% block title %}
  {% if search_query %}
    {{ page_title(_('Search Results for "{search_query}"')|f(search_query=search_query)) }}
  {% else %}
    {{ page_title(_('Search')) }}
  {% endif %}
{% endblock %}

{% macro doc_block(doc) -%}
  {% set doc_url = '%s%s' % (settings.SITE_URL, url('wiki.document', doc.slug, locale=doc.locale)) %}
  <li class="doc-result">
    <h3><a href="{{ doc_url }}">{{ doc.title }}</a></h3>
    {% if doc.tags|length %}
    <i class="icon-tags"></i>
    <ul class="tags">
      {% for tag in doc.tags %}
        {% set tag_url = url('wiki.tag', tag) %}
      <li><a href="{{ tag_url }}">{{ tag }}</a></li>
      {% endfor %}
    </ul>
    {% endif %}
    <div class="searchMeta">
      {#
      <ul class="crumbs">
        {% for doc in doc.parents %}
        <li class="crumb"><a href="{{ url('wiki.document', doc.full_path) }}">{{ doc.title }}</a></li>
        {% endfor %}
        <li class="crumb">{{ doc.title }}</li>
      </ul>
      #}
    </div>
    <div class="searchHighlight">
      {# |safe here because get_excerpt uses bleach #}
      <p>{{ doc.get_excerpt()|safe }}</p>
    </div>
    <p><!-- match content here --></p>
  </li>
{% endmacro %}

{% block content %}
<section id="content">
  <div class="wrap">
    <div id="content-main" class="full">
<article id="search-results" class="main">
  <div class="search-results">

    <h1>{{ _('Search') }}</h1>

    <p id="search-survey-intro">
      {% trans %}
        We'd like to know how we can improve MDN search.  To help us out, please complete
        <a href="javascript:;" id="search-survey-link">this survey</a>.

        <div id="search-survey-dialog-content" title="Search Survey">
          <iframe src="http://www.surveygizmo.com/s3/iframe/1302591/fbb74ad279ed" frameborder="0" width="700" height="500"></iframe>
        </div>
      {% endtrans %}
    </p>

    <div class="search-form boxed">
      <form action="{{ request.path }}" method="get" id="search-form">
        <input name="q" id="search-q" type="search" value="{{ search_query }}" {% if not search_query %}autofocus{% endif %} />
        <button type="submit" id="search-submit">{{ _('Search!') }}</button>
      </form>
    </div>

    {% if search_query %}
      <div class="boxed" id="results-box"><!--RESULTS-->
      {% if result_count %}
        <h2>{{ _('Search Results For "%s"') % search_query }}</h2>

        <ul class="search-results-list">
        {% for doc in results %}
          {{ doc_block(doc) }}
        {% endfor %}
        </ul>

        <div class="pager">
        {% if next_page %}
          <a class="button" href="{{ request.get_full_path()|urlparams(page=next_page) }}">
          {{ _('Next Page') }}
          </a>
        {% endif %}
        {% if prev_page %}
          <a class="button" href="{{ request.get_full_path()|urlparams(page=prev_page) }}">
          {{ _('Previous Page') }}
          </a>
        {% endif %}
      </div>
      {% if facet_counts %}
        <div class="boxed" id="filter-box">
          <h2>{{ _('Topics') }}</h2>
          <ul>
            {% for facet in facet_counts %}
              <li>
              {% if facet.deselect_url %}
                {{ facet.label }} <span class="facet-count">{{ facet.count }}</span>
                <a href="{{ facet.deselect_url }}">x</a>
              {% else %}                
                <a href="{{ facet.select_url }}">
                  {{ facet.label }} <span class="facet-count">{{ facet.count }}</span>
                </a>
              {% endif %}
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
      {% else %}
        <h2>{{ _('Ooops!') }}</h2>
        <p>{{ _('No documents relating to your search could be found.') }}</p>
        {% include 'search/popular.html' %}
      {% endif %}
    {% else %}
      {% include 'search/popular.html' %}
    {% endif %}
    <!--/RESULTS--></div>


    <style type="text/css">
    #results-box { opacity: 1; transition-property: opacity; transition-duration: .5s; -webkit-transition-property: opacity; -webkit-transition-duration: .5s;  }
    #results-box.searching { opacity: 0.5; }

    /* basic result styling */
    .doc-result { padding: 10px; margin: 0 -10px; }
    .doc-result.selected { background: rgba(0, 0, 0, 0.05); cursor: pointer; }
    .doc-result h3 { margin-bottom: 0; }
    .doc-result p { padding-left: 0; margin-bottom: 0; font-size: 0.9em; }
    .doc-result em { background: rgb(255,255,212); }

    /* tag styling */
    .doc-result .tags { margin-bottom: 0.3em; display:inline-block; }
    .doc-result .tags li { display: inline; }
    .doc-result .tags li:after { content: ","; color: #666; }
    .doc-result .tags li:last-child:after { content: ""; }
    .doc-result .tags a { font-style: italic; }
    .search-results-list i[class='icon-tags'], .doc-result .tags a { color: #090; }
    .search-results-list i[class='icon-tags'], .doc-result .tags li { font-size: 0.8em; }

    /* crumb styling */
    .doc-result .searchMeta .crumbs { margin: 0 0 0.3em 0; }
    .doc-result .searchMeta .crumbs li { display: inline; padding-left: 13px; margin-left: 6px; background: url("{{ MEDIA_URL }}/img/nav-arrows.png") -15px -698px no-repeat; font-size: 0.8em; }
    .doc-result .searchMeta .crumbs li:first-child { padding-left: 0; margin-left: 0; background: none; }
    .doc-result .searchMeta .crumbs li a { text-decoration: underline; color: #090; }

    /* search form styling */
    .search-form  { margin-bottom: 30px; }
    #search-q     { width: 80%; -webkit-appearance: textfield; }
    #search-submit { display: inline-block; }

    /* search survey */
    #search-survey-dialog-content { display: none; }
    #search-survey-intro  { padding-left: 0; }
    #search-survey-intro a { color: #369; }
    button, .button, input[type=submit], input[type=button] { padding: .35em .75em .2em; display: inline-block; background: #bd5642 url("/media/img/button-shade.png") 0 .75em repeat-x !important; color: #fff !important; font: 200 1em/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: .5px; border: 0; -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 1px 1px 0 rgba(0,0,0,.25); -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.25); box-shadow: 1px 1px 0 rgba(0,0,0,.25); }

    /* not yet used styles -- popular / sidebar */
    .search-popular { width: 49%; float: left; margin-top: 20px; }
    .search-popular ul { list-style-type: circle; padding-left: 30px; }
    .search-popular ul li { padding-bottom: 10px; }
    .search-popular-col1{ margin-right: 1%; }
    </style>

  </div>

</article>
    </div>
   </div>
</section>
{% endblock %}

{% block js %}
  <!-- TODO:  MOVE THIS TO ENTIRE SITE PACKAGE WITH REDESIGN -->
  <script src="{{ MEDIA_URL }}js/libs/mousetrap/mousetrap.js"></script>
  <script>
      // new stuff
      (function($) {
        var $searchResults;
        var $searchInput = $('#search-q');
        var cache = {};
        var cacheValue = $searchInput.val().toLowerCase();
        var $resultParent = $('#results-box');

        // Populate $searchResults
        updateResults();

        // Keep mouseover selection in sync with keyboard selection
        $('.search-results-list')
          .on('mouseenter', '.doc-result', handleMouseEvent)
          .on('mouseleave', '.doc-result', handleMouseEvent)
          .on('click', '.doc-result', function(e) {
            if(e.target.tagName != 'a') window.location = $(e.currentTarget).find('h3 a').attr('href');
          });

        // Generates callback for mouseenter and mouseout
        function handleMouseEvent(e) {
            selectItem(e.type == 'mouseenter' ? e.currentTarget : null);
        }

        // Down Key
        Mousetrap.bind('down', function(e) {
          var item = getItem(true);
          if(item.next.length) {
            if(e.preventDefault) e.preventDefault();
            selectItem(item.next);
          }
        });

        // Up Key
        Mousetrap.bind('up', function(e) {
          var item = getItem();
          if(item.prev.length) {
            if(e.preventDefault) e.preventDefault();
            selectItem(item.prev);
          }
        });


        // Get the result list at any time
        // Useful because we'll implement ajax search
        function updateResults() {
          $searchResults = $('.doc-result');
        }

        // Returns the currently selected item, if any
        function getSelected() {
          return $('.search-results-list .selected');
        }

        // Selects an item in the list of results
        function selectItem(item) {
          var selected = getSelected();
          selected && selected.removeClass('selected');
          if(item) $(item).addClass('selected').find('h3 a').get(0).focus();
        }

        // Retrieves the selected search item, as well
        // as the other relevant item
        function getItem(isDown) {
          var selected = getSelected(),
              hasSelected = selected.length,
              first = $($searchResults.get(0));

          return {
            selected: selected,
            // Conditional depending on up or down
            next: hasSelected ? selected.next() : first,
            prev: hasSelected ? selected.prev() : (isDown ? first : [])
          };
        }

        // Call onSuccess on this page now to save current result
        ajaxSuccess(document.body.innerHTML);

        $('#search-form').on('submit', function(e) {
          e.preventDefault();

          var value = $searchInput.val(), url;

          // Save the cacheValue for use within ajaxSuccess
          cacheValue = value.toLowerCase()

          if(value) {
            url = '{{ url("search") }}?q=' + value;
            history.pushState && history.pushState({ value: value, cacheValue: cacheValue }, '', url);

            // Add this new value to history, only doing so if there's a value
            // In here to prevent the original page from being pushed
            window.addEventListener("popstate", function(info) {
              var oldValue = info.state.cacheValue || info.state.value;
              ajaxSuccess(cache[oldValue]);
              ajaxComplete();
              $searchInput.val(oldValue);
            });

            // Pull stuff from cache if we have it
            if(cache[cacheValue]) {
              ajaxSuccess(cache[cacheValue]);
              ajaxComplete();
            }
            // Go get the new stuff!
            else {
              $resultParent.addClass('searching');
              $.ajax(url, {
                complete: ajaxComplete,
                success: ajaxSuccess,
                error: function() {
                  // error case - just window.location to the url?
                  window.location = url;
                }
              });
            }
          }

          return false;
        });

        // Occurs upon successful (or cached) result
        function ajaxSuccess(result) {
            var cacheRes = result.substring(result.indexOf('<!--RESULTS-->'), result.indexOf('<!--/RESULTS-->'));
            cache[cacheValue] = result;
            $resultParent.html(cacheRes);
            updateResults();
        }

        // Occurs regardless of success or failure
        function ajaxComplete() {
          $resultParent.removeClass('searching');
        }

        // Initial action
        {% if search_query and result_count: %}
           Mousetrap.trigger('down');
        {% else %}
          $searchInput.get(0).focus();
        {% endif %}

        // Search survey launcher
        $('#search-survey-link').on('click', function() {
          $('#search-survey-dialog-content').dialog({
            width: 730,
            height: 630,
            modal: true,
            buttons: {
              {{ _('Close') }}: function() {
                $(this).dialog('close');
              }
            }
          });
        });

      })(jQuery);
  </script>
{% endblock %}