var imagezoom = {
	"ctr": null,
	"img": null,
	"origwidth": 0,
	"origheight": 0,
	"zoom": 1,
	"moveTimer": null,
	"sensitivity": 50,
	"curwidth": 0,
	"curheight": 0,
	"curmousex": 0,
	"curmousey": 0,
	"curoffsetx": 0,
	"curoffsety": 0,
	"map": null,
	"mapareas": [],
	"origareacoords": [],
	"isdragging": false,

	"getMousePos": function(e)
	{
		var pos = {"x": 0, "y": 0};

		if (document.layers)
		{
			pos.x = e.pageX;
			pos.y = e.pageY;
		}
		else if (document.all)
		{
			pos.x = event.clientX + (document.documentElement.scrollLeft ?
				document.documentElement.scrollLeft : document.body.scrollLeft) - document.body.clientLeft;
			pos.y = event.clientY + (document.documentElement.scrollTop ?
				document.documentElement.scrollTop : document.body.scrollTop) - document.body.clientTop;
		}
		else
		{
			pos.x = e.pageX;
			pos.y = e.pageY;
		}

		return pos;
	},
	"getMouseOffset": function(target, event)
	{
		var docPos, mousePos;
		if (!event) /* For IE. */
			event = window.event;

		docPos = this.getPosition(target); 
		mousePos = this.getMousePos(event); 

		return {"x": mousePos.x - docPos.x, "y": mousePos.y - docPos.y}; 
	},
	"getPosition": function(e)
	{
		var left = 0; 
		var top  = 0; 

		while (e.offsetParent)
		{
			left += e.offsetLeft; 
			top  += e.offsetTop; 
			e = e.offsetParent; 
		} 

		left += e.offsetLeft; 
		top  += e.offsetTop; 

		return {x:left, y:top}; 
	},
	"cancelFunc": function(event)
	{
		if (!event) /* For IE. */
			event = window.event;

		event.returnValue = false;
		return false;
	},
	"beginDrag": function(event)
	{
		var target;
		var pos;
		if (!event) /* For IE. */
			event = window.event;

		target = event.target || event.srcElement;
		while ((target != imagezoom.img) && (target != imagezoom.map))
		{
			if (!target || (target == document.body)) return;
			target = target.parentNode;
		}

		if ((imagezoom.curwidth > imagezoom.origwidth) || (imagezoom.curheight > imagezoom.origheight))
		{
			pos = imagezoom.getMouseOffset(imagezoom.img, event);
			imagezoom.curoffsetx = pos.x;
			imagezoom.curoffsety = pos.y;
			imagezoom.isdragging = true;

			document.body.focus();
			document.body.onselectstart = imagezoom.cancelFunc;
			target.ondragstart = imagezoom.cancelFunc;
		}

		return false;
	},
	"handleDrag": function(event)
	{
		var pos;

		if (imagezoom.isdragging)
		{
			pos = imagezoom.getMousePos(event);
			pos.x -= imagezoom.curoffsetx;
			pos.y -= imagezoom.curoffsety;

			if (pos.x > 0) pos.x = 0;
			if (pos.y > 0) pos.y = 0;
			if (imagezoom.ctr.offsetWidth - pos.x > imagezoom.img.offsetWidth) pos.x = imagezoom.ctr.offsetWidth - imagezoom.img.offsetWidth;
			if (imagezoom.ctr.offsetHeight - pos.y > imagezoom.img.offsetHeight) pos.y = imagezoom.ctr.offsetHeight - imagezoom.img.offsetHeight;
			imagezoom.img.style.left = String(pos.x) + "px";
			imagezoom.img.style.top = String(pos.y) + "px";
		}
	},
	"endDrag": function(event)
	{
		var target;

		if (!event) /* For IE. */
			event = window.event;
		imagezoom.isdragging = false;

		target = event.target || event.srcElement;
		document.body.onselectstart = null;
		target.ondragstart = null;
	},
	"handleWheel": function(delta)
	{
		var coords;
		var i, j;

		if (delta < 0)
			this.zoom /= 1.2;
  	else
			this.zoom *= 1.2;

		if (this.zoom < 1) this.zoom = 1;

		this.setZoom();
	},
	"doZoomIn": function()
	{
		this.zoom *= 1.2;
		this.setZoom();
	},
	"doZoomOut": function()
	{
		this.zoom /= 1.2;
		if (this.zoom < 1) this.zoom = 1;
		this.setZoom();
	},
	"doMoveUp": function()
	{
		imagezoom.endMove;
		imagezoom.moveTimer = setTimeout("imagezoom.handleMove({'x': 0,'y': -1})", imagezoom.sensitivity);
	},
	"doMoveDown": function()
	{
		imagezoom.endMove;
		imagezoom.moveTimer = setTimeout("imagezoom.handleMove({'x': 0,'y': 1})", imagezoom.sensitivity);
	},
	"doMoveLeft": function()
	{
		imagezoom.endMove;
		imagezoom.moveTimer = setTimeout("imagezoom.handleMove({'x': -1,'y': 0})", imagezoom.sensitivity);
	},
	"doMoveRight": function()
	{
		imagezoom.endMove;
		imagezoom.moveTimer = setTimeout("imagezoom.handleMove({'x': 1,'y': 0})", imagezoom.sensitivity);
	},
	"doEndMove": function()
	{
		if (null != imagezoom.moveTimer)
		{
			clearTimeout(imagezoom.moveTimer);
			imagezoom.moveTimer = null;
		}
	},
	"handleMove": function(dir)
	{
		var pos = {"x": parseInt(imagezoom.img.style.left || 0), "y": parseInt(imagezoom.img.style.top || 0)};

		pos.x -= dir.x * 8 * imagezoom.zoom;
		pos.y -= dir.y * 8 * imagezoom.zoom;

		if (pos.x > 0) pos.x = 0;
		if (pos.y > 0) pos.y = 0;
		if (imagezoom.ctr.offsetWidth - pos.x > imagezoom.img.offsetWidth) pos.x = imagezoom.ctr.offsetWidth - imagezoom.img.offsetWidth;
		if (imagezoom.ctr.offsetHeight - pos.y > imagezoom.img.offsetHeight) pos.y = imagezoom.ctr.offsetHeight - imagezoom.img.offsetHeight;
		imagezoom.img.style.left = String(pos.x) + "px";
		imagezoom.img.style.top = String(pos.y) + "px";

		imagezoom.moveTimer = setTimeout("imagezoom.handleMove({'x': " + String(dir.x) + ",'y': " + String(dir.y) + "})", imagezoom.sensitivity);
	},
	"setZoom": function()
	{
		this.curwidth = Math.floor(this.origwidth * this.zoom);
		this.curheight = Math.floor(this.origheight * this.zoom);
		this.img.style.width = String(this.curwidth) + "px";
		this.img.style.height = String(this.curheight) + "px";

		for (i=0; i<this.mapareas.length; i++)
		{
			coords = this.origareacoords[i].split(",");
			for (j=0; j<coords.length; j++)
				coords[j] = Math.floor(coords[j] * this.zoom);
			this.mapareas[i].coords = coords.join(",");
		}
	},
	"doHandleWheel": function(event)
	{
		var target;
		var delta = 0;
		if (!event) /* For IE. */
			event = window.event;

		target = event.target || event.srcElement;
		while ((target != imagezoom.img) && (target != imagezoom.map))
		{
			if (target == document.body) return;
			target = target.parentNode;
		}

		this.isdragging = false;

		if (event.wheelDelta)
		{ /* IE/Opera. */
			delta = event.wheelDelta/120;
			/** In Opera 9, delta differs in sign as compared to IE.*/
			if (window.opera)
				delta = -delta;
		}
		else if (event.detail)
		{ /** Mozilla case. */
			/** In Mozilla, sign of delta is different than in IE.
			* Also, delta is multiple of 3. */
			delta = -event.detail/3;
		}
		/** If delta is nonzero, handle it.
			* Basically, delta is now positive if wheel was scrolled up,
			* and negative, if wheel was scrolled down.
		*/
		if (delta)
			imagezoom.handleWheel(delta);
		/** Prevent default actions caused by mouse wheel.
			* That might be ugly, but we handle scrolls somehow
			* anyway, so don't bother here..
			*/
		if (event.preventDefault)
			event.preventDefault();
		event.returnValue = false;
	},
	"doCenter": function()
	{
		imagezoom.img.style.left = "0px";
		imagezoom.img.style.top = "0px";
		this.zoom = 1;
		this.setZoom();
	},
	"initMapAreas": function()
	{
		var i;

		this.mapareas = this.map.getElementsByTagName("area");
		for (i=0; i<this.mapareas.length; i++)
			this.origareacoords.push(this.mapareas[i].coords);
	},
	"initZoom": function(img, map)
	{
		this.img = img;
		this.origwidth = img.offsetWidth;
		this.origheight = img.offsetHeight;
		this.ctr = document.createElement("div");
		this.ctr.style.overflow = "hidden";
		this.ctr.style.position = "relative";
		this.ctr.style.display = "inline-block";
		this.ctr.style.width = String(this.origwidth) + "px";
		this.ctr.style.height = String(this.origheight) + "px";
		this.img.parentNode.insertBefore(this.ctr, this.img);
		this.ctr.appendChild(this.img);
		this.img.style.cssFloat = "left";
		this.img.style.position = "absolute";

		this.map = map;
		this.initMapAreas();
		/** Initialization code. 
 			* If you use your own event management code, change it as required.
	 		*/
		if (document.captureEvents)
			document.captureEvents(
			Event.MOUSEDOWN |
			Event.MOUSEMOVE |
			Event.MOUSEUP |
			Event.MOUSEWHEEL
		);

		if (window.addEventListener)
			/** DOMMouseScroll is for mozilla. */
			window.addEventListener('DOMMouseScroll', this.doHandleWheel, false);
		/** IE/Opera. */

		window.onmousewheel = document.onmousewheel = this.doHandleWheel;

		/**document.onmousedown = this.beginDrag;
		document.onmousemove = this.handleDrag;
		document.onmouseup = this.endDrag;*/
	}
};