dallonf/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Knockout Demo</title>
		<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="jquery.tmpl.js"></script>
		<script type="text/javascript" src="knockout.js"></script>
		<style type="text/css">
			.selected {
				border: #FFFF00 3px solid;
			}
		</style>
	</head>
	<body>
	<div id="fb-root"></div>
	<script type="text/javascript">
	  window.fbAsyncInit = function() {
		FB.init({
		  appId      : '248684061845315', // App ID
		  status     : true, // check login status
		  cookie     : true, // enable cookies to allow the server to access the session
		  oauth      : true, // enable OAuth 2.0
		  xfbml      : true  // parse XFBML
		});

		FB.login(function(response) {
			if (response.authResponse) {
				FB.api('/me', function(response) {
					$(document).ready(function() { initApp(response) });
				});
			}
		}, {scope: 'user_photos'});


	  };

	  // Load the SDK Asynchronously
	  (function(d){
		 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
		 js = d.createElement('script'); js.id = id; js.async = true;
		 js.src = "http://connect.facebook.net/en_US/all.js";
		 d.getElementsByTagName('head')[0].appendChild(js);
	   }(document));
	</script>

	<div id="resultPane" style="display: none">
		<img id="resultImage" />
		<button onclick="location.reload()">Refresh</button>
	</div>

	<div id="container">
		<div id="title">
			Photos of <span class="name" data-bind="text: userName"></span>
			<select data-bind="options: albums, optionsCaption: 'Tagged Photos', optionsText: 'name',  value: currentAlbum"></select>
		</div>
		<div id="body">
			<div data-bind="visible: photos().length === 0">There are no photos in this album</div>
			<ul data-bind="template: {name: 'photosTemplate', foreach: photos, templateOptions: { viewModel: _self }}">
			</ul>
			<div data-bind="visible: loadingPhotos">Loading...</div>
			<button data-bind="click: function() { currentPage(currentPage()-1); }, enable: currentPage() > 0">&lt;</button>
			<button data-bind="click: function() { currentPage(currentPage()+1); }, enable: nextPage">&gt;</button>
		</div>
		<button data-bind="click: submitImage, enable: currentPhoto">Submit</button>
	</div>
	<script type="text/html" id="photosTemplate">
		<li data-bind="click: function() { $item.viewModel.selectPhoto($data); }"><img data-bind="css: { selected: $item.viewModel.currentPhoto() === $data }" src="${picture}"/></li>
	</script>

	<script type="text/javascript">
	function initApp(user){

		var viewModel = {
			userId: user.id,
			userName: user.name,
			loadingPhotos: ko.observable(true),
			albums: ko.observableArray(),
			photos: ko.observableArray(),
			currentPage: ko.observable(0),
			nextPage: ko.observable(false),
			currentPhoto: ko.observable(undefined),
			currentAlbum: ko.observable(undefined),

			selectPhoto: function(photo) {
				viewModel.currentPhoto(photo);
			},

			submitImage: function() {
				if (viewModel.currentPhoto()) {
					$('#resultPane').show();
					$('#resultImage').attr('src', viewModel.currentPhoto().source);
					$('#container').hide();
				}
			},
		};

		viewModel._self = viewModel; //Hack for template foreach

		ko.dependentObservable(function() {
			var id = 'me';

			if (viewModel.currentAlbum()) {
				id = viewModel.currentAlbum().id;
			}

			viewModel.loadingPhotos(true);
			FB.api(id + '/photos', {limit: 11, offset: viewModel.currentPage() * 10}, function(response) {
				var truncatedResponse = response.data;

				if (truncatedResponse.length > 10) {
					truncatedResponse.pop(); //remove the excess item
					viewModel.nextPage(true);
				} else {
					viewModel.nextPage(false);
				}

				viewModel.photos(response.data);
				viewModel.loadingPhotos(false);
			});

		}, viewModel);

		ko.dependentObservable(function() {
			viewModel.currentAlbum(); //on currentalbum changed

			viewModel.currentPage(0);
		}, viewModel);

		FB.api('me/albums', function(response) {
			viewModel.albums(response.data);
		});

		ko.applyBindings(viewModel, $('#container')[0]);
	}
	</script>

	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Knockout Demo</title>
	<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="jquery.tmpl.js"></script>
	<script type="text/javascript" src="knockout.js"></script>
	<style type="text/css">
	.selected {
	border: #FFFF00 3px solid;
	}
	</style>
	</head>
	<body>
	<div id="fb-root"></div>
	<script type="text/javascript">
	window.fbAsyncInit = function() {
	FB.init({
	appId : '248684061845315', // App ID
	status : true, // check login status
	cookie : true, // enable cookies to allow the server to access the session
	oauth : true, // enable OAuth 2.0
	xfbml : true // parse XFBML
	});

	FB.login(function(response) {
	if (response.authResponse) {
	FB.api('/me', function(response) {
	$(document).ready(function() { initApp(response) });
	});
	}
	}, {scope: 'user_photos'});


	};

	// Load the SDK Asynchronously
	(function(d){
	var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
	js = d.createElement('script'); js.id = id; js.async = true;
	js.src = "http://connect.facebook.net/en_US/all.js";
	d.getElementsByTagName('head')[0].appendChild(js);
	}(document));
	</script>

	<div id="resultPane" style="display: none">
	<img id="resultImage" />
	<button onclick="location.reload()">Refresh</button>
	</div>

	<div id="container">
	<div id="title">
	Photos of <span class="name" data-bind="text: userName"></span>
	<select data-bind="options: albums, optionsCaption: 'Tagged Photos', optionsText: 'name', value: currentAlbum"></select>
	</div>
	<div id="body">
	<div data-bind="visible: photos().length === 0">There are no photos in this album</div>
	<ul data-bind="template: {name: 'photosTemplate', foreach: photos, templateOptions: { viewModel: _self }}">
	</ul>
	<div data-bind="visible: loadingPhotos">Loading...</div>
	<button data-bind="click: function() { currentPage(currentPage()-1); }, enable: currentPage() > 0"><</button>
	<button data-bind="click: function() { currentPage(currentPage()+1); }, enable: nextPage">></button>
	</div>
	<button data-bind="click: submitImage, enable: currentPhoto">Submit</button>
	</div>
	<script type="text/html" id="photosTemplate">
	<li data-bind="click: function() { $item.viewModel.selectPhoto($data); }"><img data-bind="css: { selected: $item.viewModel.currentPhoto() === $data }" src="${picture}"/></li>
	</script>

	<script type="text/javascript">
	function initApp(user){

	var viewModel = {
	userId: user.id,
	userName: user.name,
	loadingPhotos: ko.observable(true),
	albums: ko.observableArray(),
	photos: ko.observableArray(),
	currentPage: ko.observable(0),
	nextPage: ko.observable(false),
	currentPhoto: ko.observable(undefined),
	currentAlbum: ko.observable(undefined),

	selectPhoto: function(photo) {
	viewModel.currentPhoto(photo);
	},

	submitImage: function() {
	if (viewModel.currentPhoto()) {
	$('#resultPane').show();
	$('#resultImage').attr('src', viewModel.currentPhoto().source);
	$('#container').hide();
	}
	},
	};

	viewModel._self = viewModel; //Hack for template foreach

	ko.dependentObservable(function() {
	var id = 'me';

	if (viewModel.currentAlbum()) {
	id = viewModel.currentAlbum().id;
	}

	viewModel.loadingPhotos(true);
	FB.api(id + '/photos', {limit: 11, offset: viewModel.currentPage() * 10}, function(response) {
	var truncatedResponse = response.data;

	if (truncatedResponse.length > 10) {
	truncatedResponse.pop(); //remove the excess item
	viewModel.nextPage(true);
	} else {
	viewModel.nextPage(false);
	}

	viewModel.photos(response.data);
	viewModel.loadingPhotos(false);
	});

	}, viewModel);

	ko.dependentObservable(function() {
	viewModel.currentAlbum(); //on currentalbum changed

	viewModel.currentPage(0);
	}, viewModel);

	FB.api('me/albums', function(response) {
	viewModel.albums(response.data);
	});

	ko.applyBindings(viewModel, $('#container')[0]);
	}
	</script>

	</body>
	</html>