function RollOverBanner(canvasWidth, canvasHeight, primaryCanvasName, secondaryCanvasName, pauseDuration, imageCanvas, rolloverImages, isEnableFade) {

    // testing javascript competitbility
    this.ie4 = document.all;
    this.dom = document.getElementById;
    
    // canvas setup
    this.canvasWidth = canvasWidth + 'px';
    this.canvasHeight = canvasHeight + 'px';
    this.primaryCanvasName = primaryCanvasName;
    this.secondaryCanvasName = secondaryCanvasName;
    
    // image canvas setup, in case div javascript are not supported
    this.imageCanvas = imageCanvas
    
    // pause duration for each rotation, 1000=1s
    this.pauseDuration = pauseDuration;
    
    // images of rollover, preloaded for smooth display
    this.rolloverImages = rolloverImages;
    this.preloadedImages = new Array();
    for (p=0; p < this.rolloverImages.length; p++) {
        this.preloadedImages[p] = new Image();
        this.preloadedImages[p].src = this.rolloverImages[p][0];
    }
    
    // disbale fade effect
    this.isEnableFade = isEnableFade;

    // Global variable
    this.currentOpacity = 10;
    this.activeCanvasName = primaryCanvasName;
    this.activeImageIndex = 0;
    this.nextImageIndex = (this.rolloverImages.length == 1) ? 0 : 1;
    this.fadeInterval = null;    
    
    // class method initialization
    this.render = render;
    this.fadeIn = fadeIn;
    this.renderImage = renderImage;
    this.rotateImage = rotateImage;
    this.getObject = getObject;
    this.setOpacity = setOpacity;
}

function render() {
    // prepare the canvas for image rotation
    if (this.ie4 || this.dom) {
        document.write(
                '<div class="thumbnail_mainfeature">' + 
                  '<div style="position:relative;' + 'width:' + this.canvasWidth + 
                  ';height:' + this.canvasHeight + ';margin: 0px 0px 0px 0px;overflow:hidden">' + 
                    '<div id="' + this.primaryCanvasName + '" style="position:absolute;width:' + 
                    this.canvasWidth + ';height:' + this.canvasHeight + 
                    ';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div>' +
                    '<div id="' + this.secondaryCanvasName + '" style="position:absolute;width:' + 
                    this.canvasWidth + ';height:' + this.canvasHeight + 
                    ';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div>' +
                '</div></div>');
    } else {
        document.write('<img class="thumbnail_mainfeature" name="' + this.imageCanvas + 
                '" src="' + this.rolloverImages[0][0] + '">');
    }

    if (this.ie4 || this.dom) {
        // start the rotation
        this.renderImage(this.getObject(this.activeCanvasName), this.rolloverImages[this.activeImageIndex]);
        this.rotateImage();
    } else {
        var _this = this;
        setInterval(function() { _this.rotateImage() }, this.pauseDuration);
    }
}

function rotateImage() {
    if (this.ie4 || this.dom) {
        // Visualize active canvas
        this.currentOpacity=10;
        var activeCanvas = this.getObject(this.activeCanvasName);
        setOpacity(activeCanvas, this.currentOpacity);
        activeCanvas.style.zIndex++;
        activeCanvas.style.visibility = "visible";
        
        // fade in active canvas
        var _this = this;
        this.fadeInterval = setInterval(function() {_this.fadeIn(activeCanvas)}, 50);
        
        // switch active canvas
        this.activeCanvasName = (this.activeCanvasName == this.primaryCanvasName)? this.secondaryCanvasName : this.primaryCanvasName;
    } else {
        eval('document.images.' + this.imageCanvas + '.src=this.rolloverImages[this.activeImageIndex][0]');
    }
    
    // switch active image
    this.activeImageIndex = (this.activeImageIndex < this.rolloverImages.length-1) ? this.activeImageIndex + 1 : 0;
}

function fadeIn(canvas) {
    if (this.currentOpacity < 100) {
        // increase opacity when fade-in is in progress
        this.currentOpacity += 10;
        if (!this.isEnableFade) {
            this.setOpacity(canvas, 100);
        } else {
            this.setOpacity(canvas, this.currentOpacity);
        }
    } else {
        // stop fade-in timer after fade completed
        clearInterval(this.fadeInterval);
        
        // Pre-load next image into next canvas
        var nextCanvasName = (this.activeCanvasName == this.primaryCanvasName) ? this.primaryCanvasName : this.secondaryCanvasName;
        var nextCanvas = this.getObject(nextCanvasName);
        this.renderImage(nextCanvas, this.rolloverImages[this.nextImageIndex]);
        this.nextImageIndex = (this.nextImageIndex < this.rolloverImages.length-1) ? this.nextImageIndex + 1 : 0;
        nextCanvas.style.visibility = "hidden";
        
        // kick off the image roation timer
        var _this = this;
        setTimeout(function() {_this.rotateImage()}, this.pauseDuration);
    }
}

function renderImage(canvas, image) {
    if (image[2] == 'javascript_popup') {
        var canvasContent = image[1] != "" ? '<a href="#" onclick="' + image[1] + '">' : ""
            canvasContent += '<img src="' + image[0] + '" border="0">';
            canvasContent = image[1] != "" ? canvasContent+'</a>' : canvasContent;
            canvas.innerHTML = canvasContent;
    } else {
        var canvasContent = image[1] != "" ? '<a href="' + image[1] + '" target="' + image[2] + '">' : ""
        canvasContent += '<img src="' + image[0] + '" border="0">';
        canvasContent = image[1] != "" ? canvasContent+'</a>' : canvasContent;
        canvas.innerHTML = canvasContent;
    }
}

function getObject(objName) {
    if (this.ie4) {
        return eval("document.all." + objName);
    } else {
        return document.getElementById(objName);
    }
}

function setOpacity(object, opacity) {
    if (object.filters) {
        object.filters.alpha.opacity = opacity;
    } else if (object.style.MozOpacity) {
        object.style.MozOpacity = opacity / 101;
    }
}