$(document).ready( function() {
	
	$("div.bio").each( function() {
		// retrieve the heights of the full and teaser blocks as determined by the browser,
		// then save them as custom attributes for later use
		var full_height = $(this).height();
		$(this).attr('full_height',full_height);
		var teaser_height = $(this).children("p").eq(0).height();
		$(this).attr('teaser_height',teaser_height);
		// finally, set the bio div to the teaser height initially
		$(this).css({ height: teaser_height });
	});

	$(".more").click( function() {
		// hide the more link:
		$(this).css('display','none');
		// and animate to full height:
		var parent_div = $(this).parent().parent();
		var h = parent_div.attr('full_height');
		parent_div.animate({ height: h }, 'slow');
	});

	$(".close").click( function() {
		// animate back to teaser height
		var parent_div = $(this).parent().parent();
		var teaser_height = parent_div.attr('teaser_height');
		parent_div.animate({ height: teaser_height }, 'slow');
		// and again show the more link:
		parent_div.queue( function() {  // (queue'ing so as to wait til animation stops)
			$(this).find(".more").css('display','inline');
			$(this).dequeue();
		});
	});

});