More work on search (still hidden)

.htaccess

@@ -1,3 +1,4 @@
 RewriteEngine On
 RewriteRule ^/?res/data/layouts/([A-Za-z0-9]+).js http://backend.layoutviewer.co.uk/getLayout/$1.js [P]
 RewriteRule ^/?res/data/layouts/new http://backend.layoutviewer.co.uk/saveLayout [P]
+RewriteRule ^/?res/data/layouts/search(.*) http://backend.layoutviewer.co.uk/search$1 [P]

index.html

@@ -69,6 +69,7 @@
     <div class="container">
      <h2>Search layouts</h2>
      <div id="searchterms">
+      <h3>Search parameters</h3>
       <form>
        <div class="formrow">
         <label for="search_map">Level</label>
@@ -114,6 +115,23 @@
        </div>
       </form>
      </div>
+     <div id="searchresults">
+      <h3>Search results</h3>
+      <table>
+       <thead>
+        <tr>
+         <th>Layout</th>
+         <th>Level</th>
+         <th>Difficulty</th>
+         <th>Type</th>
+         <th>Modes</th>
+         <th>Classes</th>
+        </tr>
+       </thead>
+       <tbody>
+       </tbody>
+      </table>
+     </div>
     </div>
    </div>
   </div>

res/js/viewer.js

@@ -175,6 +175,59 @@ $(function() {
   $.each(levels, function(key) {
    $('<option>').val(key + 1).text(this.name).appendTo(sel);
   });
+
+  function showSearch() {
+   $('#searchcontainer').show();
+  }
+
+  function hideSearch() {
+   $('#searchcontainer').hide();
+  }
+
+  function clearSearchResults() {
+   $('#searchresults tbody tr').remove();
+  }
+
+  function buildSearchQuery() {
+   var query = {};
+
+   var level = $('select[name=search_map]').val();
+   if (level != 'any') {
+    query.map = level;
+   }
+
+   doSearch(query);
+   return false;
+  }
+
+  function doSearch(data) {
+   clearSearchResults();
+
+   $.ajax({
+    url: 'res/data/layouts/search',
+    data: data,
+    success: handleSearch
+   });
+  }
+
+  function handleSearch(data) {
+   var body = $('#searchresults tbody');
+   $.each(data, function() {
+    this.difficulty = this.difficulty || 'unknown';
+
+    var tr = $('<tr>');
+    tr.append($('<td>').append($('<a>').attr('href', '#' + this.id).text(this.id).click(hideSearch)));
+    tr.append($('<td>').text(levels[this.level - 1] ? levels[this.level - 1].name : 'Unknown!'));
+    tr.append($('<td>').addClass(this.difficulty).text(this.difficulty));
+    tr.append($('<td>').addClass(this.type).text(this.type));
+    body.append(tr);
+   });
+  }
+
+  $('#search_submit').click(buildSearchQuery);
+  $('#search').click(showSearch);
+  $('#searchmask').click(hideSearch);
+  $('#searchclose').click(hideSearch);
  })();
 
  var thisLevel;

res/js/viewer/viewer.js

@@ -153,6 +153,60 @@ $(function() {
   $.each(levels, function(key) {
    $('<option>').val(key + 1).text(this.name).appendTo(sel);
   });
+
+  function showSearch() {
+   $('#searchcontainer').show();
+  }
+
+  function hideSearch() {
+   $('#searchcontainer').hide();
+  }
+
+  function clearSearchResults() {
+   $('#searchresults tbody tr').remove();
+  }
+
+  function buildSearchQuery() {
+   var query = {};
+
+   var level = $('select[name=search_map]').val();
+   if (level != 'any') {
+    query.map = level;
+   }
+
+   doSearch(query);
+   return false;
+  }
+
+  function doSearch(data) {
+   clearSearchResults();
+
+   $.ajax({
+    url: 'res/data/layouts/search',
+    data: data,
+    success: handleSearch
+   });
+  }
+
+  function handleSearch(data) {
+   var body = $('#searchresults tbody');
+   $.each(data, function() {
+    this.difficulty = this.difficulty || 'unknown';
+    this.type = (this.type && this.type != 'none') ? this.type : 'unknown';
+
+    var tr = $('<tr>');
+    tr.append($('<td>').append($('<a>').attr('href', '#' + this.id).text(this.id).click(hideSearch)));
+    tr.append($('<td>').text(levels[this.level - 1] ? levels[this.level - 1].name : 'Unknown!'));
+    tr.append($('<td>').addClass(this.difficulty).text(this.difficulty));
+    tr.append($('<td>').addClass(this.type).text(this.type));
+    body.append(tr);
+   });
+  }
+
+  $('#search_submit').click(buildSearchQuery);
+  $('#search').click(showSearch);
+  $('#searchmask').click(hideSearch);
+  $('#searchclose').click(hideSearch);
  })();
 
  var thisLevel;

res/style.less

@@ -182,6 +182,12 @@ body .tower.ui-draggable-dragging { z-index: 101; }
  right: 200px;
  bottom: 100px;
 
+ h3 {
+  color: @heading-color;
+  text-align: left;
+  border-bottom: 1px solid @border-color;
+ }
+
  #searchterms {
   width: 300px;
   float: left;
@@ -227,6 +233,23 @@ body .tower.ui-draggable-dragging { z-index: 101; }
    }
   }
  }
+
+ #searchresults {
+  margin-left: 330px;
+
+  table {
+   width: 100%;
+
+   thead tr {
+    color: @heading-color;
+    font-weight: bold;
+   }
+
+   tr {
+    text-align: left;
+   }
+  }
+ }
 }
 
 #layoutpicker {