var MAX_RESULTS = 5;
var URL_SUGGEST = "http://suggest.otto.de/suggest/jscript";
var URL_SEARCH ="http://api.bing.net/json.aspx?AppId=0125C24B5D243F1398C1D30EC7D1951B3D2166E9&Sources=Image&JsonType=callback&JsonCallback=?&Query=";

function onBodyLoad() {
    currentSearch = '';
    currentSuggestion = '';
    xhrWorking = false; // is an XHR request currently being processed?
    searchPending = false; // do we need to do another search after we're finished processing the current one?
    resultAreaVisible = false; // is the result area visible?

    var searchBox = $('#searchBox');
    searchBox.keyup(doInstantSearch);
    searchBox.submit(doInstantSearch);

    // Focus search box
    searchBox.focus();
}

function parseSuggestionsString(result) {
    if (!result||!result.suggestionGroups[0]||!result.suggestionGroups[0].suggestions||!result.suggestionGroups[0].suggestions[0]) {
        return null;
    } else {
        return result.suggestionGroups[0].suggestions[0].searchterm;
    }
}

// STEP #1: Get top suggestion for the search term the user entered.
function doInstantSearch() {
    if (xhrWorking) {
        searchPending = true;
        return;
    }
    var searchBox = $('#searchBox');
    // Don't repeat search if nothing changed on keyUp, or the search box is blank
    if (searchBox.val() == currentSearch) {
        return;
    }
    currentSearch = searchBox.val();

    // When search box is cleared, hide resultArea
    if (searchBox.val() == '') {
        $('#resultAreaWrapper').hide();
        resultAreaVisible = false;

        currentSuggestion = '';
        updateSuggestedKeyword('<strong>Otto Instant Demo</strong>');

        return; // don't search for anything
    }

    // Do the search
    searchBox.attr('class', 'statusLoading');
    keyword = searchBox.val();

    // OTTO suggensions holen
	// ***
    $.ajax({
       url: URL_SUGGEST,
       dataType: "jsonp",
       data: "scope=//storefront/de_DE&search=" + searchBox.val(),
       success:function(result) {	
		
		var searchTerm = parseSuggestionsString(result);
		
		// if no suggestions are available, then search for the exact keyword
		if (!searchTerm) {
			searchTerm = keyword;
			updateSuggestedKeyword(searchTerm+' (Suche ohne Vorschlag)');
		} else {
			updateSuggestedKeyword(searchTerm); // try not printing out "Suggestion:"
			if (searchTerm == currentSuggestion) {
				doneWorking();
				return;
			}
		}
		getTopSearchResult(searchTerm);
		currentSuggestion = searchTerm;
	}
    });	
	
	xhrWorking = true;
	// ***
}

// STEP #2: Load results for the predicted keyword
function getTopSearchResult(keyword) {
    $.ajax({  
        type: "GET",  
        url: URL_SEARCH + keyword + "%20site:otto.de",
        dataType: "jsonp",  
        success: function(msg) {  
			if (msg.SearchResponse.Image.Results) {
				updateResultArea(msg.SearchResponse.Image.Results);
			} else {
				updateSuggestedKeyword('Kein Ergebnis f&uuml;r "'+keyword+'"');
			}
			
			doneWorking();
        } 
    });
}

function updateResultArea(results) {
    var numThumbs = (results.length >= MAX_RESULTS) ? MAX_RESULTS : results.length;

    var resultArea = $('<div />').attr('id', 'resultArea');
    for (var i = 0; i < numThumbs; i++) {
        // Load the result thumbnails
        var img = $('<img />').attr('src', results[i].MediaUrl);
        var a = $('<a />').attr('href', results[i].Url);
        a.append(img);
        resultArea.append(a);
    }
    var resultAreaWrapper = $('#resultAreaWrapper');

    $('#resultArea').remove();
    resultAreaWrapper.append(resultArea);

    if (!resultAreaVisible) {
        resultAreaWrapper.show();
        resultAreaVisible = true;
    }
}

function updateSuggestedKeyword(keyword) {
	document.getElementById('searchTermKeyword').innerHTML = keyword;
}

// Mark us as finished processing a search request, and process the pending one (if it exists)
function doneWorking() {
    xhrWorking = false;

    if (searchPending) {
        // another search happened while we were processing this one, so we need to take care of it.
        searchPending = false;
        doInstantSearch();
    }
    var searchBox = $('#searchBox');
    searchBox.attr('class', 'statusDone');
}