var x, y;
var imgWidth, imgHeight;
var imgZoomWidth, imgZoomHeight;
var cursorWidth, cursorHeight;
var scaleFactor;

function viewArea() {
	var imgX = x - imgRegularPane.offsetLeft;
	var imgY = y - imgRegularPane.offsetTop;

	if (imgX >= 0 && imgX * scaleFactor <= imgZoomWidth && imgY >= 0 && imgY * scaleFactor <= imgZoomHeight) {
		placeCursor();
		showZoomElement(cursorPane);
		showZoomElement(divZoomPane);
		hideZoomElement(imgInfZoom2Pane);
		showZoomElement(imgInfZoom1Pane);
		var hCurWidth = parseInt(cursorWidth / 2);
		var hCurHeight = parseInt(cursorHeight / 2);

		if (imgX < hCurWidth || imgX + hCurWidth > imgWidth)
			imgZoomPane.style.left = imgX < hCurWidth ? '0px' : (-imgZoomWidth + divSizeWidth) + 'px';
		else
			imgZoomPane.style.left = ((-imgX + hCurWidth) * scaleFactor) + 'px';
			
		if (imgY < hCurHeight || imgY + hCurHeight > imgHeight)
			imgZoomPane.style.top = imgY < hCurHeight ? '0px' : (-imgZoomHeight + divSizeHeight) + 'px';
		else
			imgZoomPane.style.top = ((-imgY + hCurHeight) * scaleFactor) + 'px';
	}
	else
	{
		hideZoomElement(cursorPane);
		hideZoomElement(divZoomPane);
		hideZoomElement(divOpPane1);
		hideZoomElement(divOpPane2);
		hideZoomElement(divOpPane3);
		hideZoomElement(divOpPane4);
		showZoomElement(imgInfZoom2Pane);
		hideZoomElement(imgInfZoom1Pane);
	}
}

function getXY(ev) {
	var top, left;
	if (ev)
	{
		x = ev.pageX;
		y = ev.pageY;
	}
	else
	{
		top = document.documentElement.scrollTop;
		left = document.documentElement.scrollLeft;
		x = window.event.clientX + left;
		y = window.event.clientY + top;
	}
}

function zoomArea(ev) {
	getXY(ev);
	viewArea(ev);
}

function canMoveOnXAxis(halfCursor) {
	var imgRegularLeft;
	imgRegularLeft = imgRegularPane.offsetLeft;
	if (x < imgRegularLeft + halfCursor)
		return -1;
	if (x > imgRegularLeft + imgWidth - halfCursor)
		return 1;
	return 0;
}

function canMoveOnYAxis(halfCursor) {
	var imgRegularTop;
	imgRegularTop = imgRegularPane.offsetTop;
	if (y < imgRegularTop + halfCursor)
		return -1;
	if (y > imgRegularTop + imgHeight - halfCursor)
		return 1;
	return 0;
}

function placeCursor() {
	var hCurWidth = parseInt(cursorWidth / 2);
	var hCurHeight = parseInt(cursorHeight / 2);
	var canMoveX = canMoveOnXAxis(hCurWidth);
	var canMoveY = canMoveOnYAxis(hCurHeight);
	if (canMoveX == -1)
		cursorPane.style.left = imgRegularPane.offsetLeft + 'px';
	else {
		if (canMoveX == 1)
			cursorPane.style.left = (parseInt(imgRegularPane.offsetLeft) + imgWidth - cursorWidth) + 'px';
		else
			cursorPane.style.left = (x - hCurWidth) + 'px';
	}
	if (canMoveY == -1)
		cursorPane.style.top = imgRegularPane.offsetTop + 'px';
	else {
		if (canMoveY == 1)
			cursorPane.style.top = (parseInt(imgRegularPane.offsetTop) + imgHeight - cursorHeight) + 'px';
		else
			cursorPane.style.top = (y - hCurHeight) + 'px';
	}
	placeElements(canMoveX, canMoveY);
}

function placeElements(cMovX, cMovY) {
	divOpPane1.style.left = imgRegularPane.offsetLeft + 'px';
	divOpPane4.style.left = imgRegularPane.offsetLeft + 'px';
	divOpPane1.style.width = imgWidth + 'px';
	divOpPane4.style.width = imgWidth + 'px';
	if (cMovY == -1) {
		hideZoomElement(divOpPane1);
		showZoomElement(divOpPane4);
		divOpPane4.style.top = (imgRegularPane.offsetTop + cursorHeight) + 'px';
		divOpPane4.style.height = (imgHeight - cursorHeight) + 'px';
	}
	else {
		divOpPane1.style.top = imgRegularPane.offsetTop + 'px';
		if (cMovY == 1) {
			hideZoomElement(divOpPane4);
			showZoomElement(divOpPane1);
			divOpPane1.style.height = (imgHeight - cursorHeight) + 'px';
		}
		else {
			showZoomElement(divOpPane1);
			showZoomElement(divOpPane4);
			divOpPane1.style.height = (parseInt(cursorPane.style.top) - parseInt(imgRegularPane.offsetTop)) + 'px';
			divOpPane4.style.top = (parseInt(cursorPane.style.top) + cursorHeight) + 'px';
			divOpPane4.style.height = (imgHeight - parseInt(divOpPane1.style.height) - cursorHeight) + 'px';
		}
	}
	divOpPane2.style.top = cursorPane.style.top;
	divOpPane3.style.top = cursorPane.style.top;
	divOpPane2.style.height = cursorPane.style.height;
	divOpPane3.style.height = cursorPane.style.height;
	if (cMovX == -1) {
		hideZoomElement(divOpPane2);
		showZoomElement(divOpPane3);
		divOpPane3.style.left = (imgRegularPane.offsetLeft + cursorWidth) + 'px';
		divOpPane3.style.width = (imgWidth - cursorWidth) + 'px';
	}
	else {
		divOpPane2.style.left = imgRegularPane.offsetLeft + 'px';
		if (cMovX == 1) {
			hideZoomElement(divOpPane3);
			showZoomElement(divOpPane2);
			divOpPane2.style.width = (imgWidth - cursorWidth) + 'px';
		}
		else {
			showZoomElement(divOpPane2);
			showZoomElement(divOpPane3);
			divOpPane2.style.width = (parseInt(cursorPane.style.left) - parseInt(imgRegularPane.offsetLeft)) + 'px';
			divOpPane3.style.left = (parseInt(cursorPane.style.left) + cursorWidth) + 'px';
			divOpPane3.style.width = (imgWidth - parseInt(divOpPane2.style.width) - cursorWidth) + 'px';
		}
	}
}

function showZoomElement(elm) {
	elm.style.visibility = 'visible';
	elm.style.display = 'block';
}

function hideZoomElement(elm) {
	elm.style.visibility = 'hidden';
	elm.style.display = 'none';
}

function calculateScaleFactor() {
	imgWidth = 260;
	imgHeight = 260;
	imgZoomWidth = 780;
	imgZoomHeight = 780;
    //divInformationPane.width = imgWidth + 'px';
    //divInformationPane.height = imgHeight + 'px';
	var imgRegularProp = imgWidth / imgHeight;
	var imgZoomProp = imgZoomWidth / imgZoomHeight;
	
	scaleFactor = imgZoomWidth / imgWidth;
	
	var divPropWidth = imgZoomWidth / divSizeWidth;
	var divPropHeight = imgZoomHeight / divSizeHeight;
	cursorWidth = parseInt(imgWidth / divPropWidth);
	cursorHeight = parseInt(imgHeight / divPropHeight);
	cursorPane.style.width = cursorWidth + 'px';
	cursorPane.style.height = cursorHeight + 'px';
}

function Opacity(id)
{
	this.opacity = 0;
	this.style = id.style;
	this.timer = null;
}

Opacity.prototype.setOpacity = function(value)
{
	if(value == 0) {
		this.style.display = 'none';
	} else {
		this.style.display = 'block';
	}
	this.style.opacity = (value / 100);
	this.style.MozOpacity = (value / 100);
	this.style.KhtmlOpacity = (value / 100);
	this.style.filter = "alpha(opacity=" + value + ")";
}

document.onmousemove = zoomArea;