Event.observe(window, 'load', function() {
	var link = $('frontPic');
	link.setStyle({ width: $('frontPic').down().getWidth() + 'px', height: $('frontPic').down().getHeight() + 'px' });
	link.setOpacity(0.0);
	link.setStyle({visibility: 'visible'});
	
	new Effect.Opacity(link, {from: 0.0, to: 1.0, duration: 1});
	
	window.setInterval(function() { new Ajax.Request('randpic.php', { method: 'get', onSuccess: changePic }); }, 5000);
});

function changePic(transport, json) {
	var pic = new Image();
	var link = $('frontPic');
	var img = link.down();
	
	pic.onload = function() {
		// first set the background image of the <a> to the new picture
		link.setStyle({ backgroundImage : 'url(' + json.pic + ')' });
		
		
		// now fade the <img> picture ut to reveal it
		new Effect.Opacity(img, { from: 1.0, to: 0.0, duration: 1, afterFinish: function () {
			// now set the <img>'s stuff to the new picture and show it again
			img.setAttribute('src', json.pic);
			img.setAttribute('alt', 'Photo of ' + json.name);
			img.setAttribute('title', 'Photo of ' + json.name);
			link.setAttribute('href', 'view.php?id=' + json.id);
			link.setAttribute('title', 'View ' + json.name + '\'s Profile');
			
			// now hide the evidence of a background image
			img.setOpacity(1.0);
			link.setStyle({ width: pic.width + 'px', height: pic.height + 'px' });
			link.setStyle({ backgroundImage: 'none' });
		}});
		
		// right, while it fades let's change the dimensions!
		var ow = Element.getWidth(link);
		var oh = Element.getHeight(link);
		var nw = pic.width;
		var nh = pic.height;
		
		// make sure we don't morph in ie6, it looks poo
		new Effect.Morph(link, { style: {width: nw + 'px', height: nh + 'px' }, duration: 1 });
		
		pic.onload = function() {}; // clear onload
	};
	
	pic.src = json.pic;
}