function transform(oldBox, newBox, steps, speed, recall){
	var orgNewWidth;
	var orgNewHeight;
	var stepW;
	var stepH;
	var stepO;

	function fade(op){
		var w = Math.round(oldBox.getWidth() + stepW);
		var h = Math.round(oldBox.getHeight() + stepH);

		if (stepW >= 0 && w > orgNewWidth || stepW < 0 && w < orgNewWidth) w = orgNewWidth;
		if (stepH >= 0 && h > orgNewHeight || stepH < 0 && h < orgNewHeight) h = orgNewHeight;

		op += stepO;
		if (op >= 100) op = 100;
		oldBox.setOpacity((100 - op) / 100);
		newBox.setOpacity(op / 100);

		style = { width: w + 'px', height: h + 'px'};
		oldBox.setStyle(style);
		newBox.setStyle(style);

		if (op < 100) {
			fade.delay(speed / 1000, op);
		} else {
			oldBox.update(newBox.innerHTML);
			oldBox.setStyle({
					overflow: 'visible',
					width: 'auto',
					height: 'auto'
				});
			oldBox.setOpacity(1);
			newBox.remove();
			if (recall != null) {
				recall();
			}
		}
	}

	function isImageLoaded(img) {
		if (img.complete == undefined) {
			if (img.getAttribute('completed') == undefined) {
				img.setAttribute('completed', false);
				img.observe('load', function() { img.setAttribute('completed', true); });
			}
			return img.getAttribute('completed');
		}
		return img.complete;
	}

	function startFade(){
		var imgs = newBox.select('img');
		for (var i = 0; i < imgs.length; i ++) {
			if (!isImageLoaded(imgs[i])) {
				startFade.delay(0.1);
				return;
			}
		}
		newBox.setStyle({
				position: 'absolute',
				left: oldBox.cumulativeOffset()[0] + 'px',
				top: oldBox.cumulativeOffset()[1] + 'px'
			});
		newBox.setOpacity(0.01);
		newBox.show();

		orgNewWidth = newBox.getWidth();
		orgNewHeight = newBox.getHeight();

		stepW = (newBox.getWidth() - oldBox.getWidth()) / 10;
		stepH = (newBox.getHeight() - oldBox.getHeight()) / 10;
		stepO = 100 / steps;

		oldBox.setStyle({overflow: 'hidden'});
		newBox.setStyle({
				zIndex: 5000,
				overflow: 'hidden',
				width: oldBox.getWidth() + 'px',
				height: oldBox.getHeight() + 'px'
			});
		fade(0);
	}

	startFade();
}