function getAbsolutePosition(obj)
{
	var curleft = curtop = 0;
	if (obj.offsetParent)
	{
		do
		{
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

function isDefined(v)
{
	return v != undefined;
}

function getScroll(doc)
{
	if (isDefined(doc.documentElement.scrollLeft))
		return [doc.documentElement.scrollLeft, doc.documentElement.scrollTop];
	else if (isDefined(doc.body.scrollLeft))
		return [doc.body.scrollLeft, doc.body.scrollTop];
	else
	{
		var win;
		if (doc.defaultView)
			win = doc.defaultView;
		else if (doc.parentWndow)
			win = doc.parentWindow;
		if (isDefined(win.scrollX))
			return [win.scrollX, win.scrollY];
	}
}

function getFixedPosition(obj)
{
	var curleft = curtop = 0;
	var origObj = obj;
	if (obj.offsetParent)
	{
		do
		{
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	var scrollPos = getScroll(origObj.ownerDocument);
	curleft -= scrollPos[0];
	curtop -= scrollPos[1];
	return [curleft,curtop];
}

function getClientSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

function Leaflet(thumbId, steps, stepMs)
{
	this.thumbId = thumbId;
	this.thumbLeaflet = document.getElementById(thumbId);
	var obj = this;
	this.thumbLeaflet.onclick = function(event) { obj.expand() };
	this.thumbLeaflet.style.cursor = 'hand';
	this.thumbLeaflet.style.cursor = 'pointer';
	this.steps = steps;
	this.stepMs = stepMs;
	if (document.defaultView)
		this.win = document.defaultView;
	else if (document.parentWindow)
		this.win = document.parentWindow;
	
	this.expand = function()
	{
		var obj = this;
		this.originalLeaflet = new Image();
		this.originalLeaflet.className = 'leaflet';
		this.originalLeaflet.onload = function(event) { obj.onExpandReady(); }
		this.originalLeaflet.src = this.thumbLeaflet.src;
	}
	
	this.onExpandReady = function()
	{
		var obj = this;
		var aspectRatio = this.originalLeaflet.width / this.originalLeaflet.height;
		
		// Determine the desired size of the leaflet
		var border = 20;
		var clientSize = getClientSize();
		var winWidth = clientSize[0], winHeight = clientSize[1];
		var leafletWidth = this.originalLeaflet.width, leafletHeight = this.originalLeaflet.height;
		
		if (leafletWidth > winWidth - border)
		{
			leafletWidth = winWidth - border;
			leafletHeight = leafletWidth / aspectRatio;
		}
		if (this.originalLeaflet.height > winHeight - border)
		{
			leafletHeight = winHeight - border;
			leafletWidth = leafletHeight * aspectRatio;
		}
		
		// Determine the desired position of the leaflet
		this.leafletHeight = leafletHeight;
		this.leafletWidth = leafletWidth;
		this.leafletX = (winWidth / 2) - (this.leafletWidth / 2);
		this.leafletY = (winHeight / 2) - (this.leafletHeight / 2);
		
		// Calculate the step
		this.calculateSteps();
		
		this.originalLeaflet.style.display = 'block';
		this.originalLeaflet.style.position = 'fixed';
//		this.originalLeaflet.style.position = 'absolute';
		this.originalLeaflet.height = this.thumbLeaflet.height;
		this.originalLeaflet.width = this.thumbLeaflet.width;
		this.originalLeaflet.style.left = this.thumbPos[0] + 'px';
		this.originalLeaflet.style.top = this.thumbPos[1] + 'px';
		this.originalLeaflet.style.zIndex = 1000;
//		alert(this.originalLeaflet.outerHTML);

		this.thumbLeaflet.style.visibility = 'hidden';
				
		document.body.appendChild(this.originalLeaflet);
		var leafletObj = this;
		this.onExpandTimer = function()
		{
			--leafletObj.stepsRemaining;
				
			leafletObj.originalLeaflet.height += leafletObj.heightStep;
			leafletObj.originalLeaflet.width += leafletObj.widthStep;
			leafletObj.originalLeaflet.style.left = parseInt(leafletObj.originalLeaflet.style.left) + leafletObj.xStep + 'px';
			leafletObj.originalLeaflet.style.top = parseInt(leafletObj.originalLeaflet.style.top) + leafletObj.yStep + 'px';
			
			if (leafletObj.stepsRemaining > 0)
			{
				this.setTimeout(leafletObj.onExpandTimer, leafletObj.stepMs);
			}
			else
			{
				leafletObj.originalLeaflet.onclick = function(event) { leafletObj.shrink() };
			}		
		}
		this.win.setTimeout(this.onExpandTimer, this.stepMs);
	}
	
	this.calculateSteps = function()
	{
		this.thumbPos = getFixedPosition(this.thumbLeaflet);		
		this.widthStep = (this.leafletWidth - this.thumbLeaflet.width) / this.steps;
		this.heightStep = (this.leafletHeight - this.thumbLeaflet.height) / this.steps;
		this.xStep = (this.leafletX - this.thumbPos[0]) / this.steps;
		this.yStep = (this.leafletY - this.thumbPos[1]) / this.steps;
		this.stepsRemaining = this.steps;
	}
	
	this.shrink = function()
	{
		this.calculateSteps();
		var leafletObj = this;			
		this.onShrinkTimer = function()
		{
			--leafletObj.stepsRemaining;
				
			leafletObj.originalLeaflet.height -= leafletObj.heightStep;
			leafletObj.originalLeaflet.width -= leafletObj.widthStep;
			leafletObj.originalLeaflet.style.left = parseInt(leafletObj.originalLeaflet.style.left) - leafletObj.xStep + 'px';
			leafletObj.originalLeaflet.style.top = parseInt(leafletObj.originalLeaflet.style.top) - leafletObj.yStep + 'px';
			
			if (leafletObj.stepsRemaining > 0)
			{
				this.setTimeout(leafletObj.onShrinkTimer, leafletObj.stepMs);
			}
			else
			{
				leafletObj.thumbLeaflet.style.visibility = 'visible';
	
				leafletObj.originalLeaflet.parentNode.removeChild(leafletObj.originalLeaflet);
				leafletObj.originalLeaflet = undefined;
			}		
		}	
		this.win.setTimeout(this.onShrinkTimer, this.stepMs, this);
	}
}