Event.observe(window, 'load', function() {
	// ti = Thumbnail image - the full size image, will be resized to fit the thumbnail container
	
	var ti = $("image1");
	if (ti) {
		var tc = ti.up(), //Thumbnail container - the element that holds the <img> tag
			// create a container for the zoom image
			zc = $(document.createElement("div"));
		// sets the id attribute for css styling
		zc.setAttribute("id", "huy-zoomer");
		// hide it
		zc.setStyle({
			display: "none",
			backgroundColor: "#fff"
		});
		// append it after the thumbnail container
		tc.up().appendChild(zc);
		// change the cursor back to default
		ti.setStyle({
			cursor: "default"
		});
		// if image is wide
		if (ti.getWidth() > ti.getHeight()) {
			// resize the image to fit area, keeping ratio, using maximum width
			ti.setStyle({
				height: ti.getHeight() / (ti.getWidth() / tc.getWidth()) + "px",
				width: tc.getWidth() + "px"
			});
		// else if image is tall
		} else {
			// resize the image to fit area, keeping ratio, using maximum height
			var tw = ti.getWidth() / (ti.getHeight() / tc.getHeight());
			ti.setStyle({
				width: tw + "px",
				height: tc.getHeight() + "px",
				marginLeft: ((tc.getWidth() - tw) * 0.5) + "px"
			});
		}
		// copy the thumbnail image's src to the zoom image (so that they point to the same image)
		zi.setAttribute("src", ti.getAttribute("src"))
		zi.setStyle({
			position: "absolute",
			padding: "10%"
		});
		zc.setStyle({
			overflow: "hidden"
		}).appendChild(zi);
		Event.observe(ti, 'mouseover', function(){
			zc.show();
			mTimer = setInterval("moveZoomImage()", 1);
		});
		Event.observe(ti, 'mouseout', function(){
			zc.hide();
			clearInterval(mTimer);
		});
		
		Event.observe(ti, 'mousemove', function(e){
			var padding = 30, // edge area that doesn't scroll the zoomed image
				offset = (Position.cumulativeOffset(Event.element(e))), // actual offset of the thumbnail image
				mx = Event.pointerX(e) - offset[0] - padding, // mouseX over image
				my = Event.pointerY(e) - offset[1] - padding, // mouseY over image
				tw = ti.getWidth() - (padding * 2), // thumbnail image's width without padding
				th = ti.getHeight() - (padding * 2), // thumnail image's height without padding
				px = mx / tw, // mouseX over image as a percentage
				py = my / th; // mouseY
			if (mx <= 0) {
				zx = 0;
			}
			else {
				if (px >= 1) {
					zx = zc.getWidth() - zi.getWidth();
				}
				else {
					zx = px * -(zi.getWidth() - zc.getWidth())
				}
			}
			if (my <= 0) {
				zy = 0;
			}
			else {
				if (py >= 1) {
					zy = zc.getHeight() - zi.getHeight();
				}
				else {
					zy = py * -(zi.getHeight() - zc.getHeight())
				}
			}
		});
	}
});
var zi = $(new Image()), // Zoomed image
	zx, // Zoomed image's destination x pos
	zy, // y pos
	mTimer, // Interval timer
	zDelay = 12; // Friction, bigger is slower
function moveZoomImage(){
	var ox = parseFloat(zi.getStyle("left") || "0"), // Zoom image's current x pos
		oy = parseFloat(zi.getStyle("top") || "0"); // y pos
	zi.setStyle({
		left: (ox + ((zx - ox) / zDelay)) + "px",
		top: (oy + ((zy - oy) / zDelay)) + "px"
	});
}
function zoomer(img) {
	// ti = Thumbnail image - the full size image, will be resized to fit the thumbnail container
	var ti = $(img);
	if (ti) {
		var tc = ti.up(), //Thumbnail container - the element that holds the <img> tag
			// create a container for the zoom image
			zc = $(document.createElement("div"));
		// sets the id attribute for css styling
		zc.setAttribute("id", "huy-zoomer");
		// hide it
		zc.setStyle({
			display: "none",
			backgroundColor: "#fff"
		});
		// append it after the thumbnail container
		tc.up().appendChild(zc);
		// change the cursor back to default
		ti.setStyle({
			cursor: "default"
		});
		// if image is wide
		if (ti.getWidth() > ti.getHeight()) {
			// resize the image to fit area, keeping ratio, using maximum width
			ti.setStyle({
				height: ti.getHeight() / (ti.getWidth() / tc.getWidth()) + "px",
				width: tc.getWidth() + "px"
			});
		// else if image is tall
		} else {
			// resize the image to fit area, keeping ratio, using maximum height
			var tw = ti.getWidth() / (ti.getHeight() / tc.getHeight());
			ti.setStyle({
				width: tw + "px",
				height: tc.getHeight() + "px",
				marginLeft: ((tc.getWidth() - tw) * 0.5) + "px"
			});
		}
		// copy the thumbnail image's src to the zoom image (so that they point to the same image)
		zi.setAttribute("src", ti.getAttribute("src"))
		zi.setStyle({
			position: "absolute",
			padding: "10%"
		});
		zc.setStyle({
			overflow: "hidden"
		}).appendChild(zi);
		Event.observe(ti, 'mouseover', function(){
			zc.show();
			mTimer = setInterval("moveZoomImage()", 1);
		});
		Event.observe(ti, 'mouseout', function(){
			zc.hide();
			clearInterval(mTimer);
		});
		
		Event.observe(ti, 'mousemove', function(e){
			var padding = 30, // edge area that doesn't scroll the zoomed image
				offset = (Position.cumulativeOffset(Event.element(e))), // actual offset of the thumbnail image
				mx = Event.pointerX(e) - offset[0] - padding, // mouseX over image
				my = Event.pointerY(e) - offset[1] - padding, // mouseY over image
				tw = ti.getWidth() - (padding * 2), // thumbnail image's width without padding
				th = ti.getHeight() - (padding * 2), // thumnail image's height without padding
				px = mx / tw, // mouseX over image as a percentage
				py = my / th; // mouseY
			if (mx <= 0) {
				zx = 0;
			}
			else {
				if (px >= 1) {
					zx = zc.getWidth() - zi.getWidth();
				}
				else {
					zx = px * -(zi.getWidth() - zc.getWidth())
				}
			}
			if (my <= 0) {
				zy = 0;
			}
			else {
				if (py >= 1) {
					zy = zc.getHeight() - zi.getHeight();
				}
				else {
					zy = py * -(zi.getHeight() - zc.getHeight())
				}
			}
		});
	}
 }