jollytoad/photoframe.html

## photoframe.html
<!DOCTYPE html>
<html>
<head>
<title>Photos</title>
<style>
html, body { padding: 0; margin: 0; background-color: black; color: white; width: 100%; height: 100%; }
#photo { background-repeat: no-repeat; background-position: center; background-size: auto 100%; width: 100%; height: 100%; }
#msg { position: fixed; bottom: 0; right: 0; text-align: right; color: white; font-size: 10px }
</style>
</head>
<body>
<div id="photo"/>
<div id="msg"/>
<script type="text/javascript">

var users = ['sparkleysprout', 'jollytoad'],
    photos = [],
    img = document.getElementById("photo"),
    msg = document.getElementById("msg"),
    head = document.getElementsByTagName("head")[0];

function jsonp(url, delay) {
    window.setTimeout(function() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        head.appendChild(script);
    }, delay);
}

function getAlbums(user) {
    msg.innerText = "Loading " + user;
    jsonp("http://picasaweb.google.com/data/feed/api/user/"+user+"?v=2&fields=title,entry(title,link[@rel='http://schemas.google.com/g/2005%23feed'](@href))&alt=json-in-script&callback=gotAlbums", 0);
}

function gotAlbums(data) {
    msg.innerText = "Loaded " + data.feed.title.$t;
    data.feed.entry.forEach(getPhotos);
}

function getPhotos(album) {
    msg.innerText = "Loading " + album.title.$t;
    album.link.forEach(function(link, i) {
        jsonp(link.href+"&fields=title,entry(content(@src))&callback=gotPhotos", i*10);
    });
}

function gotPhotos(data) {
    msg.innerText = "Loaded " + data.feed.title.$t;
    data.feed.entry.forEach(function(entry) {
        photos.push(entry.content.src);
    });
}

function showRandomPhoto() {
    var i = Math.floor(Math.random()*photos.length),
        url = photos[i];
    if (url) {
        msg.innerText = url.replace(/^.*\//, "")
        img.style.backgroundImage = 'url(' + url + ')';
    }
    window.setTimeout(showRandomPhoto, 5000);
}

msg.innerText = "Loading...";

users.forEach(getAlbums);

showRandomPhoto();

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Photos</title>
	<style>
	html, body { padding: 0; margin: 0; background-color: black; color: white; width: 100%; height: 100%; }
	#photo { background-repeat: no-repeat; background-position: center; background-size: auto 100%; width: 100%; height: 100%; }
	#msg { position: fixed; bottom: 0; right: 0; text-align: right; color: white; font-size: 10px }
	</style>
	</head>
	<body>
	<div id="photo"/>
	<div id="msg"/>
	<script type="text/javascript">

	var users = ['sparkleysprout', 'jollytoad'],
	photos = [],
	img = document.getElementById("photo"),
	msg = document.getElementById("msg"),
	head = document.getElementsByTagName("head")[0];

	function jsonp(url, delay) {
	window.setTimeout(function() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = url;
	head.appendChild(script);
	}, delay);
	}

	function getAlbums(user) {
	msg.innerText = "Loading " + user;
	jsonp("http://picasaweb.google.com/data/feed/api/user/"+user+"?v=2&fields=title,entry(title,link[@rel='http://schemas.google.com/g/2005%23feed'](@href))&alt=json-in-script&callback=gotAlbums", 0);
	}

	function gotAlbums(data) {
	msg.innerText = "Loaded " + data.feed.title.$t;
	data.feed.entry.forEach(getPhotos);
	}

	function getPhotos(album) {
	msg.innerText = "Loading " + album.title.$t;
	album.link.forEach(function(link, i) {
	jsonp(link.href+"&fields=title,entry(content(@src))&callback=gotPhotos", i*10);
	});
	}

	function gotPhotos(data) {
	msg.innerText = "Loaded " + data.feed.title.$t;
	data.feed.entry.forEach(function(entry) {
	photos.push(entry.content.src);
	});
	}

	function showRandomPhoto() {
	var i = Math.floor(Math.random()*photos.length),
	url = photos[i];
	if (url) {
	msg.innerText = url.replace(/^.*\//, "")
	img.style.backgroundImage = 'url(' + url + ')';
	}
	window.setTimeout(showRandomPhoto, 5000);
	}

	msg.innerText = "Loading...";

	users.forEach(getAlbums);

	showRandomPhoto();

	</script>
	</body>
	</html>