// Mouse-Over Magnifying Glass
// written by Zoggles (January 2008)

// If you are looking at this then you are probably doing so because you want to 'borrow' the code
// it isn't yet perfect and has only been tested on the latest versions of IE and FF available at the moment
// however.. if you want to use it, feel free to.

// I would only ask, that if you do improve upon this code in some way - or find any huge bugs in it, it would
// be nice if you would share them with me. 
// Thank you,
// Zoggles (tinypixels@gmail.com) 


// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false;

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE);

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var mouse = new Object();
	mouse.screen = { x: 0, y: 0 };
	mouse.showing = false;
	mouse.relative = { top: 0, left: 0, width: 0, height: 0, x: 0, y: 0};
var magnifier = new Object();
	magnifier.zoom = 4;
	magnifier.width = 100;
	magnifier.height = 70;
	

function fnInitMagnify() {

	// Find all IMG tags of the zoom class
	var allImages = new Array();
	var tmpName = "";
	
	allImages = document.documentElement.getElementsByTagName("img");
	
	for (var i = 0; i<allImages.length; i++)
	{
		tmpName = allImages[i].className.toLowerCase();
		
		if (tmpName.indexOf("magnify")>=0) {
			if (allImages[i].alt != "")
				allImages[i].title = allImages[i].alt + "  (Click to magnify)";
			if (document.addEventListener) {
				allImages[i].addEventListener("click", fnMagnify, false);
			} else {
				allImages[i].onclick = fnMagnify;
			}
		}
	}
}


function fnMagnify(eventArgs) {
	
	var imgIndex = 0;
	var allImages = new Array();
	
	allImages = document.documentElement.getElementsByTagName("img");

	for (var i=0; i<allImages.length; i++) {
		if (this == allImages[i]) imgIndex = i;
	}
	
	var pID = allImages[imgIndex];

	var absPos = getAbsolutePosition(pID);
	
	var el = document.getElementById('MagnifierPic');
		el.src = pID.src;
		el.width = pID.width * magnifier.zoom;
		el.height = pID.height * magnifier.zoom;
	var el = document.getElementById('Magnifier');
		el.style.width = ((magnifier.width + 2) * 2) + "px";
		el.style.height = ((magnifier.height + 2) * 2) + "px";

	mouse.relative.left = absPos.x;				// - document.documentElement.scrollLeft;
	mouse.relative.top = absPos.y;				// - document.documentElement.scrollTop;
	mouse.relative.width = pID.width;
	mouse.relative.height = pID.height;
	mouse.showing = true;

	// Debug Info
	if (document.getElementById('txtOffsetLeft')) {
		document.getElementById('txtOffsetLeft').value = mouse.relative.left.toString();
		document.getElementById('txtOffsetTop').value = mouse.relative.top.toString();
	}
}

function fnClearMagnify() {
	var el = document.getElementById('Magnifier');
		el.style.display = 'none';
		el.style.top = 0;
		el.style.left = 0;
	mouse.showing = false;
	mouse.relative.left = 0;
	mouse.relative.top = 0;
	
	// Debug Info
	if (document.getElementById('txtOffsetLeft')) {
		document.getElementById('txtOffsetLeft').value = mouse.relative.left.toString();
		document.getElementById('txtOffsetTop').value = mouse.relative.top.toString();
	}
}

// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
	if (IE) { // grab the x-y pos.s if browser is IE
		mouse.screen.x = event.clientX + document.documentElement.scrollLeft;
		mouse.screen.y = event.clientY + document.documentElement.scrollTop;
	} else {  // grab the x-y pos.s if browser is NS
		mouse.screen.x = e.pageX;
		mouse.screen.y = e.pageY;
	}  
	// catch possible negative values in NS4
	if (mouse.screen.x < 0) { mouse.screen.x = 0; }
	if (mouse.screen.y < 0) { mouse.screen.y = 0; }  
  
	if (mouse.showing==true) {
		mouse.relative.x = mouse.screen.x - mouse.relative.left;
		mouse.relative.y = mouse.screen.y - mouse.relative.top;
	} else {
		mouse.relative.x = 0;
		mouse.relative.y = 0;
	}

	// Debug Info
	if (document.getElementById('txtOffsetLeft')) {
		document.getElementById('txtEventLeft').value = mouse.screen.x.toString();
		document.getElementById('txtEventTop').value = mouse.screen.y.toString();
		document.getElementById('txtPositionLeft').value = mouse.relative.x.toString();
		document.getElementById('txtPositionTop').value = mouse.relative.y.toString();
	}
	
	if ((mouse.relative.x < 0) || 
		 (mouse.relative.y < 0) || 
		 (mouse.relative.x > mouse.relative.width) ||
		 (mouse.relative.y > mouse.relative.height))
		 fnClearMagnify();

	var tmpOrigin = new Object();
		 tmpOrigin.x = mouse.screen.x - magnifier.width;
		 tmpOrigin.y = mouse.screen.y - magnifier.height;
	var tmpOffset = new Object();
		 tmpOffset.x = (magnifier.width - (mouse.relative.x * magnifier.zoom));
		 tmpOffset.y = (magnifier.height - (mouse.relative.y * magnifier.zoom));
		 

	if (mouse.showing==true)
	{
		// set position of the magnifier
		var el = document.getElementById('Magnifier');
			el.style.left = tmpOrigin.x + 'px';
			el.style.top = tmpOrigin.y + 'px';
			el.style.display = 'block';
		// set the offset for the image
		var el = document.getElementById('MagnifierPic');
			el.style.clip = 'rect(' + ((mouse.relative.y * magnifier.zoom) - magnifier.height) + 'px '
											+ ((mouse.relative.x * magnifier.zoom) + magnifier.width) + 'px '
											+ ((mouse.relative.y * magnifier.zoom) + magnifier.height) + 'px '
											+ ((mouse.relative.x * magnifier.zoom) - magnifier.width) + 'px)';
			el.style.left = (tmpOffset.x + 2) + 'px';
			el.style.top = (tmpOffset.y + 2) + 'px';
	}
	return true
}


function getAbsolutePosition(element) {
	var r = { x: element.offsetLeft, y: element.offsetTop };
	if (element.offsetParent) {
		var tmp = getAbsolutePosition(element.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
};