/* usage:
var fader1 = new fader(opacityOfElement);
// fade in or out, depends on current opacity of object (0 or 1)
fader1.fadeElementById('testObject');
// fade out
fader1.fadeOutElementById('testObject');
// fade in
fader1.fadeInElementById('testObject');

additional information:
- each html element that is meant to be faded needs an own fader object
- each element that is meant to be faded needs a css opacity style (do that in the php section)
javascript fehlerconsole:
- when opacity value reaches 0 an error is popping up

recent changes:
- elementById to class construction added
*/

function fader(opacityUpperLimit){
    // constants
    this.opacityUpperLimit = opacityUpperLimit;
    this.opacityLowerLimit = 0.00;
    // variablen
    this.opacityFadeOut = false;
    this.opacityFadeIn = false;
    this.interval_id_opacity;
    /*this.elementById = elementById;*/
    // index.php datei
    this.opacity = this.opacityUpperLimit;
    //this.opacity = this.opacityLowerLimit;
    this.opacityStatus = this.opacity;
    
    // functions
    // resets element values to presets
    this.initIsInElementById = function(elementById){
        //document.getElementById(elementById).style.zIndex=20;
        document.getElementById(elementById).style.visibility="visible";
        document.getElementById(elementById).style.opacity=this.opacityUpperLimit;
        this.opacity=this.opacityUpperLimit;
        this.opacityStatus=this.opacityUpperLimit;
    }
    this.initIsOutElementById = function(elementById){
        //document.getElementById(elementById).style.zIndex=10;
        document.getElementById(elementById).style.visibility="hidden";
        document.getElementById(elementById).style.opacity=this.opacityLowerLimit;
        this.opacity=this.opacityLowerLimit;
        this.opacityStatus=this.opacityLowerLimit;
    }
    
    // (usable) fade in or out, depends on current opacity of object (0 or 1)
    this.fadeElementById = function(elementById){
        var me = this; // create a closure
        this.elementById = elementById;
        this.opacityFadeIn = false;
        this.opacityFadeOut = false;
        window.clearInterval(this.interval_id_opacity);
        this.interval_id_opacity = window.setInterval(function () { me.switchFadeInOut(); }, 10); // 1000 milliseconds = 1 second
    }
    // (usable) fade in by id
    this.fadeInElementById = function(elementById){
        //document.getElementById(elementById).style.zIndex=20;
        document.getElementById(elementById).style.visibility="visible";
        var me = this; // create a closure
        this.elementById = elementById;
        this.opacityFadeIn = false;
        this.opacityFadeOut = false;
        window.clearInterval(this.interval_id_opacity);
        this.interval_id_opacity = window.setInterval(function () { me.fadeIn(); }, 10); // 1000 milliseconds = 1 second
        ////if(this.test<5){alert(this.elementById+"\nupper opacity: "+this.opacity+"\nactive opacity: "+document.getElementById(this.elementById).style.opacity);this.test=this.test+1;};
    }
    // (usable) fade out by id
    this.fadeOutElementById = function(elementById){
        //document.getElementById(elementById).style.zIndex=10;
        var me = this; // create a closure
        this.elementById = elementById;
        this.opacityFadeIn = false;
        this.opacityFadeOut = false;
        window.clearInterval(this.interval_id_opacity);
        this.interval_id_opacity = window.setInterval(function () { me.fadeOut(); }, 10); // 1000 milliseconds = 1 second
    }
    // check whether the element is visible or not [used by this.fadeElementById()]
    this.switchFadeInOut = function(){
        document.getElementById(this.elementById).style.opacity = this.opacity;
        switch(this.opacityStatus){
            case (this.opacityLowerLimit): this.fadeIn();
            break;
            case (this.opacityUpperLimit): this.fadeOut();
            break;
            //default: break;
        }
    }
    // fade in by id [used by this.fadeInElementById()]
    this.fadeIn = function(){
        document.getElementById(this.elementById).style.visibility = "visible";
        document.getElementById(this.elementById).style.opacity = this.opacity;
        if(this.opacity<this.opacityUpperLimit && this.opacityFadeOut==false){
            this.opacityFadeIn = true;
            this.opacity = this.opacity + 0.05;
        }
        else {
            if ( this.opacityFadeIn==true){
                window.clearInterval(this.interval_id_opacity);
                //new
                this.opacity = this.opacityUpperLimit;
                this.opacityStatus=this.opacity;
            }
        }
    }
    // fade out by id [used by this.fadeOutElementById()]
    this.fadeOut = function(){
        document.getElementById(this.elementById).style.opacity = this.opacity;
        if(this.opacity>this.opacityLowerLimit && this.opacityFadeIn==false){
            this.opacityFadeOut = true;
            this.opacity = this.opacity - 0.05;
        }
        else {
            if ( this.opacityFadeOut==true){
                window.clearInterval(this.interval_id_opacity);
                //new
                this.opacity = this.opacityLowerLimit;
                this.opacityStatus = 0;
                // ie still shows selector in background of slide show
                document.getElementById(this.elementById).style.opacity = this.opacity;
                document.getElementById(this.elementById).style.visibility = "hidden";
            }
        }
    }
    
    
}