Element.addMethods( {
        bringToFront : function(p_eElement) {
            p_eElement.setStyle({zIndex:'2'});
            return p_eElement;
        },
            sendToBack : function(p_eElement) {
            p_eElement.setStyle({zIndex:'1'});
            return p_eElement;
        },
            getHeight : function (p_eElement) {
            return p_eElement.offsetHeight;	
        },
            getWidth : function (p_eElement) {
            return p_eElement.offsetWidth;	
        },		
            getCenterHeight : function(p_eElement) {	
            return (p_eElement.offsetHeight/2);
        },
            getCenterWidth : function(p_eElement) {
            return (p_eElement.offsetWidth/2);
        },
            isLoaded : function (p_eElement) {
            return (p_eElement.complete);
        }
    }
);


function SlideShow(holder, slides, delay) {
    this.container = $(holder);
    this.container.setStyle( { position: 'relative', overflow:'hidden'} );
    this.currentImage = this.container.getElementsByTagName('img')[0];
    this.slidelist = slides;
    this.index = -1;
    this.slideInterval = delay;
}

SlideShow.prototype.start = function() {
    var slideshow = this;
    this.timeoutId = setTimeout("slideshow.loadNextImage();", this.slideInterval);
}

SlideShow.prototype.loadNextImage = function() {
    this.index = this.index + 1;
    if (this.index >= this.slidelist.length) {
        this.index = 0;
    }

    var imageUrl = this.slidelist[this.index]['image_url'];
    var objectUrl = this.slidelist[this.index]['url'];
    var imageWidth = this.slidelist[this.index]['width'];
    var imageHeight = this.slidelist[this.index]['height'];
    this.nextImage = document.createElement('img');
    this.nextImage.setAttribute('src', imageUrl);

    $(this.nextImage).setStyle( { position: 'absolute', left: '0px', top: '0px', opacity: '0'} );
    this.container.appendChild(this.nextImage);

    if (objectUrl && (objectUrl != "")) {
        Event.observe(this.nextImage, 'click',
                      this.onClick.bindAsEventListener(this, objectUrl));
    }

    if (!this.nextImage.isLoaded()) {
        Event.observe(this.nextImage, 'load',
                      this.onLoad.bindAsEventListener(this));
    } else {
        this.displayNextImage();
    }
}

SlideShow.prototype.onClick = function(event, dest) {
    location.href = dest;
}

SlideShow.prototype.onLoad = function(event) {
    this.displayNextImage();
}

SlideShow.prototype.displayNextImage = function() {
    $(this.currentImage).setStyle({display:'block', opacity:'1'}).bringToFront();
    $(this.nextImage).setStyle({left:'-'+this.nextImage.getWidth()+'px', display:'block', opacity:'1'});
    $(this.nextImage).morph('left:0px', {duration:1});				
    $(this.currentImage).morph('left:'+this.nextImage.getWidth()+'px', 
        {duration:1, afterFinish : this.afterDisplay.bindAsEventListener(this)});
}

SlideShow.prototype.afterDisplay = function() {
    this.container.removeChild(this.currentImage);
    this.currentImage = this.nextImage;
    this.nextImage = null;
    this.start();
}