var boundingBoxDefs = null;
var IMGSRC = 0;
var COORDX = 1;
var COORDY = 2;
var WIDTH  = 3;
var HEIGHT = 4;

// from quirksmode.org
function findPos(obj) 
{
	var curleft = curtop = 0;
	if (obj.offsetParent) 
	{
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) 
		{
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}	

// Functionality
function loadZoomAt( event )
{
	// IE uses fromElement, DOM uses relatedTarget
	if ( event == undefined )		return;
	if ( event.clientX == undefined ) 	return;
	if ( event.clientY == undefined ) 	return;
	
	var pos = findPos( document.getElementById( 'screenshot' ) );
	// Possibilities: .clientZ, .offsetZ, .pageZ, .screenZ, .Z

	var x = ( event.pageX ? event.pageX - pos[ 0 ] : event.offsetX );
	var y = ( event.pageY ? event.pageY - pos[ 1 ] : event.offsetY );

	//var currentMagnifier 	= document.getElementById( 'magnifier' );
	var currentImage 		= document.getElementById( 'zoomer' );
	
	for ( var i = 0; i < boundingBoxDefs.length; i++ )
	{
		if 
		(
			x >= boundingBoxDefs[ i ][ COORDX ] && x <= boundingBoxDefs[ i ][ COORDX ] + boundingBoxDefs[ i ][ WIDTH ] &&
			y >= boundingBoxDefs[ i ][ COORDY ] && y <= boundingBoxDefs[ i ][ COORDY ] + boundingBoxDefs[ i ][ HEIGHT ]
		)
		{
			currentImage.setAttribute( 'src', '/content/features/gui/zoom/' + boundingBoxDefs[ i ][ IMGSRC ] );
			// display briefly to render & get image dimensions
			currentImage.style.position	= 'absolute';
			
			// place image - centered around mouse
			currentImage.style.left = parseInt( boundingBoxDefs[ i ][ COORDX ] + boundingBoxDefs[ i ][ WIDTH ] / 2 - currentImage.width / 2 + pos[ 0 ] ) + 'px';
			currentImage.style.top = parseInt( boundingBoxDefs[ i ][ COORDY ] + boundingBoxDefs[ i ][ HEIGHT ] / 2 - currentImage.height / 2 + pos[ 1 ] ) + 'px';
			// display
			currentImage.style.display = 'block';
			break;
		}
	}
	
	if ( i == boundingBoxDefs.length ) // no matches
	{
		currentImage.style.display = 'none';
	}
}

function init()
{
	// Preload all images
	for ( var i = 0; i < boundingBoxDefs.length; i++ )
	{
		document.getElementById( 'zoomer' ).src = boundingBoxDefs[ i ][ IMGSRC ];
	}
	
	document.getElementById( 'screenshot' ).addEventListener( 	
			'mousemove', 
			function( event ) 
			{
				if ( !event ) 
					event = window.event;
				loadZoomAt( event ); 
				if ( event.preventDefault ) 
					event.preventDefault(); 
				return false; 
			}, 
			false 
		);
	document.getElementById( 'screenshot' ).onmouseover = loadZoomAt;
	document.getElementById( 'screenshot' ).onmousemove = loadZoomAt;
}

window.addEventListener( 'load', init, false );