{% extends "silpa.html" %}

{% block modulescript %}
<style>
.highlight {
	background-color: yellow;
}
</style>
<script>
$(document).ready(function() {
    function trim(s)
    {
        var l=0; var r=s.length -1;
        while(l < s.length && s[l] == ' ')
        {
            l++;
        }
        while(r > l && s[r] == ' ')
        {
            r-=1;
        }
        return s.substring(l, r+1);
    }

    $("form").submit(function(event)
    {
        event.preventDefault();
        var id_result = $('#result'),
            id_error = $('#errormessage'),
            id_progress = $('#progress'),
            text = $("textarea[name=input_text]", 'form').val(),
            key = $("input[name=key]", 'form').val(),
            jsonRequest = {
                method: "inexactsearch.search",
                params: [text, key],
                id: ""
            };

        if(text !== "" && key !== "") {
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "{{ url_for('api.handle_jsonrpc_call')}}",
              data: JSON.stringify(jsonRequest),
              dataType: "json",
              beforeSend:function(){
                  id_result.hide();
                  id_error.hide();
                  id_progress.html("Searching. Please Wait...").show();
              },
              success: function(msg) {
                  id_progress.hide();
                  var resultobj= msg.result,
                    words = text.split(" "),
                    highlighted_text= "";
                  for(var i=0; i<words.length; i++) {
                      var word = words[i];
                      if(trim(word).length === 0) {
                          highlighted_text += " ";
                          continue;
                      }
                      if(trim(word) == "\n") {
                          highlighted_text += "<br/>";
                          continue;
                      }
                      var weight = resultobj[words[i]],
                        span = $("<span>").attr("title", weight).text(word);
                      if(weight >= 0.6) {
                          span.addClass("highlight");
                      }
                      highlighted_text += " " + span.prop('outerHTML');
                  }
                  id_error.hide();
                  id_result.html(highlighted_text).show();
              },
              error: function(msg) {
                  id_progress.hide();
                  id_error.html("Something went wrong. Please try again!").show();
              }
          });
      } else {
          id_error.html("Enter text and try again!").show();
      }
    });
});
</script>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Approximate String Search</h1>
</div>

<p align="justify">This is
a <a href="http://en.wikipedia.org/wiki/Fuzzy_string_searching">Fuzzy
string search</a> application. This application illustrates the
combined use
of <a href="http://en.wikipedia.org/wiki/Levenshtein_distance">Edit
distance</a> and <a href="Soundex">Indic Soundex</a> algorithm.</p>
  <p align="justify">By mixing both written like(edit distance) and
  sounds like(soundex), we achieve an efficient aproximate string
  searching. This application is capable of cross language string
  search too. That means, you can search Hindi words in Malayalam
  text. If there is any Malayalam word, which is approximate
  transliteration of hindi word, or sounds alike the hindi words, it
  will be returned as an approximate match. The "written like"
  algorithm used here is a bigram average algorithm. The ratio of
  common bigrams in two strings and average number of bigrams will
  give a factor which is greater than zero and less than 1. Similarly
  the soundex algorithm also gives a weight. By selecting words which
  has comparison weight more than the threshold weight(which 0.6), we
  get the search results.</p>

<form id="searchform" action="" method="post" class="form-search">
    <div class="form-group">
        <textarea name='input_text' id='input_text' placeholder='Enter the text here' rows="10" class="form-control ime"></textarea>
    </div>
    <div class="form-group col-sm-3">
        <input type="text" id="key" name="key" placeholder="Text to search for" class="form-control ime"/>
    </div>
    <div class="form-group">
        <button type="submit" id="Search" class="btn btn-default">Search</button>
    </div>
</form>

<p>In the search result. move your mouse over the words to get the comparison weight.</p>

<div id="progress" class="alert alert-info silpa-hide"></div>
<div id="errormessage" class="alert alert-danger silpa-hide"></div>
<div id="result" class="alert silpa-hide"></div>
{% endblock %}
