﻿function Blender(id, speed, pause, caption, onepass, tagName) {
    this.currentIdx = 0;
    this.images = [];
    this.id = id;
    this.speed = speed;
    this.pause = pause;
    this.caption = caption;
    this.onepass = onepass;

    var blend = document.getElementById(id);

    this.images = blend.getElementsByTagName(tagName || 'img');

    var image = this.firstChildImage();

    this.startBlending(image, this.speed, this.pause, this.caption);
}
Blender.prototype = {
    nextImage: function() {
        this.currentIdx++;
        return this.current();
    },
    getNextImage: function(image) {
        var next = this.nextImage();

        if (next) {
            image.style.display = 'none';
            image.style.zIndex = 0;

            next.style.display = 'block';
            next.style.zIndex = 100;
        } else if (!this.onepass) {
            //if there is not a next image, get the first image again
            next = this.firstChildImage();
        }

        return next;
    },
    firstChildImage: function() {
        this.currentIdx = 0;
        return this.current();
    },
    current: function() {
        return this.images[this.currentIdx];
    },
    startBlending: function(image, speed, pause, caption) {

        image.style.display = 'block';

        if (caption != null) {
            document.getElementById(caption).innerHTML = image.alt;
        }

        this.continueFadeImage(image, 0, speed, pause, caption);
    },
    continueFadeImage: function(image, opacity, speed, pause, caption) {
        var self = this;

        opacity = opacity + 3;

        if (opacity < 103) {
            setTimeout(function() {
                self.fadeImage(image, opacity, speed, pause, caption);
            }, speed);

        } else {
            //if the image is done, set it to the background and make it transparent
            document.getElementById(this.id).style.backgroundImage = "url(" + image.src + ")";

            // ASC: pause 1sec here to prevent MSIE image flash ...
            var paws = pause - 1000;
            if (paws < 0) {
                paws = 0;
            }
            this.pausecomp(1000);

            this.setOpacity(image, 0);

            //get the next image and start blending it again
            image = this.getNextImage(image);

            setTimeout(function() {
                self.startBlending(image, speed, pause, caption);
            }, paws);
        }
    },
    setOpacity: function(obj, o) {
        obj.style.opacity = (o / 100);
        obj.style.MozOpacity = (o / 100);
        obj.style.KhtmlOpacity = (o / 100);
        obj.style.filter = 'alpha(opacity=' + o + ')';
    },
    pausecomp: function(millis) {
        var date = new Date();
        var curDate = null;

        do { curDate = new Date(); }
        while (curDate - date < millis);
    },
    fadeImage: function(image, opacity, speed, pause, caption) {
        this.setOpacity(image, opacity);
        this.continueFadeImage(image, opacity, speed, pause, caption);
    }
};

function blendImages(id, speed, pause, caption, onepass, tagName) {

    if (speed == null) {
        speed = 60;
    }

    if (pause == null) {
        pause = 6000;
    }

    new Blender(id, speed, pause, caption, onepass, tagName);
}