// Image Viewer

function ImageExpander(oThumb, sImgSrc)
{
	// store thumbnail image and overwrite its onclick handler.
	this.oThumb = oThumb;
	this.oThumb.expander = this;
	this.oThumb.onclick = function() { this.expander.expand(); }
	
	// record original size
	this.smallWidth = oThumb.offsetWidth;
	this.smallHeight = oThumb.offsetHeight;	
 
	// initial settings
	this.bExpand = true;
	this.bTicks = false;
	
	// original position
	this.origX = 0;
	this.origY = 0;
	
	// insert into self organized list
	if ( !window.aImageExpanders )
		window.aImageExpanders = new Array();
	window.aImageExpanders.push(this);
 
	// create the full sized image and automatically expand when loaded
	this.oImg = new Image();
	this.oImg.expander = this;
	this.oImg.onload = function(){this.expander.onload();}
	this.oImg.src = sImgSrc;
}

ImageExpander.prototype.onload = function()
{
	this.oDiv = document.createElement("div");
	document.body.appendChild(this.oDiv);
	this.oDiv.appendChild(this.oImg);
	this.oDiv.style.position = "absolute";
	this.oDiv.expander = this;
	this.oDiv.onclick = function(){this.expander.toggle();};
	this.oImg.title = "Click to reduce.";
	this.bigWidth = this.oImg.width;
	this.bigHeight = this.oImg.height;
	
	if ( this.bExpand )
	{
		this.expand();
	}
	else
	{
		this.oDiv.style.visibility = "hidden";
		this.oImg.style.visibility = "hidden";
	}
}

ImageExpander.prototype.toggle = function()
{
	this.bExpand = !this.bExpand;
	if ( this.bExpand )
	{
		for ( var i in window.aImageExpanders )
			if ( window.aImageExpanders[i] !== this )
				window.aImageExpanders[i].reduce();
	}
}

ImageExpander.prototype.expand = function()
{
	// set direction of expansion.
	this.bExpand = true;
 
	// set all other images to reduce
	for ( var i in window.aImageExpanders )
		if ( window.aImageExpanders[i] !== this )
			window.aImageExpanders[i].reduce();
 
	// if not loaded, don't continue just yet
	if ( !this.oDiv ) return;
	
	// hide the thumbnail
	this.oThumb.style.visibility = "hidden";
	
	// calculate initial dimensions
    var posX = this.oThumb.offsetLeft;
    var posY = this.oThumb.offsetTop;
	obj = this.oThumb;
    while(obj.offsetParent)
	{
      if(obj==document.getElementsByTagName('body')[0])
	  {
	    break
      }
      else
	  {
        posX=posX+obj.offsetParent.offsetLeft;
        posY=posY+obj.offsetParent.offsetTop;
        obj=obj.offsetParent;
      }
    }
	
	// Save original position
	this.origX = posX;
	this.origY = posY;
	
	this.x = posX;
	this.y = posY;
	this.w = this.oThumb.clientWidth;
	this.h = this.oThumb.clientHeight;
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";
	this.oDiv.style.visibility = "visible";
	this.oImg.style.visibility = "visible";
	
	// start the animation engine.
	if ( !this.bTicks )
	{
		this.bTicks = true;
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);	
	}
}

ImageExpander.prototype.reduce = function()
{
	// set direction of expansion.
	this.bExpand = false;
}


function getWindowHeight() 
{
  var windowHeight = 0;
  if (typeof(window.innerHeight) == 'number') 
  {
  windowHeight = window.innerHeight;
  }
  else 
  {
    if (document.documentElement &&
        document.documentElement.clientHeight) 
	{
      windowHeight = document.documentElement.clientHeight;
    }
    else 
	{
      if (document.body && document.body.clientHeight) 
	  {
        windowHeight = document.body.clientHeight;
      }
    }
  }
  return windowHeight;
}


ImageExpander.prototype.tick = function()
{
	// calculate screen dimensions
	var cw = document.body.clientWidth;
	var ch = getWindowHeight();
	var cx = document.documentElement.scrollLeft + cw / 2;
	var cy = document.documentElement.scrollTop + ch / 2;
 
	// calculate target
	var tw,th,tx,ty;
	if ( this.bExpand )
	{
		// start with the full size dimensions
		tw = this.bigWidth;
		th = this.bigHeight;
 
		// reduce to fit the screen
		if ( tw > cw )
		{
			th *= cw / tw;
			tw = cw;
		}	
		if ( th > ch )
		{
			tw *= ch / th;
			th = ch;
		}
		// then center it on the page
		tx = cx - tw / 2;
		ty = cy - th / 2; 
	}
	else
	{
		tw = this.smallWidth;
		th = this.smallHeight;
		tx = this.origX;
		ty = this.origY;
	}
  
	// move 10% closer to target
	var nHit = 0;
	var fMove = function(n,tn) 
	{
		var dn = tn - n;
		if ( Math.abs(dn) < 3 )
		{
			nHit++;
			return tn;
		}
		else
		{
			return n + dn / 10;
		}
	}
	this.x = fMove(this.x, tx);
	this.y = fMove(this.y, ty);
	this.w = fMove(this.w, tw);
	this.h = fMove(this.h, th);
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";
	
	if ( !this.bExpand && (nHit == 4) )
	{
		this.oImg.style.visibility = "hidden";
		this.oDiv.style.visibility = "hidden";
		this.oThumb.style.visibility = "visible";
 
		this.bTicks = false;
	}

	if ( this.bTicks )
	{
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);
	}
}