<!doctype html>
<title>Search Results</title>
<script type="text/javascript" src="{{ static_url('testui/jquery.js') }}"></script>
<script type="text/javascript" src="{{ static_url('sockjs.js') }}"></script>
<script type="text/javascript" src="{{ static_url('json-blaster.js') }}"></script>
<script type="text/javascript" src="{{ static_url('json-blaster-autopause.js') }}"></script>

<style type="text/css">
#infobar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-weight: bold;
  text-align: center;
}

#infobar div {
  padding: 0.3em;
}

#statistics {
  background-color: #ddd;
}

#error {
  display: none;
  background-color: #d88;
}

#results {
  padding-top: 2em;
  padding-left: 0;
  margin-left: 0;
}

#results li {
  list-style-type: none;
  display: inline-block;
  vertical-align: top;
}
</style>

<div id="infobar">
<div id="statistics">
Initializing...
</div>
<div id="error">
</div>
</div>

<ul id="results">
</ul>

<script type="text/javascript">
$(function() {
  var status = window.location.hash[1];
  var data = window.location.hash.slice(2);

  function error(text) {
    $('#error:hidden').text(text).show();
  }

  if (status === 'e') {
    // Error
    $('#statistics').hide();
    error(unescape(data));
  } else {
    // Success
    var blaster = new JSONBlasterSocket('/search', data);
    var autopause = new AutoPause(blaster);

    blaster.onclose(function() {
      error('Connection closed');
    });

    blaster.on('result', function(data) {
      var thumbnail = data['thumbnail.jpeg'];
      var image_url;
      if (thumbnail) {
        image_url = thumbnail.image_url;
      } else {
        image_url = "{{ static_url('testui/unknown.png') }}";
      }
      var jq = $('<li><a target="_blank"><img></a></li>');
      jq.find('a').attr('href', '{{ reverse_url("ui-result") }}#' + data._ResultURL.data);
      jq.find('img').attr('src', image_url);
      $('#results').append(jq);
      autopause.element_added(jq);
    });

    blaster.on('statistics', function(data) {
      $('#statistics').text(data.objs_processed + '/' + data.objs_total +
          ' objects processed');
    });

    blaster.on('error', function(data) {
      error(data.message);
    });
  }
});
</script>
