ZoomPane.dragListener = null;
function ZoomPane() {
	this.outLimit = 1;
	this.inLimit = 3;
	this.currentZoom = 1;

	this.originalX = 0;
	this.originalY = 0;

	this.scaleSteps = 9;
}

ZoomPane.getTarget = function(event) {
		event = (event == null ?  window.event : event);
		if (event.target) {
			return event.target;
		}
		else if (event.srcElement) {
			return event.srcElement;
		}
	}

ZoomPane.prototype.startDrag = function(event) {
		if(event.preventDefault) {
			event.preventDefault();
		}
		var content = ZoomPane.getTarget(event);
		if (ZoomPane.dragListener != null) {
			if (this.currentZoom > 1) {
				if (content.attachEvent) {
					content.detachEvent("onmousemove", ZoomPane.dragListener);
				}
				else {
					content.removeEventListener("mousemove", ZoomPane.dragListener, false);
				}
			}
		}
		this.originalX = event.clientX;
		this.originalY = event.clientY;

		content.style.cursor = 'move';

		if (this.currentZoom > this.outLimit) {
			var thisObject = this;
			if (content.attachEvent) {
				content.attachEvent("onmousemove", ZoomPane.dragListener = function(event) {
					ZoomPane.drag(event, thisObject);
				});
			}
			else {
				content.addEventListener("mousemove", ZoomPane.dragListener = function(event) {
					ZoomPane.drag(event, thisObject);
				}, false);
			}
		}
	}

ZoomPane.prototype.stopDrag = function(event) {
		var content = ZoomPane.getTarget(event);
		content.style.cursor = 'default';
		this.originalX = event.clientX;
		this.originalY = event.clientY;

		if (this.currentZoom > this.outLimit) {
			if (content.attachEvent) {
				content.detachEvent("onmousemove", ZoomPane.dragListener);
			}
			else {
				content.removeEventListener("mousemove", ZoomPane.dragListener, false);
			}
		}
	}

ZoomPane.normalizePixelValue = function(value) {
		return parseFloat(value.replace(/px/g, ''));
	}

ZoomPane.validatePosition = function(content, offsetX, offsetY) {
		var viewport = content.parentNode;
		var viewportWidth = ZoomPane.normalizePixelValue(viewport.style.width);
		var viewportHeight = ZoomPane.normalizePixelValue(viewport.style.height);
		var contentWidth = ZoomPane.normalizePixelValue(content.style.width);
		var contentHeight = ZoomPane.normalizePixelValue(content.style.height);

		return (offsetY < 0) && (offsetX < 0) && (viewportWidth + Math.abs(offsetX) < contentWidth) && (viewportHeight + Math.abs(offsetY) < contentHeight);
	}
	
ZoomPane.drag = function(event, zoomObject) {
		var content = ZoomPane.getTarget(event);
		var currentX = event.clientX;
		var currentY = event.clientY;
		var offsetX = ZoomPane.normalizePixelValue(content.style.left) + (currentX - zoomObject.originalX);
		var offsetY = ZoomPane.normalizePixelValue(content.style.top) + (currentY - zoomObject.originalY);

		if (ZoomPane.validatePosition(content, offsetX, offsetY)) {
			content.style.left = offsetX + 'px';
			content.style.top = offsetY + 'px';
		}
		zoomObject.originalX = currentX;
		zoomObject.originalY = currentY;
	}

ZoomPane.normalizeCoordinates = function(content, offsetX, offsetY) {
		var viewport = content.parentNode;
		var viewportWidth = ZoomPane.normalizePixelValue(viewport.style.width);
		var viewportHeight = ZoomPane.normalizePixelValue(viewport.style.height);
		var contentWidth = ZoomPane.normalizePixelValue(content.style.width);
		var contentHeight = ZoomPane.normalizePixelValue(content.style.height);

		var newX = 0;
		var newY = 0;

		if (offsetY <= 0) {
			newY = viewportHeight - contentHeight;
		}

		if (offsetX <= 0) {
			newX = viewportWidth - contentWidth;
		}
				
		return new Array(newX, newY);
	}

ZoomPane.animateZoom = function(contentID, newWidth, newHeight, stepW, stepH) {
		var content = document.getElementById(contentID);
		var width = ZoomPane.normalizePixelValue(content.style.width);
		var height = ZoomPane.normalizePixelValue(content.style.height);


		var anotherStep = false;
		var offsetX = ZoomPane.normalizePixelValue(content.style.left);
		var offsetY = ZoomPane.normalizePixelValue(content.style.top);

		if ((stepW > 0 && width < newWidth) || (stepW < 0 && width > newWidth)) {
			content.style.width = (width + stepW) + 'px';
			offsetX = Math.round(ZoomPane.normalizePixelValue(content.style.left) - (stepW / 2));
			anotherStep = true;
		}
		
		if ((stepH > 0 && height < newHeight) || (stepH < 0 && height > newHeight)) {
			content.style.height = (height + stepH) + 'px';
			offsetY = Math.round(ZoomPane.normalizePixelValue(content.style.top) - (stepH / 2));
			anotherStep = true;
		}


		if (ZoomPane.validatePosition(content, offsetX, offsetY)) {
			content.style.left = offsetX + 'px';
			content.style.top = offsetY + 'px';
		}
		else {
			var offset = ZoomPane.normalizeCoordinates(content, offsetX, offsetY);
			content.style.left = offset[0] + 'px';
			content.style.top = offset[1] + 'px';
		}

		if (anotherStep) {
			setTimeout('ZoomPane.animateZoom(\'' + contentID + '\', ' + newWidth + ', ' + newHeight + ', ' + stepW + ', ' + stepH + ')', 7);
		}
	}
	
ZoomPane.prototype.zoomIn = function(contentID, scale) {
		var content = document.getElementById(contentID);
		
		if (this.currentZoom < this.inLimit) {
			this.currentZoom += scale;

			var width = ZoomPane.normalizePixelValue(content.style.width);
			var height = ZoomPane.normalizePixelValue(content.style.height);

			var newWidth = Math.round(width * (1 + scale));
			var newHeight = Math.round(height * (1 + scale));
						
			setTimeout('ZoomPane.animateZoom(\'' + contentID + '\', ' + newWidth + ', ' + newHeight + ', ' + Math.round((newWidth - width) / this.scaleSteps) + ', ' + Math.round((newHeight - height) / this.scaleSteps) + ')', 7);
		}
	}

ZoomPane.prototype.zoomOut = function(contentID, scale) {
		var content = document.getElementById(contentID);
		
		if (this.currentZoom > this.outLimit) {
			this.currentZoom -= scale;

			var width = ZoomPane.normalizePixelValue(content.style.width);
			var height = ZoomPane.normalizePixelValue(content.style.height);

			var newWidth = Math.round(width / (1 + scale));
			var newHeight = Math.round(height / (1 + scale));
						
			setTimeout('ZoomPane.animateZoom(\'' + contentID + '\', ' + newWidth + ', ' + newHeight + ', ' + Math.round((newWidth - width) / this.scaleSteps) + ', ' + Math.round((newHeight - height) / this.scaleSteps) + ')', 7);
		}
		else {
			content.style.left = '0px';
			content.style.top = '0px';
		}
	}