/**
 * Shuffle images.
 *
 * @author Christian Hansen <christian@resource-it.dk>
 * @version 3.0
 * @copyright Resource it ApS
 *
**/
    

    /**
     * @uses class.function.js
     * @uses lib.resext.js
     **/
    function ImageShuffle(width, height, timeout, fade) {

        this.indicator = false;
        this.dopause = false;
        this.upperLoaded = this.lowerLoaded = false;
        this.timeout = timeout;
        this.fade = fade;
        this.imageIndex = 0;
    
        this.images = [];
        this.html = new Object;
        this.html.container = document.createElement("div");
        this.html.container.style.width = width + "px";
        this.html.container.style.height = height + "px";
        this.html.container.style.overflow = "hidden";
        this.html.container.style.position = "relative";
        
        this.html.lower = document.createElement("img");
        this.html.lower.style.position = "absolute";
	    this.html.lower.style.display = "none";
        this.html.lower.style.top = this.html.lower.style.left = "0px";
        this.html.lower.style.zIndex = 1;
	    this.html.lower.style.width = width + "px";
        this.html.lower.onload = function() { this.lowerLoaded = true; }.bind(this);
        this.html.container.appendChild(this.html.lower);
        
        this.html.upper = document.createElement("img");
        this.html.upper.style.position = "absolute";
	    this.html.upper.style.display = "none";
        this.html.upper.style.top = this.html.upper.style.left = "0px";
        this.html.upper.style.zIndex = 2;
	    this.html.upper.style.width = width + "px";
        this.html.upper.style.opacity = 1;
        this.html.upper.style.filter = "alpha(opacity=100)";
        this.html.upper.onload = function() { this.upperLoaded = true; }.bind(this);
        this.html.container.appendChild(this.html.upper);
    
    }//ImageShuffle

    ImageShuffle.prototype.addIndicator = function( indicator) {
        this.indicator = indicator;
    }//addIndicator 
    
    ImageShuffle.prototype.loadImages = function() {
        for ( var c = 1; c < arguments.length; c++ ) this.images[this.images.length] = arguments[0] + arguments[c];
        this.html.upper.src = this.images[this.imageIndex++];
        this.html.lower.src = this.images[this.imageIndex];
        //this.imageIndex--;
    }//loadImages
    
    ImageShuffle.prototype.appendTo = function(o) {
        o.appendChild(this.html.container);
    }//append
    
    ImageShuffle.prototype.shuffle = function() {
        if ( !this.dopause ) {
            if ( this.fadeIn() ) {
                if ( !this.dopause ) setTimeout(this.shuffle.bind(this),this.timeout);
            } else {
                if ( !this.dopause ) setTimeout(this.shuffle.bind(this),30);
            }//if /else
        }//if / else
    }//shuffle

    ImageShuffle.prototype.run = function() {
        this.dopause = false;
        setTimeout(this.shuffle.bind(this),this.timeout);
    }//run

    ImageShuffle.prototype.pause = function() {
        this.dopause = true;
    }//pause

    ImageShuffle.prototype.rewind = function () {
        this.pause();
        imageIndex = this.imageIndex - 2 < 0 ? this.images.length + ( this.imageIndex - 2 ) : this.imageIndex - 2; 
        this.setImage(imageIndex);
        if(!this.fadeIn()) setTimeout(function(){
            if ( !this.fadeIn() ) setTimeout(arguments.callee.bind(this),30);
        }.bind(this),30);
    }//rewind

    ImageShuffle.prototype.forward = function () {
        this.pause();
        if(!this.fadeIn()) setTimeout(function(){
            if ( !this.fadeIn() ) setTimeout(arguments.callee.bind(this),30);
        }.bind(this),30);
    }//forward

    ImageShuffle.prototype.goto = function(imageIndex) {
        this.pause();
        this.setImage(imageIndex);
        if(!this.fadeIn()) setTimeout(function(){
            if ( !this.fadeIn() ) setTimeout(arguments.callee.bind(this),30);
        }.bind(this),30);
    }//goto

    ImageShuffle.prototype.setImage = function(imageIndex) {
        if ( this.html.upper.style.opacity == 0 ) {
            this.imageIndex = imageIndex;
            this.upperLoaded = false;
            this.html.upper.src = this.images[imageIndex];
        } else if ( this.html.upper.style.opacity == 1 ) {
            this.lowerLoaded = false;
            this.html.lower.src = this.images[imageIndex];
            this.imageIndex = imageIndex;
        } else {
            setTimeout(function() { this.setImage(imageIndex); }.bind(this),30);
        }
    }//setImage

    ImageShuffle.prototype.fadeIn = function() {

        if ( this.html.upper.style.opacity == 0 && this.upperLoaded ) {

            this.html.upper.style.display = "block";
            this.html.lower.style.display = "block";
                    
            if ( this.indicator ) this.indicator.set(this.imageIndex);
    
            this.imageIndex = ++this.imageIndex >= this.images.length ? 0 : this.imageIndex; 
            setTimeout(function() {
                this.html.upper.style.opacity = parseFloat(this.html.upper.style.opacity) + ( this.fade / 100 );
                if ( parseFloat(this.html.upper.style.opacity) >= 1 ) {
                    this.html.upper.style.opacity = 1;
                    this.html.upper.style.filter = "alpha(opacity=" + Math.round(100 * this.html.upper.style.opacity) + ")";
                    this.lowerLoaded = false;
                    this.html.lower.src = this.images[this.imageIndex];
                } else {
                    this.html.upper.style.filter = "alpha(opacity=" + Math.round(100 * this.html.upper.style.opacity) + ")";
                    setTimeout(arguments.callee.bind(this),30);
                }
            }.bind(this),this.fade);
            return true;
        } else if ( this.html.upper.style.opacity == 1 && this.lowerLoaded ) {
    
            this.html.upper.style.display = "block";
            this.html.lower.style.display = "block";
                    
            if ( this.indicator ) this.indicator.set(this.imageIndex);

            this.imageIndex = ++this.imageIndex >= this.images.length ? 0 : this.imageIndex; 
            setTimeout(function() {
                this.html.upper.style.opacity = parseFloat(this.html.upper.style.opacity) - ( this.fade / 100 );
                if ( parseFloat(this.html.upper.style.opacity) <= 0 ) {
                    this.html.upper.style.opacity = 0;
                    this.html.upper.style.filter = "alpha(opacity=" + Math.round(100 * this.html.upper.style.opacity) + ")";
                    this.upperLoaded = false;
                    this.html.upper.src = this.images[this.imageIndex];
                } else {
                    this.html.upper.style.filter = "alpha(opacity=" + Math.round(100 * this.html.upper.style.opacity) + ")";
                    setTimeout(arguments.callee.bind(this),30);
                }
            }.bind(this),this.fade);
            return true;
        }//elseif

        return false;

    }//fadeIn