function zoomhelper(targetW, targetH, targetX, targetY, prefix) {
	// if the number of iterations necessary hasnīt been exceeded
	// change dimensions by the amount defined by zoomfactor and
	// move the div by the amount calculated in amountX and amountY
	if (i > 1) {
		image.style.width = (parseInt(image.style.width) + Math.round(parseInt(image.style.width) * zoomfactor) * prefix) + "px";
		image.style.height = (parseInt(image.style.height) + Math.round(parseInt(image.style.height) * zoomfactor) * prefix) + "px";
		// calculate the amount the div has to be moved in each iteration
		amountX = (targetX - parseInt(div.style.left)) / i;
		amountY = (targetY - parseInt(div.style.top)) / i;
		div.style.left = (parseInt(div.style.left) + amountX) + "px";
		div.style.top = (parseInt(div.style.top) + amountY) + "px";
		i--;				
	// if the necessary number of iterations has been exceeded
	// change the image dimensions and the div position to the target values
	// (necessary because of rounding of the values)
	} else {
		image.style.width = targetW + "px";
		image.style.height = targetH + "px";
		div.style.left = targetX + "px";
		div.style.top = targetY+ "px";
		clearzoom();
	}
}

function zoom(startW, startH, targetW, targetH, targetX, targetY, state) {			
	if (!document.all && !document.getElementById)
		return;
	prefix = (state == "in") ? 1 : -1;
	image = document.images.zoom;
	image.style.width = startW + "px";
	image.style.height = startH + "px";
	// calculate the number of iterations that are necessary to increase the image dimensions
	// from the start values to the target values
	numberOfIterations = Math.round(Math.log(targetW / startW) / Math.log(1 + zoomfactor * prefix));	
	// execute the zoomhelper function as an interval
	zooming = "started";
	i = numberOfIterations;
	beginzoom = setInterval("zoomhelper("+targetW+","+targetH+","+targetX+","+targetY+","+prefix+")",20);
}
	
function clearzoom() {
  if (window.beginzoom) {
	  clearInterval(beginzoom);
	  zooming = "complete";
  }
}

function showNewImage(id, imagepath, width, height, thumbW, thumbH) {
	// zoom out the current image and start an interval that waits
	// for the completion of the zoom
	div = document.getElementById('zoom_div');
	thumb = eval("document.getElementById('thumb_" + currentId + "')");
	load = document.getElementById('loading');
	// hide dropshadow
	document.getElementById("dropshadow_div").style.display = "none";
	zoom(currentW,currentH,curThumbW,curThumbH,currentX,currentY,'out');			
	startzoom = setInterval("preloadImage("+id+",'"+imagepath+"',"+width+","+height+","+thumbW+","+thumbH+")",20);
}

function preloadImage(id, imagepath, width, height, thumbW, thumbH) {
	// if the zoom is complete zoom in the new image
	if (zooming == "complete") {
		currentId = id;
		zoomX = zoomLeft + (zoomSize - width) / 2;
	  zoomY = zoomTop + (zoomSize - height) / 2;
	  // calculate the new currentX and currentY and move the div accordingly
		currentX = Math.round((id - 1) % 3 * gridsize + (gridsize - thumbW) / 2);
		currentY = Math.round(Math.floor((id - 1) % 15 / 3) * gridsize + (gridsize - thumbH) / 2);
		// for each row x (starting with 0) add x * marginY to currentY
		currentY += Math.floor((id - 1) / 3) * marginY;
		currentW = width;
		currentH = height;
		curThumbW = thumbW;
		curThumbH = thumbH;
		// display thumbnail of previously shown image				
		thumb.style.display = "block";								
		// hide zoom div
		div.style.display = "none";
		// load the new image
		loading = "incomplete";
		document.images.zoom.src = imagepath;		
		div.style.left = currentX + "px";
		div.style.top = currentY + "px";
		// after 100ms check wether to display the "loading..." image
		isloading = setTimeout("displayLoading()",100);
		if (window.startzoom)
	    clearInterval(startzoom);
	  completezoom = setInterval("changeImage("+id+","+width+","+height+","+thumbW+","+thumbH+")",20);
  }
}

function changeImage(id, width, height, thumbW, thumbH) {
  if (loading == "complete") {
	  // display zoom div
		div.style.display = "block";
		div.style.width = width;
		div.style.height = height;
		// hide thumbnail of currently shown image
		thumb = eval("document.getElementById('thumb_" + id + "')");
	  thumb.style.display = "none";
	  // hide "loading..." image
		load.style.display = "none";	  
	  zoom(thumbW,thumbH,width,height,zoomX,zoomY,'in');
	  displayshadow = setInterval("displayShadow()",20);
	  if (window.completezoom)
	    clearInterval(completezoom);
  }
}

function displayShadow() {
	if (zooming == "complete") {
		// after completion of zooming the image, display the dropshadow
		ds_div = document.getElementById('dropshadow_div');
		ds_div.style.left = zoomX - 3 + "px";
		ds_div.style.top = zoomY - 3 + "px";
		ds_div.style.width = currentW + 15 + "px";
		ds_div.style.height = currentH + 15 + "px";
		ds = document.getElementById('dropshadow');
		ds.style.width = currentW + 15 + "px";
		ds.style.height = currentH + 15 + "px";
		ds_div.style.display = "block";
		if (window.displayshadow)
		clearInterval(displayshadow);
	}
}

function displayLoading() {
  // if the zoomed image is still loading display the "loading..." image
  if (loading != "complete") {
	  // display "loading..." image
		load.style.display = "block";
	}
}

function makeNumber(number) {
  if (number > 9) {
    return number;
  } else {
    return "0" + number;
  }
}