var repositionCallout = function(){
	var callout = $('#callout');
	var p = callout.data('li').offset();
	callout.css({left: p.left+10});
}
var setupCallout = function(li, htmlc, ignoreh){
	var callout = $('#callout');
	callout.data('li', li);
	$('.m', callout).html(htmlc);
	var h = callout.outerHeight();
	callout.hide();
	
	$('#top').css({height:Math.min(240,Math.max(120,h-80))});
	var p = li.offset();
	callout.css({top: p.top-h-10});
	repositionCallout();
	callout.fadeIn(500);	
};
$(window).resize(function(){
	repositionCallout();
});
var populateTimeline = function(tumblr){
	var spinner = '<img src="static/spinner-dark.gif" alt="Loading..." />';
	$('body').append($(spinner).css({position:'absolute',left:-10000,top:-10000}));
	var ul = $('#timeline .bar ul');
	for (var i=0; i < tumblr.posts.length; i++){
		//tumblr_api_read.posts[i].url
		//text, quote, photo, link, chat, video, or audio
		var ctype = tumblr_api_read.posts[i].type;
		if (ctype == 'regular') ctype = 'blurb';
		else if(ctype != 'photo' && ctype != 'video') continue;
		var a  = $('<a href="javascript:void(0)"><img src="static/null.gif" alt="" /></a>');
		var li = $('<li class="'+ctype+'"></li>').append(a);
		var timeago = $.relatizeDate($('<span>'+tumblr_api_read.posts[i].date+'</span>'));
		tumblr_api_read.posts[i].timeago = timeago;
		li.data('post', tumblr_api_read.posts[i]);
		a.click(function(){
			var p = $(this).parent();
			var d = p.data('post');
			var h = null;
			switch (d.type){
				case 'video':
					h = d['video-player'];
					break;
				case 'photo':
					var img = $('<img src="'+d['photo-url-400']+'" style="position:absolute;left:-10000px;top:-10000px;" alt="" />');
					$('body').append(img);
					var photoInit = function(){
						var w = img[0].clientWidth;
						img.remove();
						h = '<a class="imgwrap" href="'+d.url+'"><img src="'+d['photo-url-400']+'" alt="" /></a>';
						if (d['photo-caption'] && d['photo-caption'].length > 1){
							h += '<div class="caption" style="width:'+w.toString()+'px">'+d['photo-caption']+'</div>';
						}
						setupCallout(p, h);
					};
					if (!img[0].clientWidth){
						img.load(photoInit);
						setupCallout(p, spinner, true);
						return;
					}else{
						photoInit();
					}
					break;
				case 'regular':
					if ($.trim($(d['regular-body']).text()).length <= 140){
						setupCallout(p, '<div class="blurb" href="'+d.url+'"><p class="ontwitter"><a href="http://twitter.com/brianreavis">On Twitter</a><span class="time">, '+d.timeago+':</span></p>'+d['regular-body']+'<p class="follow"><a href="http://twitter.com/brianreavis">Follow me</a></p></div>');
					}else{
						var bBody = d['regular-body'];
						if (bBody.length > 200){
							bBody = bBody.substring(0, 200) + '&hellip &ndash; <a href="' + d.url + '">Read More</a>';
						}
						setupCallout(p, '<div class="blurb"><p class="blurbtitle">Blurb <span class="time">, '+d.timeago+':</span></p>'+bBody+'</div>');
					}
					break;
			}
			if (d.type == 'video'){
				h = d['video-player'];
			}
			if (h) setupCallout(p, h);
			return false;
		});
		ul.append(li);
	}
	window.setTimeout(function(){ 
		$('#timeline .bar ul li:first-child a').trigger('click'); 
	}, 300);
	
	//animate in
	var t=0;
	$('#timeline .bar ul li').each(function(){
		var e=$(this);
		window.setTimeout(function(){
			e.show('slide', null, 200);
		}, t);
		t+=20+Math.random()*50;
	});
	
	//timeline legend
	$('#timeline-legend li').hover(function(){
		var cType=this.className;
		$(this).css({backgroundPosition:'bottom right'});
		$('#timeline .bar ul li.'+cType+' img').css({backgroundPosition:'bottom left'});
	},function(){
		var cType=this.className;
		$(this).css({backgroundPosition:'top right'});
		$('#timeline .bar ul li.'+cType+' img').css({backgroundPosition:''});
	}).css({cursor:'pointer'}).each(function(){
		var cType=this.className;
		$(this).click(function(){
			window.location.href='http://feed.thirdroute.com/#'+cType;
		});
	});
};
populateTimeline(tumblr_api_read);