Creates a slideshow from a PicasaWeb account

slideshow.js

var results = 5;
var slideshow_height;
var slideshow_width;
var wait_secs = 8;
var time_to_fade = 1000.0;
var picasa_url = 	"http://picasaweb.google.com/data/feed/api/user/"+
					"rovers@mayflowerscout.org"+"?"+
					"alt=json-in-script"+"&"+
					"callback=slideshowRender"+"&"+
					"kind=album"+"&"+
					"access=public"+"&"+
					"max-results="+results;

var slideshow_loading = true;
var show_started = false;

var dbg_feed;
var slideshow_viewer;
var caption_title;
var caption_summary;
var caption_link;

function fade(element,onfaded){
	if(element == null) return;
	element.FadeTimeLeft = time_to_fade;
	setTimeout(function(){
		animateFade(new Date().getTime(),element,onfaded);
	}, 33);
}

function animateFade(lastTick,element,onfaded) {
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - lastTick;

	element.FadeTimeLeft -= elapsedTicks;
	var newOpVal = element.FadeTimeLeft/time_to_fade;
	
	element.style.opacity = newOpVal;
	element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
	if(element.FadeTimeLeft <= 0){
		element.style.visibility = "hidden";
		element.style.opacity = 1;
		element.style.filter = 'alpha(opacity = 100)';
		if(onfaded) onfaded();
	} else {
		setTimeout(function(){
				animateFade(curTick,element,onfaded);
		}, 33);
	}
	
}



function slideshowRender(feed){
	dbg_feed = feed.feed.entry;
	var feed_entries = feed.feed.entry;
	for(var i=0;i<feed_entries.length;i++){
		var title = feed_entries[i].title.$t;
		var summary = feed_entries[i].summary.$t;
		var link = feed_entries[i].link[1].href;
		var image_url = feed_entries[i].media$group.media$content[0].url;
		var slide = create_slide(slideshow_viewer,image_url,title,summary,link);
	}
}

function startShow(){
	if(show_started) return;
	else show_started = true;
	var round_robin = function(){
		var current = slideshow_viewer.getElementsByTagName("div")[0];
		current.style.zIndex = 2;
		var next = slideshow_viewer.getElementsByTagName("div")[1];
		next.style.zIndex = 1;
		caption_title.innerHTML = next.title;
		caption_link.href = next.link;
		caption_summary.innerHTML = next.summary;

		fade(current,function(){
			current.style.zIndex= 0;
			current.style.visibility = "visible";
			slideshow_viewer.removeChild(current);
			slideshow_viewer.appendChild(current);
		});
		setTimeout(round_robin,wait_secs*1000);
	};
	setTimeout(round_robin,wait_secs*1000);
}

function create_slide(viewer,url,title,summary,link){
	var slide=document.createElement("div");
	slide.className = "slide";
	slide.summary = summary;
	slide.title = title;
	slide.link = link;
	var s=document.createElement("img");
	s.src = url;

	s.onload = function(){
		var width = s.width;
		var height = s.height;
		if((width/height)<=(slideshow_width/slideshow_height)){
			s.width = slideshow_width;
			s.height = Math.floor((slideshow_width/width)*height);
			s.style.top = Math.floor((slideshow_height-s.height)/2)+"px";
		} else {
			s.height = slideshow_height;
			s.width = Math.floor((slideshow_height/height)*width);
			s.style.left = Math.floor((slideshow_width-s.width)/2)+"px";
		}
		s.style.visibility ="visible";
		slide.appendChild(s);
		viewer.appendChild(slide);
		if(slideshow_loading) {//FIRST!! to load
			viewer.removeChild(viewer.children[0]);
			slide.style.zIndex = 2;
			slideshow_loading = false;
			document.getElementById("caption").style.visibility = "visible";
			caption_title = document.getElementById("title_text");
			caption_summary = document.getElementById("summary_text");
			caption_link = document.getElementById("caption_link");
			
			caption_title.innerHTML = slide.title;
			caption_link.href = slide.link;
			caption_summary.innerHTML = slide.summary;
		} else {
			slide.style.zIndex = 0;
		}
		if(viewer.children.length > 1) startShow();
	}
	return slide;
}

(function(){
	call_on_load(function(){
		loadJS(picasa_url);
		slideshow_viewer = document.getElementById("slideshow");
		var holder = document.getElementById("slideshow_holder");
		slideshow_width = holder.clientWidth;
		slideshow_height = holder.clientHeight;
	});
})();