function initializeImageDisplay(){

	var html = '<table>' + 
			'	<tr>' + 
			'		<td style="width: 100%; text-align: right;"><div onclick="hideModalImage();" style="float: right; width: 20px; cursor: pointer; text-align: center;">X</div></td>' + 
			'	</tr>' + 
			'	<tr>' + 
			'		<td style="width: 100%; text-align: center;"><img id="imgImageToDisplay"></td>' + 
			'	</tr>' + 
			'	<tr>' + 
			'		<td style="width: 100%; text-align: center;">' + 
			'			<table align="center">' + 
			'				<tr>' + 
			'					<td style="padding-right: 10px; cursor: pointer; vertical-align: middle;" onclick="zoomImage(-1);"><img src="images/zoom_out.png">Zoom Out</td>' + 
			'					<td style="padding-left: 10px; cursor: pointer; vertical-align: middle;" onclick="zoomImage(+1);"><img src="images/zoom_in.png">Zoom In</td>' + 
			'				</tr>' + 
			'			</table>' + 
			'		</td>' + 
			'	</tr>' + 
			'</table>' + 
			'<img id="imgImageHolder" style="position: absolute; display: none;">';
			
	var transparentImageContainer = document.createElement('DIV');
	var centerImageContainer = document.createElement('DIV');
	
	transparentImageContainer.id = 'divTransparentContainer';
	transparentImageContainer.className = 'idHidden';

	centerImageContainer.id = 'centerDiv';
	centerImageContainer.className = 'idHidden';	
	centerImageContainer.innerHTML = html;
	
	document.body.appendChild(transparentImageContainer);		
	document.body.appendChild(centerImageContainer);	
}

function hideModalImage() {				
	document.getElementById('centerDiv').style.display = 'none';
	document.getElementById('imgImageToDisplay').src = '';
	document.getElementById('imgImageHolder').src = '';
	unlockBackground();				
}		

function showModalImage(filePathName) {

	if (filePathName.length == 0) { 
		alert('File Not Found'); 
		return;
	}
	if (objectExists('divTransparentContainer') == false) { initializeImageDisplay(); }

	//initializeImageDisplay();
	
	var imgImageToDisplay = document.getElementById('imgImageToDisplay');
	var divImageContainer = document.getElementById('centerDiv');				
	var imgImageHolder = document.getElementById('imgImageHolder');				

	//lock the background
	lockBackground();

	//make sure the div that holds the image is fully visible
	divImageContainer.className = 'idNontransparentImage';

	centerImageDiv(divImageContainer, imgImageToDisplay); //FOR IE
	imgImageHolder.style.display = ''; //FOR IE

	//do some setup				
	imgImageHolder.src = filePathName;
	imgImageToDisplay.src = filePathName;  //object.src;
	imgImageToDisplay.width = imgImageHolder.width;
	imgImageToDisplay.height = imgImageHolder.height;
	
	// center div that holds the image
	centerImageDiv(divImageContainer, imgImageToDisplay);

	imgImageHolder.style.display = 'none';//FOR IE

	//divImageContainer.setAttribute("style", "opacity:0.6;")
	//divImageContainer.style.setAttribute("filter", "alpha(opacity=60);")
	//if (oe.style.setAttribute) //For IE 

	//document.getElementById('imgImageToDisplay').src = 'pic1.jpg';
}

function lockBackground() {
	document.getElementById('divTransparentContainer').className = 'idTransparentBackground idTransparentImage';			
}

function unlockBackground() {
	document.getElementById('divTransparentContainer').className = 'idHidden';
}

function zoomImage(direction) {
	var divImageContainer = document.getElementById('centerDiv');
	var imgImageToDisplay = document.getElementById('imgImageToDisplay');
	var count = 1;

	if (direction == '+1') { count = 1.25; }
	else { count = .75; }

	imgImageToDisplay.width = imgImageToDisplay.width * count;
	imgImageToDisplay.height = imgImageToDisplay.height * count;

	centerImageDiv(divImageContainer, imgImageToDisplay);
}

function centerImageDiv(divImageContainer, imgImageToDisplay) {
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();
	var divHeight = 0; divWidth = 0;

	if (divImageContainer) {
		divImageContainer.style.position = 'absolute';
		if (imgImageToDisplay.height) { divHeight = imgImageToDisplay.height; }
		if (imgImageToDisplay.width) { divWidth = imgImageToDisplay.width; }

		divImageContainer.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - divHeight) / 2) + 'px');
		divImageContainer.style.left = (((arrayPageSize[0] - 20 - divWidth) / 2) + 'px');
		divImageContainer.style.display = 'block';
	}			
}