// header_fade.js

// configuration //////////////////////////////////////////////////////////////

var imgs_left = new Array("glyph-heart-red-with-legend_left.jpg",
                          "header_city_left.jpg",
//                          "3dsp_panorama_left.jpg",
			  "header_anaglyphglasses_left.jpg",
			  "header_shutterglasses_left.jpg",
			  "header_trackcam_left.jpg",
                          "header_mi_links.jpg",
                          "header-background-left.jpg",
                          "header_links_bibliothek.jpg");

var imgs_right = new Array("glyph-heart-red-with-legend_right.jpg",
                           "header_city_right.jpg",
//                           "3dsp_panorama_right.jpg",
			   "header_anaglyphglasses_right.jpg",
			   "header_shutterglasses_right.jpg",
			   "header_trackcam_right.jpg",
                           "header_mi_rechts.jpg",
                           "header-background-right.jpg",
                           "header_rechts_bibliothek.jpg");

var fade_step = 0.03; // opacity change in each step
var fade_timer = 50;  // msec between steps
var waitBeforeFirstChange = 3 * 1000; // default, will be overwritten by fade_Config!
var waitBetweenImages = 5 * 1000;     // default, will be overwritten by fade_Config!
var maxCycles = 5;                    // stop after this many complete cycles of all images
                                      // (energy saving!)

// end of configuration ///////////////////////////////////////////////////////

var base_left, base_right, fade_left, fade_right;

var fade = 0.0;
var pause = false;
var changeInterval = null;
var pos = 0;
var first = true;
var cycle = 1;

function switchImage(obj, img) {
    obj.style.backgroundImage = 'url(http://viscg.uni-muenster.de/files/' + img + ')';
}

function setOpacity(obj, op) {

    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = op;

    // Older Mozilla and Firefox
    obj.style.MozOpacity = op;

    // IE
    obj.style.filter = "alpha(opacity=" + (op*100) + ")";

    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = op;
    
    obj.style.display = (op == 0.0 ? "none" : "block"); 
}

function fade_init() {	
    if (!document.getElementById || !document.createElement) return;	
    base_left = document.getElementById("a");
    base_right = document.getElementById("b");
    fade_left = document.getElementById("a-fade");
    fade_right = document.getElementById("b-fade");
   
    setOpacity(fade_right, 0.0);
    setOpacity(fade_left, 0.0);
    switchImage(fade_left, imgs_left[1]);
    switchImage(fade_right, imgs_right[1]);

    autoChange();
}

function do_fade() {		

    fade += fade_step;

    if (fade >= 1.0) {
        fade = 1.0;
    }

    setOpacity(fade_right, fade);
    setOpacity(fade_left, fade);

    if (fade >= 1.0) {       
        pos = (pos + 1) % imgs_left.length;
        var p_next = (pos + 1) % imgs_left.length;

        switchImage(base_left, imgs_left[pos]);
        switchImage(base_right, imgs_right[pos]);       

        fade = 0;
        setOpacity(fade_right, fade);
        setOpacity(fade_left, fade);
        switchImage(fade_left, imgs_left[p_next]);
        switchImage(fade_right, imgs_right[p_next]);

        if (pos == 0) {
            if (cycle >= maxCycles) {
                cycle = 1;
                fade_stop;
            } else {
                cycle++;
                autoChange();
            }            
        }
        else {
            autoChange();
        }
    }
    else {
        setTimeout("do_fade()", fade_timer);	
    }
}

function fade_start(){	
    pause = false;	
    fade = 0.0;
    do_fade();
}

function fade_stop(){
    pause = true;
    clearTimeout(changeInterval);
}

function fade_toggle(){
    if (pause) {
        fade_start();
    } else {
        fade_stop();
        fade = 1.0;
    }
}

function autoChange(){
    if (!pause) {
        clearInterval(changeInterval);
        changeInterval = setTimeout("do_fade()", first ? waitBeforeFirstChange : waitBetweenImages);
        first = false;
    }
}

function fade_Config(waitFirst, waitBetween) {
    waitBeforeFirstChange = waitFirst;
    waitBetweenImages = waitBetween;
    
    if (window.addEventListener)
        window.addEventListener("load", fade_init, false);
    else
        window.attachEvent("onload", fade_init);
}