adding an image to the background of search results so we can set the…

… z-index of 'rest-of-word' to a negative value to hide

app/controllers/memory_search_controller.rb

@@ -3,7 +3,9 @@ class MemorySearchController < ApplicationController
 
   def new
     result = Search.perform(params[:search_mem_text], params[:search_category])
-  	render :json => {:search_result => result, :search_mem_text => params[:search_mem_text], :search_category => params[:search_category]}
+    wt = WordTokenizer.new(result[:text])
+    text = wt.decorated_full_text
+  	render :json => {:search_result => {:text => text, :header => result[:header]}, :search_mem_text => params[:search_mem_text], :search_category => params[:search_category]}
   end
 
 end

app/models/word_tokenizer.rb

@@ -2,9 +2,9 @@ class WordTokenizer
   attr_reader :fact
   attr_reader :words
   attr_reader :first_letter_text
-  
+
   delegate :heading, :to => :fact
-  
+
   def initialize(raw_text)
     @raw_text = raw_text
     @words = []
@@ -16,6 +16,28 @@ def first_letter_indexes
     @first_letters ||= @words.collect{|w| w[:start]}
   end
 
+  def decorated_full_text
+    puts @raw_text
+    puts @words.inspect
+
+    ft = @raw_text.clone
+    num_chars_inserted = 0
+    end_span = "</span>"
+    @words.each_with_index do |word, index|
+      first_span = "<span class='first' data-word-num='#{index}'>"
+      remaining_span = "<span class='rest-of-word' data-word-num='#{index}'>"
+      ft.insert(word[:start] + num_chars_inserted, first_span)
+      num_chars_inserted += first_span.length
+      ft.insert(word[:start] + num_chars_inserted + 1, end_span)
+      num_chars_inserted += end_span.length
+      ft.insert(word[:start] + num_chars_inserted + 1, remaining_span)
+      num_chars_inserted += remaining_span.length
+      ft.insert(word[:end] + num_chars_inserted, end_span)
+      num_chars_inserted += end_span.length
+    end
+    ft
+  end
+
   def full_text
     @full_text ||= build_full_text
   end
@@ -68,7 +90,8 @@ def build_first_letters
         @first_letter_text << c
         if in_word
           if /[^A-Za-z\']/.match(c)
-            end_word.call index 
+            puts "calling end word for #{c}"
+            end_word.call index
           else
             @first_letter_text[-1] = ' '
           end
@@ -96,7 +119,7 @@ def start_word(c, index)
   end
 
   def close_word(close_index)
-    @words.last[:end] = close_index
+    @words.last[:end] = close_index unless @words.last[:end]
     previous_end = @words.length == 1 ? 0 : (@words[-2][:end] + 1)
     @words.last[:reveal] = full_text[previous_end..close_index]
   end

app/views/home/index.html.haml

@@ -12,4 +12,6 @@
     .clear
   .search-results.span-22.last.prepend-1.append-1.prepend-top
     .header
+    .first-letter-choice
+      %input{:type => :checkbox} Just First Letters?
     .text

public/javascripts/search.js

@@ -56,6 +56,17 @@
     return allowed;
   };
 
+  $.onlyShowFirstLetters = function(onlyShow) {
+    if(onlyShow) {
+      $('span.rest-of-word').removeClass('to-front');
+      $('span.rest-of-word').addClass('to-back');
+    }
+    else {
+      $('span.rest-of-word').removeClass('to-back');
+      $('span.rest-of-word').addClass('to-front');
+    }
+  };
+
   $.search = function() {
     if ($.isSearchAllowed()) {
       var ajaxOptions = {
@@ -72,6 +83,9 @@
   };
 
   $.initSearch = function() {
+    $('.search-results .first-letter-choice input[type=checkbox]').click(function() {
+      $.onlyShowFirstLetters($(this).is(':checked'));
+    });
     $('.search-form input[type=radio]').click(function() {
       $.search();
     });

public/stylesheets/application.css

@@ -65,6 +65,18 @@ a {
     font-size: 30px;
     color: #aa0000; }
 
+.first-letter-choice {
+  margin-top: -5px;
+  font-size: 14px;
+  margin: -5px 0 20px 0; }
+
+span.rest-of-word {
+  position: relative; }
+  span.rest-of-word.to-back {
+    z-index: -3; }
+  span.rest-of-word.to-front {
+    z-index: 3; }
+
 .search-form button {
   margin-left: 30px; }
 
@@ -77,7 +89,7 @@ a {
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
-  background: #ebe3d1 none repeat scroll 0 0;
+  background: url(/images/bg.gif) repeat 0 0;
   border: 5px solid #cbc2ae;
   padding: 30px 35px; }
   .search-form label, .search-results label {

public/stylesheets/sass/application.sass

@@ -69,6 +69,18 @@ a
     font-size: 30px
     color: #AA0000
 
+.first-letter-choice
+  margin-top: -5px
+  font-size: 14px
+  margin: -5px 0 20px 0
+
+
+span.rest-of-word
+  position: relative
+  &.to-back
+    z-index: -3
+  &.to-front
+    z-index: 3
 .search-form button
   margin-left: 30px
 .search-form, .search-results
@@ -80,7 +92,8 @@ a
   -moz-border-radius-bottomright: 10px
   -moz-border-radius-topleft: 10px
   -moz-border-radius-topright: 10px
-  background: #EBE3D1 none repeat scroll 0 0
+  //background: #EBE3D1 none repeat scroll 0 0
+  background: url(/images/bg.gif) repeat 0 0
   border: 5px solid #CBC2AE
   padding: 30px 35px