guilleiguaran/index.html

## index.html
!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Instant Lookup</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
		<script type="text/javascript">
			var offset = -1;
			$(document).ready(function() {
				var lastQuery = "";
				$("#search").css('display','none');

				$("#query").keyup(function(e){
					e.preventDefault();
					query = $(this).val();
					if(query.length < 3 || query == lastQuery){
						$("#results").val("");
						return false;
					}
					lastQuery = query;
					search(query);
				});

				$("#form").submit(function(e){
					e.preventDefault();
					return false;
				});
			});

			function search(query){
				var requestUrl = '/search?q='+query+'&type=user&limit=21';
				if(offset != -1)
				{
					requestUrl = requestUrl + 'offset='+offset;
				}
				FB.api(requestUrl, function(response){
					var results = response.data;
					var n = results.length;
					if(n > 0)
					{
						$("#results").html("");
						for(var i=0; i<n; i++)
						{
							$("#results").append(profileLink((i+1)+". "+results[i].name, results[i].id));
							$("#results").append(profilePicture(results[i].id));
						}
					}
					else
					{
						return false;
					}
					if(response.paging)
					{
						if(response.paging.next)
						{
							var nextOffset = response.paging.next.match(/.+offset=(\d+).*/);
							offset = nextOffset[1];
						}
					}
				});

			}

			window.fbAsyncInit = function() {
				FB.init({appId: '130343237024811', status: true, cookie: true, xfbml: true});
				FB.Event.subscribe('auth.login', function(response) {
					onLogin();
				});
				FB.Event.subscribe('auth.logout', function(response) {
					onLogout();
				});

				FB.getLoginStatus(function(response) {
					if(response.session){
						onLogin();
					}
				});
			};

			function onLogin(){
				FB.api('/me', function(response) {
					$('#search').css('display','block');
				});
			}

			function onLogout(){
				$('#search').css('display','none');
			}

			function profilePicture(id){
				return '<img src="https://graph.facebook.com/'+id+'/picture?type=large"/>';
			}

			function profileLink(name, id){
				return '<p><a href="http://www.facebook.com/profile.php?id='+id+'">'+name+'</a></p>';
			}
		</script>
	</head>
	<body>
		<div id="fb-root"></div>
		<div id="wrapper">
			<div id="center">
				<div id="connect">
					<p><fb:login-button autologoutlink="true"></fb:login-button></p>
				</div>
				<div id="search">
					<form action="#" method="get" id="form">
						<input type="text" name="query" id="query" /><br />
						<input type="submit" name="submit" value="Search" />
					</form>
				</div>
				<div id="results">
				</div>
			</div>
		</div>
	</body>
</html>
	!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Instant Lookup</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
	<script type="text/javascript">
	var offset = -1;
	$(document).ready(function() {
	var lastQuery = "";
	$("#search").css('display','none');

	$("#query").keyup(function(e){
	e.preventDefault();
	query = $(this).val();
	if(query.length < 3 \|\| query == lastQuery){
	$("#results").val("");
	return false;
	}
	lastQuery = query;
	search(query);
	});

	$("#form").submit(function(e){
	e.preventDefault();
	return false;
	});
	});

	function search(query){
	var requestUrl = '/search?q='+query+'&type=user&limit=21';
	if(offset != -1)
	{
	requestUrl = requestUrl + 'offset='+offset;
	}
	FB.api(requestUrl, function(response){
	var results = response.data;
	var n = results.length;
	if(n > 0)
	{
	$("#results").html("");
	for(var i=0; i<n; i++)
	{
	$("#results").append(profileLink((i+1)+". "+results[i].name, results[i].id));
	$("#results").append(profilePicture(results[i].id));
	}
	}
	else
	{
	return false;
	}
	if(response.paging)
	{
	if(response.paging.next)
	{
	var nextOffset = response.paging.next.match(/.+offset=(\d+).*/);
	offset = nextOffset[1];
	}
	}
	});

	}

	window.fbAsyncInit = function() {
	FB.init({appId: '130343237024811', status: true, cookie: true, xfbml: true});
	FB.Event.subscribe('auth.login', function(response) {
	onLogin();
	});
	FB.Event.subscribe('auth.logout', function(response) {
	onLogout();
	});

	FB.getLoginStatus(function(response) {
	if(response.session){
	onLogin();
	}
	});
	};

	function onLogin(){
	FB.api('/me', function(response) {
	$('#search').css('display','block');
	});
	}

	function onLogout(){
	$('#search').css('display','none');
	}

	function profilePicture(id){
	return '<img src="https://graph.facebook.com/'+id+'/picture?type=large"/>';
	}

	function profileLink(name, id){
	return '<p><a href="http://www.facebook.com/profile.php?id='+id+'">'+name+'</a></p>';
	}
	</script>
	</head>
	<body>
	<div id="fb-root"></div>
	<div id="wrapper">
	<div id="center">
	<div id="connect">
	<p><fb:login-button autologoutlink="true"></fb:login-button></p>
	</div>
	<div id="search">
	<form action="#" method="get" id="form">
	<input type="text" name="query" id="query" /><br />
	<input type="submit" name="submit" value="Search" />
	</form>
	</div>
	<div id="results">
	</div>
	</div>
	</div>
	</body>
	</html>