function SwapImageFader(e) {
    this.imageElement = e;
    if (typeof e == "string")    // function argument can be a DOM element or its ID attribute
        this.imageElement = document.getElementById(e);
    this.oldimageElement = this.imageElement.cloneNode(true);
    this.oldimageElement.id += "Old";
    this.oldimageElement.style.zIndex--;
    this.imageElement.parentNode.appendChild(this.oldimageElement);
    this.mouseoverSwap = false;
    var that = this;

    this.swap = function(imagePath) {
        // newimageElement.src is a full url while imagePath is only a local path.  
        // Need to convert these to same for comparison or just extract file names to compare.
        // or could see if imagePath is a substring of newimageElement.src!            
        if (that.imageElement.src.search(imagePath) != -1)
        // if we're already fading-in this image just exit
            return;
        that.oldimageElement.src = that.imageElement.src;
        Fader.setOpacity100(that.imageElement, 0);
        that.imageElement.src = imagePath;
        that.imageElement.fade = new Fader(that.imageElement.id);
        // fades the front image (with its new src) from transparent to opaque
        // once front image is opaque, set the rear image src to match the front image
        // this keeps Firefox from flashing the rear image's old src before it's replaced to match the front image src
        that.imageElement.fade.makeOpaque(function() { that.imageElement.src = that.imageElement.src });
    }
}

function Fader(id) {
    var OpaqueTimer = null;
    var TranslucentTimer = null;
    var that = this;

    // gradually increases an element's opacity until it is fully opaque
    // runs the optional onCompletion function once the element is opaque
    this.makeOpaque = function(onCompletion) {
        clearTimeout(TranslucentTimer);
        var element = document.getElementById(id);
        var opacityvalue = Fader.getOpacity100(element);

        if (opacityvalue < 100) {
            opacityvalue += 7;
            Fader.setOpacity100(element, opacityvalue);
            OpaqueTimer = setTimeout(function() { that.makeOpaque(onCompletion) }, 50);
        }
        else if (typeof onCompletion != "undefined")
            onCompletion();
    }

    // gradually decreases an element's opacity until it is fully transparent
    // runs the optional onCompletion function once the element is transparent
    this.makeTranslucent = function(onCompletion) {
        clearTimeout(OpaqueTimer);
        var element = document.getElementById(id);
        var opacityvalue = Fader.getOpacity100(element);

        if (opacityvalue > 60) {
            opacityvalue -= 7;
            Fader.setOpacity100(element, opacityvalue);
            TranslucentTimer = setTimeout(function() { that.makeTranslucent(onCompletion) }, 50);
        }
        else if (typeof onCompletion != "undefined")
            onCompletion();
    }
}

// returns the opacity of element normalized to the range 0-100
Fader.getOpacity100 = function(element) {
    var opacityvalue = null;
    if (element.style.filter != null) {                 // IE opacity
        var opacity = element.style.filter;
        opacityvalue = parseInt(opacity.substring(opacity.search(/[0-9]/)));
    }
    else opacityvalue = element.style.opacity * 100;    // W3C DOM opacity

    return opacityvalue;
}

// Sets opacity of element.  Valid values are from 0 (transparent) to 100 (opaque)
Fader.setOpacity100 = function(element, value) {
    if (element) {
        element.style.filter = "alpha(opacity=" + value + ")";
        element.style.opacity = value / 100;            // W3C DOM opacity
    }
}