Implement clearing of search field

layouts/articles.html

@@ -48,7 +48,7 @@
         <fieldset>
           <label for="query">Search</label>
           <input type="text" name="q" id="query" value="" />
-          <span class="sbox_r"></span>
+          <span class="clear"></span>
         </fieldset>
       </li>
     </ul>

output/css/style.css

@@ -274,17 +274,14 @@ ul.inline li:first-child {
   font: 11px/13px "Lucida Grande", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif;
   color: #000;
 }
-#search .sbox_r {
+#search .clear {
   background: #fff url(/images/srch_r.gif) 0 0 no-repeat;
   float: left;
   width: 19px;
   height: 19px;
 }
-#search .sbox_r_f2 {
-  background: #fff url(/images/srch_r.gif) 0 -19px no-repeat;
-  float: left;
-  width: 19px;
-  height: 19px;
+#search .active {
+  background-position: 0 -19px;
 }
 
 /* Extra parts on post page */

output/js/application.js

@@ -12,6 +12,21 @@ var WezM = {
     if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) {
       $('#search input').css('paddingTop', 0);
     }
+    $('#search input').keyup(function(e) {
+      var input = $(this);
+      var clear_search = $('#search .clear');
+      var value = input.attr('value');
+      if(value && (value != '')) {
+        clear_search.addClass('active');
+      }
+      else {
+        clear_search.removeClass('active');
+      }
+    });
+    $('#search .clear.active').live('click', function() {
+      $('#search input').attr('value', '').keyup(); // Simulate keypress to clear results
+
+    });
   },
   _searchItemSelected: function() {},
   _renderArticle: function(o) {