/*
 * slide.js
 * By Barney Stratford
 * 26th February 2008
 *
 * Toggles between "large" and "small" photos in the photo
 * album, with a (hopefully) attractive animated effect.
 */

/* How long, in milliseconds, does it take to toggle? */
var slide_time = 500;

/* How long, in milliseconds, between frames in the animation? */
var tick_time = 25;

function toggle_image (id, smallx, smally, largex, largey)
{
	/* Find the element with the right id and the image it contains */
	var el = document.getElementById(id);
	if (!el)
	{
		return;
	}
	var im = el.getElementsByTagName ("img") [0];
	if (!im)
	{
		return;
	}
	
	/* Prepare the page for the slide */
	var big = new Image (largex, largey);
	big.src = "large/" + id;
	el.style.textAlign = "left";
	el.style.cssFloat = el.style.styleFloat = "none";
	el.blur ();
	im.src = "small/" + id;
	
	/* Initialise the slide */
	if (el.slide)
	{
		el.slide.direction = -el.slide.direction;
	}
	else
	{
		el.slide = {direction: 1, amount: 0};
	}
	el.slide.time = new Date ().getTime ();
	
	function tick ()
	{
		/* How long has elapsed since the last tick? */
		var time = el.slide.time;
		el.slide.time = new Date ().getTime ();
		el.slide.amount += el.slide.direction * (el.slide.time - time);
		
		if (el.slide.amount >= slide_time && el.slide.direction > 0)
		{
			/* We've finished zooming in */
			el.slide.amount = slide_time;
			el.style.padding = "0";
			el.style.textAlign = "center";
			im.width = largex;
			im.height = largey;
			im.src = big.src;
		}
		else if (el.slide.amount <= 0 && el.slide.direction < 0)
		{
			/* We've finished zooming out */
			el.slide.amount = 0;
			el.style.padding = "0";
			el.style.textAlign = "left";
			el.style.cssFloat = el.style.styleFloat = "left";
			im.width = smallx;
			im.height = smally;
		}
		else
		{
			/* Display the next frame of the animation */
			/* The centre point of the image slides to its new position
			   linearly with time. The image's x and y dimensions scale
			   as time cubed. In order to minimise the ungainly jump as
			   the text stops flowing round the image, the position of
			   the text also changes as a cubic with time.
			*/
			var linear = el.slide.amount / slide_time;
			var cubic1 = linear * linear * linear;
			var cubic2 = 1 - (1 - linear) * (1 - linear) * (1 - linear);
			var sizex = Math.round (smallx + (largex - smallx) * cubic1);
			var sizey = Math.round (smally + (largey - smally) * cubic1);
			var width = Math.max (el.offsetWidth - 2, largex);
			var height = Math.max (el.offsetHeight - 2, largey);
			var offsetx = Math.round ((smallx - sizex + (width - smallx) * linear) / 2);
			var offsety = Math.round ((smally - sizey + (height - smally) * linear) / 2);
			var margin = Math.round (smally - offsety - sizey + (largey - smally) * cubic2);
			el.style.paddingLeft = offsetx.toString() + "px";
			el.style.paddingTop = offsety.toString() + "px";
			el.style.paddingBottom = margin.toString() + "px";
			im.width = sizex;
			im.height = sizey;
			setTimeout (tick, tick_time);
		}
	}
	
	/* Start the slide */
	tick ();
}