/**
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="/javascripts/ia_slideshow.js" type="text/javascript"></script>

<div style="width: 400px; height: 268px; position: relative; padding: 0; margin: 0;">
    <img src="../bilder/teller/kd_01.jpg" id="slideshowImage0" style="position: absolute; top: 0; left: 0;" />
    <img src="../bilder/teller/kd_01.jpg" id="slideshowImage1" style="position: absolute; top: 0; left: 0; display:none" />
</div>
<script type="text/javascript">
var slideshowImages = [];
for (var i = 0; i<5; i++) {
    slideshowImages[i] = '../bilder/teller/kd_0'+(i+1)+'.jpg';
}

var sls = new IASlideshow(slideshowImages, {transitionTime: 8});
</script>
*/

var IASlideshow = Class.create();
IASlideshow.prototype = {
    initialize: function(images) {
        this.options = Object.extend({
            imageId0: 'slideshowImage0',
            imageId1: 'slideshowImage1',
            transitionTime: 7,
            ontransition: function(i) {console.log(i)}
        }, arguments[1] || {});

        this.slideshowImages = $A(images).collect(function (i) {
            var image = new Image;
            image.src = i;
            return image;
        });
        
        //console.log(this.slideshowImages);
        
        this.currentImage = 1;
        this.currentSlideshowImage = 0;
        
        this.pe = new PeriodicalExecuter(this.nextImageInSlideshow.bind(this), this.options.transitionTime);
    },


    nextImageInSlideshow: function() {
        if(this.currentImage >= this.slideshowImages.length) {
            this.currentImage = 0;
        }
        
        this.currentSlideshowImage = (this.currentSlideshowImage == 0 ? 1 : 0);
        
        var image = this.slideshowImages[this.currentImage];

        this.options.ontransition(this.currentImage, image);
        
        if (Prototype.Browser.IE) {
            $(this.options.imageId0).src = image.src;
            this.currentImage += 1;
            return;
        }
        
        if (this.currentSlideshowImage == 1) {
            $(this.options.imageId1).src = image.src;
            Effect.Appear(this.options.imageId1);
            Effect.Fade(this.options.imageId0);
        }
        else {
            $(this.options.imageId0).src = image.src;
            Effect.Appear(this.options.imageId0);
            Effect.Fade(this.options.imageId1);
        }
        this.currentImage += 1;
        //console.log(currentImage);
        //console.log(image.src);
        //console.log(currentSlideshowImage);
    }
}