var ZoomableImage = {
	addEvent: function(elm, evType, fn, useCapture) {
		// addEvent cross-browser event handling for IE5+, NS6 and Mozilla
		// By Scott Andrew
		if (elm.addEventListener) {
		  elm.addEventListener(evType, fn, useCapture); 
		  return true;
		} else if (elm.attachEvent) {
		  var r = elm.attachEvent('on' + evType, fn);
		  return r;
		} else {
		  elm['on' + evType] = fn;
		}
	},
	
	init: function() {
	
		// get the header links
		if (!document.getElementsByTagName || !document.getElementById)
		  return;
		var images = document.getElementsByTagName('img');
	
		for (var i = 0; i < images.length; i++) {
			if (images[i].className.search(/\bzoomableimage\b/) > -1) {
				ZoomableImage.addEvent(images[i], 'mouseover', ZoomableImage.mOver, false);
				var elem = document.getElementById(images[i].id + "Big");
				ZoomableImage.addEvent(elem, 'mouseout', ZoomableImage.mOut, false);
				document.getElementsByTagName("body")[0].appendChild(elem);
			}
		}
	},
	
	getElementPosition: function (elemID) {
		var offsetTrail = document.getElementById(elemID);
		var offsetLeft = 0;
		var offsetTop = 0;
		while (offsetTrail) {
			offsetLeft += offsetTrail.offsetLeft;
			offsetTop += offsetTrail.offsetTop;
			offsetTrail = offsetTrail.offsetParent;
		}
		if (navigator.userAgent.indexOf("Mac") != -1 && 
			typeof document.body.leftMargin != "undefined") {
			offsetLeft += document.body.leftMargin;
			offsetTop += document.body.topMargin;
		}
		return {left:offsetLeft, top:offsetTop};
	},
	
	mOver: function(e) {
		var image;
		if (e && e.target)
			image = e.target;
		if (window.event && window.event.srcElement)
			image = window.event.srcElement;
		if (!image)
			return;
		
		var zoomable = document.getElementById(image.id);
		var zoomedin = document.getElementById(image.id + "Big");
		var posOriginal = ZoomableImage.getElementPosition(image.id);
		zoomedin.style.display = "block";
		zoomedin.style.left = (posOriginal.left + zoomable.offsetWidth - zoomedin.offsetWidth) + "px";
		// If you want aligned left, do: zoomedin.style.left = posOriginal.left + "px";
		zoomedin.style.top = posOriginal.top + "px";
		ZoomableImage.ShownElement = zoomedin;
	},
	
	mOut: function(e) {
		if (ZoomableImage.ShownElement) {
			ZoomableImage.ShownElement.style.display = "none";
			ZoomableImage.ShownElement = null;
		}
	},
	
	ShownElement: null
}

ZoomableImage.addEvent(window, 'load', ZoomableImage.init, false);