<script language="JavaScript">

var ClickToEnlarge1 = new Object;	// create the object
ClickToEnlarge1.loading = new Image();
ClickToEnlarge1.loading.src="processing.gif";	// preload image

ClickToEnlarge1.show = function (obj,color,width) {

	if (obj == "init") {	// this is called following assignments

		// convention is followed to assign this DIV with an ID name beginning with "ClickToEnlarge1_"

		document.write('<DIV ID="ClickToEnlarge1_ShowDiv" style="position:absolute;display:none;'
		+ 'background-color:#dddddd;width:100%;text-align:center;cursor:pointer;'
		+ 'padding-top:20px;margin-top: 20px;border: #cc0000 1px solid" align=center></DIV>');

	}
	else {

		// establish the DIV is available and that window width can be measured

		if (document.getElementById && typeof document.getElementById("ClickToEnlarge1_ShowDiv") == "object" &&	(document.body.scrollWidth || document.body.offsetWidth)) {

			if (!obj || typeof obj != "object") return true;	// playing it safe

			if (typeof obj.href != "string") return true;		// playing it safe

			if (!ClickToEnlarge1.hascontent) {

				// this only gets executed once
				// probably would be OK to write it directly within "init" but I'm playing it safe

				// ClickToEnlarge1_target name assigned to image follows naming convention

				document.getElementById("ClickToEnlarge1_ShowDiv").innerHTML='<span style'
				+ '="font-family:verdana,arial,sans-serif;font-size:100%;background-color:white;'
				+ 'color:black">Click to Close View</span>'
				+ '<br><img name="ClickToEnlarge1_target" src="' + ClickToEnlarge1.loading.src
				+ '" vspace=10 hspace=10>';

				ClickToEnlarge1.hascontent = 1;

			}

			var swidth=(width && parseInt("0"+width,10)==0)?"":parseInt(width);	// playing it safe

			var fwidth=0;
			if (document.documentElement && document.documentElement.scrollWidth) {
				fwidth = document.documentElement.scrollWidth;
			}
			else if (document.body.scrollWidth) {
				fwidth = document.body.scrollWidth;
			}
			else if (document.body.offsetWidth) {
				fwidth = document.body.offsetWidth;
			}
			if (fwidth == 0) return true;

			var pidd = document.getElementById("ClickToEnlarge1_ShowDiv");

			if (swidth && swidth<fwidth) {	// center if can
				pidd.style.left=Math.floor((fwidth-swidth)/2)-10+"px";
				pidd.style.width=swidth+20+"px";
			}
			else {
				if (self==top) pidd.style.left="0px";
				else {	// inside an iframe
					pidd.style.left="10px";
					pidd.style.width=fwidth-40+"px";
					pidd.style.overflow="scroll";
				}
			}

			if (color) {	// an invalid color will cause a javascript error in Internet Explorer
				// this construction of try/catch will compile without error in older javascript versions
				var trycolor = new Function("color","try{document.getElementById('ClickToEnlarge1_ShowDiv').style.backgroundColor=color;} catch(e){document.getElementById('ClickToEnlarge1_ShowDiv').style.backgroundColor='#6E6E6E';}");
				trycolor(color);
			}
			else document.getElementById('ClickToEnlarge1_ShowDiv').style.backgroundColor='#6E6E6E';

			if (self == top) {
				pidd.style.top=(typeof window.pageYOffset=="number"?window.pageYOffset*1+10:document.body.scrollTop*1+10)+"px";
			}
			else { // inside an iframe
				if (obj.firstChild && obj.firstChild.offsetParent && typeof obj.firstChild.offsetTop == "number") {
					var curobj = obj.firstChild;
					curtop = 0;
					do {curtop += curobj.offsetTop;} while (curobj = curobj.offsetParent);
					pidd.style.top=curtop*1+"px";
				}
				else return true;
			}

			// assigning onclick annonymously below prevents the need to create a separate named function
			// or need to include an inline call to a named function (would be a useful for onMouseOut as well)

			pidd.onclick = function () {
				this.style.display="none";
				document.images['ClickToEnlarge1_target'].src=ClickToEnlarge1.loading.src;
				return false;
			}

			if (document.images['ClickToEnlarge1_target']) document.images['ClickToEnlarge1_target'].src=obj.href;
			else return true;	// playing it safe

			pidd.style.display="block";

			return false;	// prevents normal functioning of the link in the document
		}
		else return true;	// the A tag will execute per its HTML assigned attributes
	}
}

if (document.getElementById) ClickToEnlarge1.show("init");	// this will cause the DIV to be written to the document

/*
Whatever else is required to be written to the document itself could be placed here instead of in a function
or could be placed above the object assignments.  In my case I only want the minimum written at this time,
more as can be used later.  Never the less, this demonstrates how a single function could be used for a variety
of purposes which could make user documentation easier to create and understand.
*/

</script>