var mouseX = null;
var mouseY = null;
var mouseEvent = null;

/*
OnMousemove will be overwrite by draganddrop.js ! Firefox needs the ev-parameter for correct mouse position.
mouseXY must be called again, if no event is set.
*/

document.onmousemove = mouseXY;

function mouseXY (ev) {
	mouseX = document.all ? window.event.clientX + document.body.scrollLeft - document.body.clientLeft : ev.pageX;
	mouseY = document.all ? window.event.clientY + document.body.scrollTop  - document.body.clientTop : ev.pageY;
	mouseEvent = ev;
}

timeoutMouseContainer_task1 = null;
timeoutMouseContainer_task2 = null;
imgWidth = null;
imgHeight = null;

function showMouseContainer (image_src, img_width, img_height) {
	imgWidth = img_width;
	imgHeight = img_height;
	image_src = image_src.replace("thumbnails","web");

	image_web = "<img src='" + image_src + "' />";

	element = document.getElementById("thumbHelper1");
	with (element) {
		innerHTML = image_web;

		/* small images will grow up after a few seconds */
		task1 = "element.style.display = 'block'";
		timeoutMouseContainer_task1 = window.setTimeout(task1,300);

		/* image will grow up more again after a few seconds */
		/*
		image_original = "<img src='" + image.src.replace('web','original') + "' />";
		task2 = "element.innerHTML = image_original";
		timeoutMouseContainer_task2 = window.setTimeout(task2,3000);
		*/
	}
}

function moveMouseContainer () {
	if (mouseEvent == null) {mouseXY ();}
	element = document.getElementById("thumbHelper1");
	
	with (element) {
		/*
		if (mouseX < 500) {
			style.left = mouseX + 30;
		} else {
			style.left = mouseX - imgWidth - 50;
		}
		style.top = mouseY - imgHeight / 2;
		*/
		
		style.left = mouseX + 30;
		style.top = mouseY - 50;
	}
}

function hideMouseContainer () {
	element = document.getElementById("thumbHelper1");
	with (element) {
		innerHTML = "";
		style.display = "none";
		window.clearTimeout(timeoutMouseContainer_task1);
		window.clearTimeout(timeoutMouseContainer_task2);
	}
}

function showDragableMouseContainer (image) {
	image = image.replace("thumbnails","original");
	image_original = "<img src='" + image + "' onmouseover='startDragableMouseContainer()' onmousemove='moveDragableMouseContainer()' onclick='hideDragableMouseContainer ()' onmouseout='hideDragableMouseContainer ()' />";

	element1 = document.getElementById("thumbHelper1");
	element2 = document.getElementById("thumbHelper2");

	element1.style.display = "none";
	with (element2) {
		innerHTML = image_original;
		style.left = mouseX - 200;
		style.top = mouseY - 200;
		style.display = "block";
	}
}

thumbHelper2X = null;
thumbHelper2Y = null;
thumbHelper2move = false;
timeout_thumbHelper2move = null;

function startDragableMouseContainer() {
	element = document.getElementById("thumbHelper2");

	/* the mouse pointer should'nt be at the border of the image */
	task1 = "thumbHelper2X = mouseX - element.offsetLeft;";
	task2 = "thumbHelper2Y = mouseY - element.offsetTop;";
	task3 = "thumbHelper2move = true;";
	task = task1 + task2 + task3;
	timeout_thumbHelper2move = window.setTimeout(task, 200);
}

function moveDragableMouseContainer () {
	if (!thumbHelper2move) return false;

	element = document.getElementById("thumbHelper2");
	with (element) {
		style.left = (mouseX - thumbHelper2X);
		style.top = (mouseY - thumbHelper2Y);
	}
}

function hideDragableMouseContainer () {
	element = document.getElementById("thumbHelper2");
	with (element) {
		innerHTML = "";
		style.display = "none";
	}

	thumbHelper2move = false;
	window.clearTimeout (timeout_thumbHelper2move);
}