function ImageExpander(oThumb, sImgSrc,toplocelement,itemTitle, itemDesc)
{
	// set the expanded sizes
	this.expandedWidth = 765;
	this.expandedHeight = 375;
	this.tablecol1width = 198;
	this.toploctop = getRealItemTop(toplocelement)
	this.toplocleft =getRealItemLeft(toplocelement) 

	// get the thumbnail
	this.oThumb = oThumb;
	this.oThumb.expander = this;

	// get the thumbnails location
	this.thumbnailleft = getRealLeft(this.oThumb);
	this.thumbnailtop = this.toploctop;
	
	this.oThumb.onclick = function() { this.expander.expand(); }

	// get the item title and description
	this.itemTitle = itemTitle;
	this.itemDesc = itemDesc;

	// record original size of the thumbnail
	this.smallWidth = oThumb.offsetWidth;
	this.smallHeight = oThumb.offsetHeight;	

	// default the variables
	this.bExpand = true;
	this.bTicks = false;

	// create the full sized image.
	this.oImg = new Image();
	this.oImg.expander = this;
	this.oImg.onload = function(){this.expander.onload();}
	this.oImg.src = sImgSrc;
}

ImageExpander.prototype.onload = function()
{
	// create a new div object
	this.oDiv = document.createElement("div");

	// add the div object to the document body
	document.body.appendChild(this.oDiv);

	// set the div to absolute positioning
	this.oDiv.style.position = "absolute";

	// set the background to white
	this.oDiv.style.background = "white";

	// set the expander
	this.oDiv.expander = this;

	// call the toggle function when the div is clicked
	this.oDiv.onclick = function() {this.expander.toggle();};

	// set the tool tip for the big image
	this.oImg.title = "Click to reduce.";
	//this.oImg.border = 1;

	// set the big image sizes
	this.bigWidth = this.oImg.width;
	this.bigHeight = this.oImg.height;

	//alert(this.oImg.src);
	//alert(this.oImg.width);
	//alert(this.oImg.height);

	if (this.oImg.height > 350)
	{
		this.factor = 350 / this.oImg.height;
		this.bigHeight = 350;
		this.bigWidth = Math.round(this.factor * this.oImg.width)
	}



	
	
	// create the table
	this.oTbl = document.createElement("table");
    this.tblBody = document.createElement("tbody");
	//this.oTbl.setAttribute("border",1);


	// creates a table row
    this.row = document.createElement("tr");

	// create a new cell to hold the image
	this.cell = document.createElement("td");
	this.cell.setAttribute("valign","top");
	this.cell.setAttribute("align","center");

	// add the image to the cell
    this.cell.appendChild(this.oImg);
	this.cell.setAttribute("width","100px");


	// add the cell to the row
    this.row.appendChild(this.cell);

    // add the row to the end of the table body
    this.tblBody.appendChild(this.row);

	// create a new cell to hold the text
	this.cell2 = document.createElement("td");

			// create a new table
			this.oTbl2  = document.createElement("table");
		    var tblBody2 = document.createElement("tbody");
			var row_1 = document.createElement("tr");
			//this.oTbl2.setAttribute("border",1);
			this.oTbl2.setAttribute("width","100%");

			
			var cell_1 = document.createElement("th");
		    
			var cell_1Text = document.createTextNode(this.itemTitle);	
		    cell_1.appendChild(cell_1Text);
			cell_1.setAttribute("align", "left");
			cell_1.style.fontSize = 12;
		    row_1.appendChild(cell_1);
			tblBody2.appendChild(row_1);

			var row_2 = document.createElement("tr");
			var cell_2 = document.createElement("td");
		    var cell_2Text = document.createTextNode("");	
		    cell_2.appendChild(cell_2Text);
		    row_2.appendChild(cell_2);
			tblBody2.appendChild(row_2);


			// get each of the descripion lines
			var i = 0;
			var desc_array = this.itemDesc.split("<br>")

			while (i < desc_array.length)
			 {
				var row_3 = document.createElement("tr");
				var cell_3 = document.createElement("td");
			    var cell_3Text = document.createTextNode(desc_array[i]);	
			    cell_3.appendChild(cell_3Text);
			    row_3.appendChild(cell_3);
				tblBody2.appendChild(row_3);
				i+=1;
			  }

			
			this.oTbl2.appendChild(tblBody2);
			//this.oTbl2.style.width="130px";


	this.cell2.setAttribute("align", "left");

	// add the cell text to the cell
    this.cell2.appendChild(this.oTbl2);

	// set the column width
	this.cw = 5;

	// add the cell to the row 
    this.row.appendChild(this.cell2);

	// set the visibility
	this.cell2.style.visibility = "hidden";

    // put the <tbody> in the <table>
    this.oTbl.appendChild(this.tblBody);
	this.oTbl.setAttribute("width", this.expandedWidth);
	this.oTbl.setAttribute("height", this.expandedHeight);
	this.oTbl.setAttribute("cellpadding", 0);
	this.oTbl.setAttribute("cellspacing", 0);
	this.oDiv.appendChild(this.oTbl);


	// check to see if the expand function should be called
	if ( this.bExpand )
	{
		this.expand();
	}
	else
	{
		this.oDiv.style.visibility = "hidden";
		this.oTbl.style.visibility = "hidden";
	//	this.cell2.style.visibility = "hidden";
	}
}


ImageExpander.prototype.toggle = function()
{
	this.bExpand = !this.bExpand;

	if (!this.bExpand)
	{
		this.cell2.style.visibility = "hidden";
		this.oTbl.style.visibility = "hidden";
	}

}

ImageExpander.prototype.expand = function()
{
	
	// set direction of expansion.
	this.bExpand = true;

	// if not loaded, don't continue just yet
	if ( !this.oDiv ) return;

	// hide the thumbnail
	this.oThumb.style.visibility = "hidden";

	// set the left dimension
	this.x = this.thumbnailleft;

	// set the top dimension
	this.y = this.thumbnailtop;

	// get the thumbnail width
	this.w = this.oThumb.clientWidth;
	this.iw = this.oThumb.clientWidth;

	// get the thumbnail height
	this.h = this.oThumb.clientHeight;
	this.ih = this.oThumb.clientHeight;

	// set the location of the div
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";

	// set the size of the table
	this.oDiv.style.width = this.w + "px";
	this.oDiv.style.height = this.h + "px";

	// show the div
	this.oDiv.style.visibility = "visible";

	// show the table
	this.oTbl.style.visibility = "visible";

	// show the image
	this.oImg.style.visibility = "visible";


	// start the animation engine.
	if ( !this.bTicks )
	{
		this.bTicks = true;
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);	
	}


}

function getRealLeft(imgElem) { 
    xPos = imgElem.offsetLeft; 
    tempEl = imgElem.offsetParent; 
      while (tempEl != null) { 
          xPos += tempEl.offsetLeft; 
          tempEl = tempEl.offsetParent; 
      } 
    return xPos; 
} 


function getRealItemTop(imgElem) {// 
    yPos = document.getElementById(imgElem).offsetTop; 
    tempEl = document.getElementById(imgElem).offsetParent; 
    while (tempEl != null) { 
          yPos += tempEl.offsetTop; 
          tempEl = tempEl.offsetParent; 
      } 
    return yPos; 
} 

function getRealItemLeft(imgElem) {// 
    xPos = document.getElementById(imgElem).offsetLeft; 
    tempEl = document.getElementById(imgElem).offsetParent; 
    while (tempEl != null) { 
          xPos += tempEl.offsetLeft; 
          tempEl = tempEl.offsetParent; 
      } 
    return xPos; 
} 


ImageExpander.prototype.tick = function()
{

	// set the local dimensions
	var currentw = this.expandedWidth;
	var currenth = this.expandedHeight;
	var currentx = this.thumbnailleft;
	var currenty = this.thumbnailtop;

	// declare target variables
	var targetw,targeth,targetx,targety;

	// check to see if we are expanding
	if ( this.bExpand )
	{
		// set the target width and height to the size of the div
		targetw = this.expandedWidth;
		targeth = this.expandedHeight;

		// set the target image width and height
		targetimgw = this.bigWidth;
		targetimgh = this.bigHeight;

		// get the target location
		targetx = getRealItemLeft("toploc")+1;
		targety = getRealItemTop("toploc")-10;

		// cell 1 target width
		targetc1w = this.tablecol1width;

	}
	// if we are not expanding
	else
	{
		// set the target sizes
		targetw = this.smallWidth;
		targeth = this.smallHeight;
		targetimgw = this.smallWidth;
		targetimgh = this.smallHeight;
		targetx = this.thumbnailleft;
		targety = this.thumbnailtop;
		targetc1w = 10;

	}	

	// move 5% closer to target
	var nHit = 0;

	// declare the fmove function
	var fMove = function(currentn,targetn) 
	{
		// declare destination variable
		var destinationn = targetn - currentn;

		// check the destination variable
		if ( Math.abs(destinationn) < 3 )
		{
			nHit++;
			return targetn;
		}
		else
		{
			return currentn + destinationn / 2;
		}
	}

	// get the location and size
	this.x = fMove(this.x, targetx);
	this.y = fMove(this.y, targety);
	this.w = fMove(this.w, targetw);
	this.h = fMove(this.h, targeth);
	this.iw = fMove(this.iw, targetimgw);
	this.ih = fMove(this.ih, targetimgh);
	this.cw = fMove(this.cw, targetc1w);
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oTbl.style.width = this.w + "px";
	this.oTbl.style.height = this.h + "px";
	this.oDiv.style.width = this.w + "px";
	this.oDiv.style.height = this.h + "px";
	this.oImg.style.width = this.iw + "px";
	this.oImg.style.height = this.ih + "px";
	this.cell2.width =  this.cw + "px";

	// if reducing and size/position is a match, stop the tick	
	if ( !this.bExpand && (nHit == 7) )
	{
		this.oImg.style.visibility = "hidden";
		this.oDiv.style.visibility = "hidden";
		this.oTbl.style.visibility = "hidden";
		this.cell2.style.visibility = "hidden"
		this.oThumb.style.visibility = "visible";

		this.bTicks = false;
	}
	

	if (this.bExpand && nHit ==7)
	{
		// set the visibility
		this.cell2.style.visibility = "visible";
	}

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

}