// *** Customizable parameters ***
var quickSearchConfig = {
    delay: 500,             // time to wait before executing the query (in ms)
    minCharacters: 2,       // minimum nr of characters to enter before search
    numberOfResults: 8,    // number of results to show
    resultsAnimation: 200,  // animation time (in ms) of the search results
    resultAnimation: 0,      // animation time (in ms) of individual result (when selected)
    resultUpAnimation: 200      // animation time (in ms) of individual result (when selected)
};    

var quickSearchTimer;
var quickSearchSelectedDivIndex = -1;

function showResultsDiv(text) {
    var div = $("#quickSearchResults");
    var prevItem = $("#quickSearchTextBox");
    
    var divCss = {
        "left": prevItem.offset().left - 11,
        "padding": "10px 6px 6px 6px",
        "position": "absolute",
        "top": prevItem.offset().top + prevItem.height() + 1,
        "border": "1px solid #C8C8C8",
        "border-top": "none",
        "border-radius": "0px 0px 8px 8px",
        "width": 370,
        "background": "#FFFFFF",
        "max-width": 316,
        "zIndex": 2
        };
              
    div.css(divCss).append(text).slideDown(quickSearchConfig.resultsAnimation);
}

function hideResultsDiv() {
    var div = $("#quickSearchResults");
    div.slideUp(quickSearchConfig.resultsAnimation);
}

$(document).ready(function() {
    try { $.ajaxSetup({cache: false}); } catch(e) {}
    $('#quickSearchTextBox').keyup(function(event) {
        var previousSelected = quickSearchSelectedDivIndex;
        
        // catch some keys
        switch(event.keyCode) {
            case 13:    // enter
                var selectedDiv = $("#quickSearchResults>div:eq(" + quickSearchSelectedDivIndex + ") a");
                if(selectedDiv.length == 1)
                    window.location = selectedDiv.attr("href");
                break;
            case 38:    // key up
                quickSearchSelectedDivIndex--;
                break;
            case 40:    // key down
                quickSearchSelectedDivIndex ++;
                break;
        }
        
        // check bounds
        if(quickSearchSelectedDivIndex != previousSelected) {
            if(quickSearchSelectedDivIndex < 0)
                quickSearchSelectedDivIndex = 0;
            if(quickSearchSelectedDivIndex >= $("#quickSearchResults>div").length -1)
                quickSearchSelectedDivIndex = $("#quickSearchResults>div").length - 2;                
        }
        
        // select new div, unselect the previous selected
        if(quickSearchSelectedDivIndex > -1) {
            if(quickSearchSelectedDivIndex != previousSelected) {
                unSelectDiv( $("#quickSearchResults>div:eq(" + previousSelected + ")"));
                selectDiv($("#quickSearchResults>div:eq(" + quickSearchSelectedDivIndex + ")"));
            }
        }
        
        // if the query is different from the previous one, search again
        if($('#quickSearchTextBox').data("query") != $('#quickSearchTextBox').val()) {
            if (quickSearchTimer != null) // cancel the delayed event
                clearTimeout(quickSearchTimer);
            quickSearchTimer = setTimeout(function() { // delay the searching
                    $("#quickSearchResults").fadeOut(200, initSearch);
                } , quickSearchConfig.delay);
        }
    });             

    $('#quickSearchTextBox').click( function(event) { hideResultsDiv() });
    $('body').click( function(event) { hideResultsDiv() });
});

function unSelectDiv(div) {
    // first stop all animations still in progress
    $("#quickSearchResults>div>div").stop(true,true);
    
    div.removeClass("quickSearchResultDivSelected").addClass("quickSearchResultDivUnselected");  
    $("#details", div).slideUp(quickSearchConfig.resultUpAnimation);
}

function selectDiv(div) {
    $(".quickSearchResultDivSelected").removeClass("quickSearchResultDivSelected").addClass("quickSearchResultDivUnselected").children("#details").hide();

    div.addClass("quickSearchResultDivSelected");
    $("#details", div).slideDown(quickSearchConfig.resultAnimation);
}

function initSearch() {
    // first store query in data
    $('#quickSearchTextBox').data("query", $('#quickSearchTextBox').val());
    
    // clear the results
    $("#quickSearchResults").empty();
    
    // start the search
    var query = $("#quickSearchTextBox").val();
    if(query.length >= quickSearchConfig.minCharacters) {
//        showResultsDiv("Searching ..."); // display status
        search(query);
    }
}

function search(query) {
    quickSearchSelectedDivIndex = -1;
    strURL = "/searchhelper.php" + '?StartsWith=' + $('#quickSearchTextBox').val(); //+ "#" + Math.random()*Math.random();  
    $.ajax({
        type: "GET",
        url: strURL,
//            dataType: "xml", 
        success: processResult
    });
}
    
function processResult(xml, status) {
  var html = "";
//      alert($(xml).find("Document").length);
  var divWidh = $("#quickSearchResults").width() - 13;
  
  $(xml).find("Document").each(function() {
  
    var title = $("Title", $(this)).text();
    var url = $("Action", $(this)).text();
    var description = $("Description", $(this)).text();
    var thumbnail = $("Thumbnail", $(this)).text();
    
    html += 
        "<div onclick='location.href=\"" + url + "\"' class='quickSearchResultDivUnselected' style='cursor: pointer; width:" + divWidh + "px;max-width:" + divWidh +"px; border: none; border-top: 1px dashed #C8C8C8; padding: 6px 2px;'> \
            <a href='" + url + "'>" + title + " </a> \
            <div style='display:none; margin:10px 0 0 0; padding: 0 0 6px 0;' id='details'> \
              <table class=\"noBorderPadding\" cellpadding='0' cellspacing='0'><tr>" 
                + ((thumbnail != "") ? "<td><img src='" + thumbnail + "' width=50 height=50 align='left' style='margin:0 10px 0 0; border: 1px solid #CCCCCC;'></td>" : "")
                + "<td>" + description + "</td>"
                + " \
              </tr></table> \
            </div> \
        </div>";
  });
  if ($(xml).find("totalResults").text() > 8) {
     html += "<div class='quickSearchResultUnSelected' style='background:white; border-top: 1px dashed #C8C8C8; padding: 12px 2px 6px 2px; width:" + divWidh + "px;max-width:" + divWidh +"px;text-align:right'><a href='javascript:document.getElementById(\"search_form\").submit()'>More matches...</a></div>";
  }
  
  $("#quickSearchResults").empty().append(html);
  $("#quickSearchResults>div>a").hover(
      function() { selectDiv($(this).parent()); }
  );                    
  
  if ($(xml).find("totalResults").text() > 0) {
    showResultsDiv();
  }
}

function escapeHTML (str) {
   return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}