$(document).ready(function() {
    var SearchBox = $('#SearchBox');

    SearchBox
        .watermark("Search for friends, recipes, articles...");

    SearchBox.keyup(function() {
        var searchTerm = SearchBox.val();
        if (!searchTerm) {
            $('#SearchResults').hide();
            return;
        }
        
        GetSearchResults(searchTerm, 0, 8, function(msg) {
            ShowSearchResults(msg.d);
        });
    });

    SearchBox.focus(function() {
        $('#SearchResults').show();
    });

    SearchBox.blur(function() {
        setTimeout(function() { $('#SearchResults').hide(); }, 250);
    });
});

function GetSearchResults(searchTerm, start, limit, callback) {
    $.ajax({
        type: "POST",
        url: "Service.asmx/Search",
        data: JSON.stringify({ search: searchTerm, start: start, limit: limit }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: callback,
        failure: function(msg) {
            alert('//TODO: Handle Failure');
        }
    });
}

function ShowSearchResults(html) {
    var searchResults = $('#SearchResults');
    var SearchBox = $('#SearchBox');

    if (!searchResults.length) {
        searchResults = $('<div id="SearchResults" class="SearchResults" />');
        $('body').append(searchResults);
    }

    var offset = SearchBox.offset();
    var height = SearchBox.height();
    var width = SearchBox.width();
    var top = offset.top + height + "px";
    var left = offset.left + "px";

    var searchTerm = SearchBox.val();
    var showMoreLink = $('<a style="padding-left: 60px;" />')
        .attr('id', 'ShowMoreResultsLink')
        .attr('href', 'Search.aspx?search=' + searchTerm)
        .text('Show Me More');
        
    searchResults
        .html(html)
        .show()
        .css({
            'position': 'absolute',
            'left': left,
            'top': top
        })
        .append(showMoreLink);
}

function ShowFullSearchResults(html) {
    var newResults = $(html);
    $('div[id$="FullSearchResults"]').append(newResults);
}

function MoreSearchResults() {
    var searchTerm = $('input[id$="SearchInput"').val();
    var limit = $('input[id$="SearchLimitInput"').val() * 1;
    var start = $('input[id$="SearchStartInput"').val() * 1 + limit;
    $('input[id$="SearchStartInput"').val(start);
  
    GetSearchResults(searchTerm, start, limit, function(msg) {
        ShowFullSearchResults(msg.d);
    });
    
}