var searchFormId = 'TopSearchForm';
var suggestionCallbackPage = 'searchadvanced.aspx';
var suggestionResultControlId = 'SuggestionResultContainer';
var suggestionResultCloneId = 'SuggestionResult';
var searchTermControlId = 'searchBox';
var suggestionHighlightClass = 'suggestionhighlight';

var searchForm;
var suggestionResultControl;
var suggestionResultClone;
var searchTermControl;

var selectedSuggestionResultIdx = -1;

window.addEvent('domready', function() 
    {
        searchForm = $(searchFormId);
        suggestionResultControl = $(suggestionResultControlId);
        suggestionResultClone = $(suggestionResultCloneId);
		searchTermControl = $(searchTermControlId);
        searchTermControl.addEvent('keyup', function(event) 
        {
			if (event.key == 'up')
			{
				highlightSuggestionResult(selectedSuggestionResultIdx, false);
				selectedSuggestionResultIdx--;
				
				if (selectedSuggestionResultIdx < 0)
					selectedSuggestionResultIdx = 0;
				
				highlightSuggestionResult(selectedSuggestionResultIdx, true);
				return;
			}
			
			if (event.key == 'down')
			{
				highlightSuggestionResult(selectedSuggestionResultIdx, false);
				selectedSuggestionResultIdx++;
				
				if (selectedSuggestionResultIdx > suggestionResultControl.getElements('div').length-1)
					selectedSuggestionResultIdx = suggestionResultControl.getElements('div').length-1;

				highlightSuggestionResult(selectedSuggestionResultIdx, true);
				return;
			}
			
            if (searchTermControl.value.length > 3)
            {
					selectedSuggestionResultIdx = -1;
					highlightSuggestionResult(selectedSuggestionResultIdx);
                    suggestionResultControl.setStyle('display', 'block');
                    search(suggestionCallbackPage, searchTermControl.value);
            }
        });
    }
);

    window.document.addEvent('click', function (event) {
        var left = suggestionResultControl.getPosition().x;
        var top = suggestionResultControl.getPosition().y;
        var right = left + suggestionResultControl.getSize().x;
        var bottom = top + suggestionResultControl.getSize().y;

        if ((event.client.x < left) || (event.client.x > right) || (event.client.y < top) || (event.client.y > bottom))
            suggestionResultControl.setStyle('display', 'none');
    }
);

function search(searchUrl, searchTerm)
{
    new Request.JSON(
    {
       url: searchUrl + "?suggest=true&" + searchForm.toQueryString(),
       method: 'get',
       onRequest: onRequest(),
       onFailure: onFailure,
       onSuccess: onSuccess
     }).send();
}

function onRequest()
{
    suggestionResultControl.setStyle('display', 'block');
    suggestionResultControl.setStyle('left', searchTermControl.getPosition().x);
    suggestionResultControl.setStyle('top', searchTermControl.getPosition().y + searchTermControl.getSize().y);
    suggestionResultControl.empty();
}

function onSuccess(resultData)
{
    if (resultData == null || resultData.Suggestions == null)
        return;    
  
    suggestionResultControl.empty();
    
    for (var resultIdx = 0; resultIdx < resultData.Suggestions.length; resultIdx++)
    {
        var resultItem = new ResultItem();
        resultItem.fromJSONObject(resultData.Suggestions[resultIdx]);

        var spanTitle = new Element('span', { 'html': highlightText(resultItem.Title, searchTermControl.value) + "<em style='display:none;' class='hiddensuggestion'>" + resultItem.Title + "</em>" });


        var suggestionResult = suggestionResultClone.clone();
        suggestionResult.getElements('a')[0].adopt(spanTitle);
        suggestionResult.getElements('a')[0].onclick = setSearchClick;
        suggestionResult.setStyle('display', 'block');
        suggestionResultControl.adopt(suggestionResult);
    }
}

function onFailure()
{
 }

function highlightText(text, textToHighlight)
{
    var index = text.toUpperCase().indexOf(textToHighlight.toUpperCase());    
    if (index >= 0)
    {
        var startText = text.substr(0, index);
        var highlightedText = text.substr(index, textToHighlight.length)
        var endText = text.substr(index + textToHighlight.length);
        
        return startText + '<span class="' + suggestionHighlightClass + '">' + highlightedText + '</span>' + endText;
    }
    return text;
}

function highlightSuggestionResult(selectedSuggestionResultIdx, highlight)
{
	if (!suggestionResultControl.getElements('div')[selectedSuggestionResultIdx])
		return;
	
	if (highlight) {
	    searchTermControl.value = suggestionResultControl.getElements('div')[selectedSuggestionResultIdx].getElements('em')[0].innerHTML;
		suggestionResultControl.getElements('div')[selectedSuggestionResultIdx].className = 'suggestionresultselected';
	}
	else
		suggestionResultControl.getElements('div')[selectedSuggestionResultIdx].className = 'suggestionresult';
}

function ResultItem()
{
    this.Title = '';
    
    this.fromJSONObject = function(objJSON)
    {
        if (objJSON == null)
            return;
            
        if (objJSON.Title != null)
        {
            this.Title = objJSON.Title;
        }
    }
}

function setSearchClick() {
    var selectedSuggestion = this.getElementsByTagName('em')[0].innerHTML;
    searchTermControl.value = selectedSuggestion;
    $(searchFormId).submit(); 
    suggestionResultControl.setStyle('display', 'none');
}