iTop = 0;
iLeft = 0;

iMouseX = 0;
iMouseY = 0;

iLastMouseX = 0;
iLastMouseY = 0;

sContainer = '';
sImg = '';
sGhost = '';
sImgSrcSmall = '';
sImgSrcLarge = '';

iZoom = 0;

bDrag = 0;

var IE = document.all?true:false

function mouseMove()
		{
		if (bDrag)
			{
			// set last coords to current pos if there was no previous pos
			if (iLastMouseY == 0) iLastMouseY = iMouseY;
			if (iLastMouseX == 0) iLastMouseX = iMouseX;

			oImg = document.getElementById(sImg);
			oScroll = document.getElementById(sContainer);

			// calc new top and left margins
			iNewTop = iTop - (iLastMouseY - iMouseY);
			iNewLeft = iLeft - (iLastMouseX - iMouseX);

			// check new top/left margins
			if (iNewTop > 0) iNewTop = 0;
			if (iNewLeft > 0) iNewLeft = 0;
			if (iNewTop < (0-parseInt(oImg.style.height)+oScroll.clientHeight)) iNewTop = (0-parseInt(oImg.style.height)+oScroll.clientHeight);
			if (iNewLeft < (0-parseInt(oImg.style.width)+oScroll.clientWidth)) iNewLeft = (0-parseInt(oImg.style.width)+oScroll.clientWidth);

			// assign margins
			oImg.style.marginTop = iNewTop + 'px';
			oImg.style.marginLeft = iNewLeft + 'px';

			// save last mouse pos, so we can compare 'm later
			iLastMouseY = iMouseY;
			iLastMouseX = iMouseX;

			iTop = iNewTop;
			iLeft = iNewLeft;
			//document.getElementById('test').value = iNewTop;
			}

		return false;
		}

function setDrag()
		{
		if (iZoom == 1)
			{
			bDrag = 1;
			iLastMouseY = 0;
			iLastMouseX = 0;

			oScroll = document.getElementById(sContainer);
			oScroll.onmouseup	= unsetDrag;
			oScroll.onmousemove	= mouseMove;
			oScroll.onmouseout	= unsetDrag;
			}
		return false;
		}

function unsetDrag()
		{
		bDrag = 0;
		oScroll = document.getElementById(sContainer);
		oScroll.onmouseup	= null;
		oScroll.onmousemove	= null;
		oScroll.onmouseout	= null;
	
		return false;
		}

function zoomIn()
	{
	
	// make sure that the container doesnt adjust it's size to the large picture
	document.getElementById(sContainer).style.height = document.getElementById(sContainer).clientHeight + "px";

	oGhost = document.getElementById(sGhost);
	oGhost.onclick = null;
	oGhost.parentNode.style.width = '1px';
	oGhost.parentNode.style.height = '1px';
	oGhost.parentNode.style.overflow = 'hidden';

	// load large picture
	//oImg.onload = centerImage;
	oGhost.src = sImgSrcLarge;

	document.getElementById(sContainer).style.cursor = "move";

	oImg = document.getElementById(sImg);
	oImg.style.display = 'block';
	oImg.style.marginLeft = iLeft + 'px';
	oImg.style.marginTop = iTop + 'px';
	iZoom = 1;
	}

function zoomOut()
	{
	oGhost = document.getElementById(sGhost);

	document.getElementById(sContainer).style.height = "";

	// load small pic
	//oImg.onload = null;
	oGhost.onclick = zoomIn;
	oGhost.src = sImgSrcSmall;
	document.getElementById(sContainer).style.cursor = "pointer";

	iTop = 0;
	iLeft = 0;

	oImg = document.getElementById(sImg);
	oImg.style.marginLeft = iLeft + 'px';
	oImg.style.marginTop = iTop + 'px';
	iZoom = 0;
	}

function getMouseXY(e) {
  if (IE) {
    iMouseX = event.clientX + document.body.scrollLeft
    iMouseY = event.clientY + document.body.scrollTop
  } else {
    iMouseX = e.pageX
    iMouseY = e.pageY
  }  
  return true
}

function doFalse(e)
	{
	return false;
	}

function centerImage(e)
	{
	// center zoomed image
	oImg = document.getElementById(sImg);
	oGhost = document.getElementById(sGhost);

	iTop = (0 - (oGhost.height / 2)) + (oImg.parentNode.clientHeight / 2);
	iLeft = (0 - (oGhost.width / 2)) + (oImg.parentNode.clientWidth / 2);

	oImg.style.marginTop	= iTop + 'px';
	oImg.style.marginLeft	= iLeft + 'px';
	}

function loadGhost(e)
	{
	oImg = document.getElementById(sImg)
	oGhost = document.getElementById(sGhost)

	oImg.style.background = "url(" + oGhost.src + ")";
	oImg.style.width = oGhost.width + 'px';
	oImg.style.height = oGhost.height + 'px';

	centerImage();
	}

function initZoom(sObjId,sImgId,sGhostId,sImgLarge,sImgSmall)
	{
	sContainer = sObjId;
	sImg = sImgId;
	sGhost = sGhostId;
	sImgSrcSmall = sImgSmall;
	sImgSrcLarge = sImgLarge;

	document.onmousemove = getMouseXY;

	oScroll = document.getElementById(sContainer);
	oScroll.onmousedown	= setDrag;
	// prevent browser dragging
	oScroll.ondragstart	= doFalse;
	oScroll.ondragend	= doFalse;
	oScroll.ondrag		= doFalse;

	oImg = document.getElementById(sGhost);
	oImg.onload			= loadGhost;

	zoomOut();
	}