var MAX_SIZE = 100;
var MIN_SIZE = 75;
var FRAME_DELAY = 15;  // ms

// Array of all images on the page
//
var g_rgImgs = null;

// Keep track of interval ID for animation
//
var g_iIntId = 0;

/// <summary>
/// Initialize the image array and set event handlers on images
/// </summary>
function onld()
{
	g_rgImgs = new Array();

	var rgDiv = document.body.getElementsByTagName("DIV");
	for (var i = 0; i < rgDiv.length; i++)
	{
		if (rgDiv[i].className == "lnk")
		{
			var o = rgDiv[i].getElementsByTagName("IMG")[0];

			pn(o, "DIV").onmouseover = msOvrImg;
			pn(o, "DIV").onmouseout = msOutImg;
			pn(o, "DIV")._img = o;
			o.height = o.width = MIN_SIZE;
			o._dy = 0;
			o._mid = posY(o) + MIN_SIZE/2;

			g_rgImgs.push(o);
		}
	}
}

/// <summary>
/// MouseOver event handler for images
/// </summary>
function msOvrImg(evt)
{
	// Get the target image
	//
	o = getTarget(evt);
	
	// Target image is full size
	//
	o.inc = 1;
	startAnimation();

	var oM = wda("main");
	var sCap = o.getAttribute("caption");
	var sDt = o.getAttribute("date");

	// Display and position captions
	// TODO: fix this
	//
	var oD = wda("divCap");
	oD.innerHTML = sCap ? sCap : "";
	oD.style.top = o._mid - oD.offsetHeight/2;
	oD.style.left = posX(oM) - oD.clientWidth - 20;
	oD.style.visibility = "";

	oD = wda("divDt");
	oD.innerHTML = sDt ? sDt : "";
	oD.style.top = o._mid - oD.offsetHeight/2;
	oD.style.left = posX(oM) + oM.clientWidth + 20;
	oD.style.visibility = "";
}

/// <summary>
/// MouseOut event handler for images
/// </summary>
function msOutImg(evt)
{
	// If this is hit as an event handler, we need to get the target image
	//
	o = getTarget(evt);
	
	// Target image is min size
	//
	o.inc = -1;
	startAnimation();

	// Hide captions
	//
	wda("divCap").style.visibility = "hidden";
	wda("divDt").style.visibility = "hidden";
}

/// <summary>
/// Applies the next frame of animation
/// </summary>
function updateAnimation()
{
	// Do we need another frame?
	//
	var fMore = 0;
	
	// Update each image...
	//
	for (var i = 0; i < g_rgImgs.length; i++)
	{
		var o = g_rgImgs[i];
		
		// If this image is still resizing...
		//
		if (o.inc)
		{			
			if (o.inc < 0 && o.width <= MIN_SIZE)
			{
				// We've reached min size
				//
				o.height = o.width = MIN_SIZE;
				o.inc = 0;
			}
			else if (o.inc > 0 && o.width >= MAX_SIZE)
			{
				// We've reached max size
				//
				o.height = o.width = MAX_SIZE;
				o.inc = 0;
			}
			else
			{
				// Adjust the size
				//
				o.height = o.width = o.width + o.inc;
				o._dy -= o.inc;
				o.style.top = o._dy/2;

				// We still have more resizing to do
				//
				fMore = 1;
			}
		}
	}
	
	// If all the images have finished resizing, stop the animation
	//
	if (!fMore)
		stopAnimation();
}

/// <summary>
/// Starts the animation loop
/// </summary>
function startAnimation()
{
	// Only set the interval if there isn't one already set
	//
	if (!g_iIntId)
		g_iIntId = window.setInterval(updateAnimation, FRAME_DELAY);
}

/// <summary>
/// Stops the animation loop
/// </summary>
function stopAnimation()
{
	window.clearInterval(g_iIntId);
	g_iIntId = 0;
}

/// <summary>
/// Gets the index of a given image in our image array
/// </summary>
function getIdx(o)
{
	for(var i = 0; i < g_rgImgs.length; i++)
	{
		if(o == g_rgImgs[i])
			return i;
	}
}

/// <summary>
/// Get target image
/// </summary>
function getTarget(evt)
{
	var o;

	// Handle different browser models
	//
	if (evt)
		o = evt.target;
	else if (event)
		o = event.srcElement;
	else
		return null;
		
	// Handle mouseover the TD
	//
	while (!o._img)
		o = pn(o);

//	if (o.tagName == "DIV")
//		o = o._img;
		
	return o ? o._img : o;
}

/// <summary>
/// Get the parent node; optionally the parent element of a specified tag type
/// </summary>
function pn(o, sT)
{
	o = o.parentNode;

	if (!sT)
		return o;

	while (o && o.tagName != sT)
		o = o.parentNode;

	return o;
}

function wda(sId) { return window.document.getElementById(sId); }
function posX(o) { return o ? o.offsetLeft + posX(o.offsetParent) : 0; }
function posY(o) { return o ? o.offsetTop + posY(o.offsetParent) : 0; }