/*****************************************************************************
    Description:Displays search suggestions and worldwides sites info via AJAX
    Written:    VSA Partners, Inc.

    CONFIGURATION: stored in object to limit possible name collisions
        config.searchURL:  url requested for search suggestions, JSON formatted response

	Results from AJAX call are expected in the following format
		obj[i].title
		obj[i].url
		obj[i].content

    displayResults() builds and inserts HTML fragment into #header-results
	<div id="search-suggestions">
		<a class="closer" href="#">X Close</a>
		<h2 id="header-results-label" class="results-label">Search Suggestions</h2>
		<ul aria-labelledby="header-results-label" role="list" id="header-results-list" class="results">
			<li role="listitem"><a class="result-title" href="<%obj[i].url%>"> <% obj[i].content %> | <% obj[i].content %></a></li>
			<li role="listitem"><a class="result-title" href="http://www.pg.com/"><b>Procter</b> & Gamble | Multinational manufacturer of product ranges including personal care, household   cleaning, laundry detergents, prescription drugs and disposable nappies.</a></li>
			<li role="listitem"><a class="result-title" href="http://www.pg.com/jobs/sectionmain.shtml">P&G - Global Careers | ©2009 <b>Procter</b> & Gamble. All claims valid only in the U.S. Terms and Conditions   Privacy Statement P&G Links Site Help Site Map Contact Us <b>...</b></a></li>
			...
			</li>
		</ul>
	</div>
*****************************************************************************/

var config = {
	searchURL 	: 	'http://www.pg.com/en_US/_php/google_ajax_search.php?q=',
	maxResults	:	10
};

$(function() {
	var $header = $('#header-results'); 
	$('#search-text').attr('autocomplete','off').bind('focus keyup',function() {
		var q = $(this).val();

		if (q.length > 1) {
			if ($header.children('#worldwide-sites').length) {
				$header.data('open',false).animate({'opacity':0}, function (){performSearch(q)});
			} else {
				$header.data('open',true);
				performSearch(q);
			}
		} else if (q.length == 0) {
			$header.slideUp('slow',function(){
				$header.empty().css('height','auto');
			});
		}
	})

	$('#search-suggestions .closer, #worldwide-sites .closer').live('click', function(){
		$(this).parents('#header-results').slideUp(function(){
			$header.empty().css('height','auto');
		});
	});

  	if (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
 		$('#header-results li').live('mouseover', fixIE6HoverOn);
 		$('#header-results li').live('mouseout', fixIE6HoverOff);
 	} //IE 6

function fixIE6HoverOn(e) {
	var that = $(this);
	if (!that.data('bgcolor')) that.data('bgcolor', that.css('background-color'));
	clearTimeout($(this).data('timer'));
	$(this).css('background','none');
}
function fixIE6HoverOff(e) {
	var that = $(this);
	that.data('timer',setTimeout(function (){
		that.css('background',that.data('bgcolor'));
	}),50);
}


function performSearch(txt) {
 	$.getJSON(config.searchURL+encodeURIComponent(txt)+'&callback=?',function (results){
 		displayResults(results.responseData.results);
 	})
}

function displayResults(res){
	var lis = [];
	var resultsNum = res.length > config.maxResults ? config.maxResults : res.length;
	if (res.length > 1) {
		for (var i=0; i < resultsNum; i++) {
			lis.push('<li role="listitem"><a href="'+res[i].url+'" class="result-title">');
			lis.push(res[i].title);
			lis.push(' <span class="separator">|</span> '+res[i].content+'<\/a><\/li>');
		}
	} else {
		lis.push('<li role="listitem"><a href="#" class="result-title">No results found<\/a>');
	}

 	if (!$('#search-suggestions').length) {
 		$header.html('<div id="search-suggestions"><a href="#" class="closer">X Close<\/a><h2 class="results-label" id="header-results-label">Search Suggestions<\/h2><ul class="results" id="header-results-list" role="list" aria-labelledby="header-results-label"><!--Search results here--><\/ul><\/div>');
 	}
 	$('#header-results-list').empty().append(lis.join('')); 

 	if ($header.data('open')) {
 		$('#header-results:hidden').animate({'opacity':1}).slideDown();
 	} else {
 		$header.animate({'opacity':1,'height':$('#search-suggestions')[0].scrollHeight})
 	}
}

});