// Thanks to Julian Robichaux, for this script.
// how many milliseconds we should wait between resizing events
var resizeDelay = 5;
// how many pixels we should grow or shrink by each time we resize
var resizeIncrement = 5;

// this will hold information about the images we're dealing with
var imgCache = new Object();


/**
The getCacheTag function just creates a (hopefully) unique identifier for
each <img> that we resize.
*/
function getCacheTag (imgElement) {
return imgElement.src + "~" + imgElement.offsetLeft + "~" + imgElement.offsetTop;
}


/**
We're using this as a class to hold information about the <img> elements
that we're manipulating.
*/
function cachedImg (imgElement, increment) {
this.img = imgElement;
this.cacheTag = getCacheTag(imgElement);
this.originalSrc = imgElement.src;

var h = imgElement.height;
var w = imgElement.width;
this.originalHeight = h;
this.originalWidth = w;

increment = (!increment) ? resizeIncrement : increment;
this.heightIncrement = Math.ceil(Math.min(1, (h / w)) * increment);
this.widthIncrement = Math.ceil(Math.min(1, (w / h)) * increment);
}


function resizeImg (imgElement, percentChange, newImageURL) {
// convert the percentage (like 150) to an percentage value we can use
// for calculations (like 1.5)
var pct = (percentChange) ? percentChange / 100 : 1;

// if we've already resized this image, it will have a "cacheTag" attribute
// that should uniquely identify it. If the attribute is missing, create a
// cacheTag and add the attribute
var cacheTag = imgElement.getAttribute("cacheTag");
if (!cacheTag) {
cacheTag = getCacheTag(imgElement);
imgElement.setAttribute("cacheTag", cacheTag);
}

// look for this image in our image cache. If it's not there, create it.
// If it is there, update the percentage value.
var cacheVal = imgCache[cacheTag];
if (!cacheVal) {
imgCache[cacheTag] = new Array(new cachedImg(imgElement), pct);
} else {
cacheVal[1] = pct;
}

// if we're supposed to be using a rollover image, use it
if (newImageURL)
imgElement.src = newImageURL;

// start the resizing loop. It will continue to call itself over and over
// until the image has been resized to the proper value.
resizeImgLoop(cacheTag);
return true;
}

function resizeImgLoop (cacheTag) {
// get information about the image element from the image cache
var cacheVal = imgCache[cacheTag];
if (!cacheVal)
return false;

var cachedImageObj = cacheVal[0];
var imgElement = cachedImageObj.img;
var pct = cacheVal[1];
var plusMinus = (pct > 1) ? 1 : -1;
var hinc = plusMinus * cachedImageObj.heightIncrement;
var vinc = plusMinus * cachedImageObj.widthIncrement;
var startHeight = cachedImageObj.originalHeight;
var startWidth = cachedImageObj.originalWidth;

var currentHeight = imgElement.height;
var currentWidth = imgElement.width;
var endHeight = Math.round(startHeight * pct);
var endWidth = Math.round(startWidth * pct);

// if the image is already the right size, we can exit
if ( (currentHeight == endHeight) || (currentWidth == endWidth) )
return true;

// increase or decrease the height and width, making sure we don't get
// larger or smaller than the final size we're supposed to be
var newHeight = currentHeight + hinc;
var newWidth = currentWidth + vinc;
if (pct > 1) {
if ((newHeight >= endHeight) || (newWidth >= endWidth)) {
newHeight = endHeight;
newWidth = endWidth;
}
} else {
if ((newHeight <= endHeight) || (newWidth <= endWidth)) {
newHeight = endHeight;
newWidth = endWidth;
}
}

// set the image element to the new height and width
imgElement.height = newHeight;
imgElement.width = newWidth;

// if we've returned to the original image size, we can restore the
// original image as well (because we may have been using a rollover
// image in the original call to resizeImg)
if ((newHeight == cachedImageObj.originalHeight) || (newWidth == cachedImageObj.originalwidth)) {
imgElement.src = cachedImageObj.originalSrc;
}

// shrink or grow again in a few milliseconds
setTimeout("resizeImgLoop('" + cacheTag + "')", resizeDelay);
}