//write the elements here to keep it all in 1 function without developer having to create this div/img on each page used
	document.write ("<div id='largeImageContainer' name='largeImageContainer' style='position:absolute; left:330px; visibility:hidden; z-index:999;'>");
	document.write ("<img id='largeImage' name='largeImage' style='border:2px solid #33ADA0'>");
	document.write ("</div>");
	
	function showLargeImage(pImage,pTop) {
		document.getElementById('largeImage').src = pImage.src.replace('.','_lrg.');		// add the _lrg extension to the filename 
		document.getElementById('largeImage').onerror = hideLargeImage;					
		document.getElementById('largeImageContainer').style.visibility = 'visible';
		document.getElementById('largeImage').style.visibility = 'visible';
		
		document.getElementById('largeImageContainer').style.top = (pTop == undefined) ? document.body.scrollTop + 200 : pTop;
	}

	function hideLargeImage() {
		document.getElementById('largeImageContainer').style.visibility = 'hidden';
		document.getElementById('largeImage').style.visibility = 'hidden';
	}