/*
*  How to create a search box that automatically searches as the user types.
*/

google.load('search', '1');

var timerId;
var input;
var contentDiv;
var lastSearch = 0;

function google_search(query)
{
    lastSearch++;
    webSearch = new google.search.WebSearch();
    webSearch.setSearchCompleteCallback(this, searchComplete, [webSearch, lastSearch]);
    webSearch.setSiteRestriction("totalkiss.com");
    webSearch.execute(query);
}

function autoSearch()
{
  // we're in the event's scope, that means this keyword = the input box.
  var query = this.value;

  if(query.length == 0 || query.replace(/\s/g, "") == "") //if the user has not entered anything
  {
    if(jQuery("#quick-search-result"))
    {
        jQuery("#quick-search-result").remove();
    }


    jQuery("#google-search-content").append('<div id="quick-search-result"><div class="no-results">No Matches</div></div>');
  }
  else 
  {
      // clear timer if there is one, set a new timer to do a search
      if(timerId)
      {
        window.clearTimeout(timerId);
        timerId = null;
      }
      timerId = window.setTimeout('google_search(\'' + query + '\')', 250);
  }

}


function searchComplete(searcher, searchNum)
{
  // Only display results if this search was the last one done.
  if (searchNum == lastSearch)
  {   
    var results     = searcher.results;
    var resultHTML  = '';

    if(jQuery("#quick-search-result")) //clear the quick search if it exists
    {
        jQuery("#quick-search-result").remove();
    }

    for(var i = 0; i < results.length; i++)
    {
      var result = results[i];

      resultHTML += '<div class="google-result-element"><a href="' + result.url + '">' + result.title + '</a></div>';
    }

    if(resultHTML == '') //there were no results returned
    {
        resultHTML = '<div class="no-results">No Matches</div>';
    }
    jQuery("#google-search-content").append('<div id="quick-search-result">' + resultHTML + '</div>');
  }
  else
  {
    jQuery("#quick-search-result").remove();
  }
}

function OnLoad() {
    contentDiv = document.getElementById('google-search-content'); //get the div that will house the search form
    input = new google.search.SearchForm(false, contentDiv); //create a standard google search form
    input.input.onkeyup = autoSearch;
    input.setOnSubmitCallback = function() {
        search(input.input.value);
    };

    //override the Google search text box so that it fits into our
    //site's look and feel
    jQuery('input.gsc-input').attr('id','s');
    jQuery('input.gsc-input').attr('title','Search Kiss');
    jQuery('input.gsc-input').attr('name','s');

    jQuery('#s').removeClass("gsc-input");
    jQuery('#s').addClass("box");
    jQuery('#s').addClass("blur");
    jQuery('#s').addClass("searchout");

    //modify the search button
    jQuery('input.gsc-search-button').attr('value', 'SEARCH');
    
    //I have taken this from the functions.js file so that it can be included as
    //part of the search box initialisation process
    jQuery('input:text').hint();
    jQuery(".gsc-input .box").blur(function () {
            jQuery(this).removeClass('searchsel');
            jQuery("#quick-search-result").slideUp("slow", function() { jQuery(this).remove(); });

    }).focus(removesearch).blur(); // now change all inputs to title
    function removesearch() {
            jQuery(".gsc-input .box").addClass('searchsel');
            jQuery(".gsc-input .box").attr('value', '');
            jQuery("#quick-search-result").attr('value', 'Search Kiss');
            jQuery("#quick-search-result").slideUp("slow", function() { jQuery(this).remove(); });
    }
    jQuery(".gsc-input .box").addClass('searchout');
}

google.setOnLoadCallback(OnLoad);