City Evolution Snapshotter 2.0

<html>
<head>
<style type='text/css'>
*{
	font-family:Verdana;
	font-size:14px;
	text-shadow:#000;
	color:#777;
	padding:0;
	margin:0;
	border:0;
}
#backgroundDiv{
	position:absolute;
	background-color:#000;
}
img{
	opacity:0.5;
}
img:hover{
	opacity:1;
}
</style>

<script type='text/javascript'>
if(window.addEventListener) {
window.addEventListener('load', function () {
	var timeDiv = document.getElementById('time');

	function init(){
		window.setInterval(updateTime,100);
	}

	function updateTime() {
		timeDiv.textContent = new Date();
	}

	init();
}, false); }
</script>

<script>
/* these calls are just the plumbing */

pipesrpc = {};
pipesrpc._timeoutlength = 30000;  /* 30 seconds by default */
pipesrpc._running = [];

pipesrpc._timeout = function(id,url) {
    var cbo = pipesrpc._running[id];
    pipesrpc._running[id]=null;
    if (!cbo.callbackErr) return;
    cbo.callbackErr("Timeout",-1,cbo.self);
}

pipesrpc._buildurl = function(pipeid,params) {
	var url = "http://pipes.yahoo.com/pipes/pipe.run?_id="+pipeid+"&_render=json";
	if (params) {
    	for (var key in params) {
            if (params[key]===null) continue;
    		url+="&"+encodeURIComponent(key)+"="+encodeURIComponent(params[key])
    	}
	}
    return url;
}

pipesrpc._callbackhandler = function(o) {
	var cbo = pipesrpc._running[callbackIndex];
    if (!cbo) return;
    pipesrpc._running[callbackIndex]=null;
   	window.clearTimeout(cbo.timeout);
   	if (!o || !o.count) {
   	    if (!cbo.callbackErr) return;
        cbo.callbackErr("Bad response",-2,cbo.self);
        return;
   	}
    if (!cbo.callbackOk) return;
    cbo.callbackOk(o,cbo.self);
}

pipesrpc._execute = function(url,callbackOk,callbackErr,timeoutlength) {
    if (!timeoutlength) timeoutlength = pipesrpc._timeoutlength;
    var id = pipesrpc._running.length;
  	url+="&_callback=pipesrpc._callbackhandler_"+id;
    var s=document.createElement("script");
    s.setAttribute("src",url);
    var fn = ""+pipesrpc._callbackhandler;
    fn = fn.replace(/callbackIndex/g,id);
    eval("pipesrpc._callbackhandler_"+id+"="+fn);
    pipesrpc._running.push({self:this,callbackOk:callbackOk,callbackErr:callbackErr,timeout:window.setTimeout(function() { pipesrpc._timeout(id,url); },timeoutlength)});
    document.getElementsByTagName("head")[0].appendChild(s);
    return id;
}

/* use these three calls to run and cancel Pipes calls */
pipesrpc.cancelrequest = function(id) {
	var cbo = pipesrpc._running[id];
    window.clearTimeout(cbo.timeout);
    pipesrpc._running[id]=null;
}

pipesrpc.cancelallrequests = function() {
    for (var i=0; i<pipesrpc._running.length; i++) {
        pipesrpc._cancelrequest(i);
    }
}

pipesrpc.run = function(pipeid,params,callbackOk,callbackErr,timeoutLength) {
    return pipesrpc._execute(pipesrpc._buildurl(pipeid,params),callbackOk,callbackErr,timeoutLength);
}


//city evolution snapshotter 1: a89e0ee56e4ab0f5c87eeac4ac8f4b98
//city evolution snapshotter 2: e33e408470f7201732d7ffc14339c170
//city evolution snapshotter 4: 00cb3b7a776f55c2c2866b5dd27effa6

var requestId = pipesrpc.run('00cb3b7a776f55c2c2866b5dd27effa6',null,
    function(data) {
		var b = document.getElementById('backgroundDiv');
		data.value.items = shuffle(data.value.items);
		for(i=0;i<data.count;i++){
			var img = img_create(data.value.items[i].content,'','');
			b.appendChild(img);
		}
	},
    function(errorMessage,errorCode) {
        alert("Problem running pipe: "+errorMessage);
    }
);


function img_create(src, alt, title) {
    /*modified from: http://stackoverflow.com/questions/226847/what-is-the-best-javascript-code-to-create-an-img-element*/
    var img = document.createElement('img');
    img.src = src;
    img.width = 180;
    img.height = 180;
    //img.style.opacity = 0.25;
    if (alt!=null) img.alt = alt;
    if (title!=null) img.title = title;
    return img;
}


function shuffle(o){ //v1.0
	/*code from: http://snippets.dzone.com/posts/show/849*/
	//+ Jonas Raoni Soares Silva
	//@ http://jsfromhell.com/array/shuffle [v1.0]
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
};
</script>

</head>
<body onload='requestId'>
<div id='time'>Time will appear here.</div>
<div id='backgroundDiv'/>
</body>
</html>