/**
 * Javascript image/tekstfader.
 * Wisselt plaatjes af, laat hierbij tekst verdwijnen en verschijnen die bij het plaatje horen.
 *
 * Gebruik:
 * 
 * <div id="image"></div>
 * <div id="tekst"></div>
 * <a id="link" href="">Lees meer</a>
 *
 * <script type="text/javascript">
 *   fader = new ImageFader();
 *   fader.add("/path/to/image1", "tekst image 1", "url image 1");
 *   fader.add("/path/to/image2", "tekst image 2", "url image 2");
 *   fader.add(...
 *   fader.show("image", "tekst", "link");
 *   fader.startFader(10000, 5);
 * </script>
 */
function ImageFader() {
  // Interne variabelen
  this.items = new Array()
  this.counter = 1;
  this.txt = '';
  this.href = '';
  this.isIE = ((navigator.appVersion.indexOf("MSIE") != -1) && (navigator.userAgent.indexOf("Opera") == -1))
    
  // Voeg plaatje met tekst toe aan items
  this.add = function(img, tekst, link) {
    this.items.push(new Array(img, tekst, link));
  }
  
  // Toon imagefader in de containers "img" en "tekst"
  this.show = function(img, tekst, link) {
    var elImg = document.getElementById(img);
    this.tekst = document.getElementById(tekst);
    this.link = document.getElementById(link);
    if (elImg && this.items.length > 0) {
      // container met position relative maken
      var elDiv = document.createElement("DIV");
      elDiv.style.position = "relative";
      elDiv.style.width = "100%";
      elDiv.style.height = "100%";
      
      if (this.items.length > 1) {
        // Zet 2e plaatje klaar voor fader
        this.image1 = document.createElement("DIV");
        this.image1.style.position = "absolute";
        this.image1.style.zIndex = 1;
        this.image1.style.top = "0px";
        this.image1.style.left = "0px";
        this.image1.style.width = "100%";
        this.image1.style.height = "100%";
        this.image1.style.backgroundColor = elImg.style.backgroundColor;
        this.image1.style.backgroundRepeat = "no-repeat";
        this.image1.style.backgroundPosition = "center center";
        this.image1.style.opacity = 1.00;
        if (this.items[1] && this.items[1][0]) {
          this.image1.style.backgroundImage = "url(" + this.items[1][0] + ")";
        }
      }
      // Zet getoonde plaatje klaar
      this.image2 = document.createElement("DIV");
      this.image2.style.position = "absolute";
      this.image2.style.top = "0px";
      this.image2.style.left = "0px";
      this.image2.style.width = "100%";
      this.image2.style.height = "100%";
      this.image2.style.backgroundColor = elImg.style.backgroundColor;
      this.image2.style.backgroundRepeat = "no-repeat";
      this.image2.style.backgroundPosition = "center center";
      this.image2.style.zIndex = 2;
      this.image2.style.opacity = 1.00;

      // Zet tekst op actieve plaatje
      if (this.items[0] && this.items[0][0]) {
        this.image2.style.backgroundImage = "url(" + this.items[0][0] + ")";
        if (this.tekst) {
          this.tekst.innerHTML = this.items[0][1];
          if (this.link) {
            this.link.href = this.items[0][2];
          }
          this.txt = this.items[0][1];
          this.href = this.items[0][1];
        }
      }
      
      // voeg plaatjes en container toe aan DOM
      if (this.image1) {
        elDiv.appendChild(this.image1);
      }
      if (this.image2) {
        elDiv.appendChild(this.image2);
      }
      elImg.appendChild(elDiv);
    }
  }
  
  // begin met vervagen van plaatje, intern aangeroepen
  this.setFade = function() {
    var instance = this;
    if (!this.interval) {
      this.interval = window.setInterval(function(){instance.fade()}, 120);
    }
  }
  
  // Hier draait alles om
  this.fade = function() {
    // Begin van image fade
    if (this.image2.style.opacity == 1) {
      if (this.tekst) {
        this.tekst.innerHTML = '';
        if (this.link) {
          this.link.href = "javascript:void(null)";
        }
        this.txt = this.items[this.counter][1];
        this.href = this.items[this.counter][2];
      }
      this.counter++;
    }
    
    // Vervaag bovenste plaatje zodat onderste meer zichtbaar wordt
    this.image2.style.opacity -= this.step/100;
    if (this.isIE) {
      this.image2.style.filter = "alpha(opacity=" + this.image2.style.opacity * 100 + ")";
    }
    
    // Bovenste plaatje is 100% transparant (IE kan niet rekenen, negatieve opacity is het gevolg)
    if (this.image2.style.opacity <= 0) {
      // Verwijder timer, fade is klaar
      window.clearInterval(this.interval);
      this.interval = null;
    
      // Verwissel z-index, maak onderste plaatje weer 100% zichtbaar
      this.image1.style.zIndex = 2;
      this.image2.style.zIndex = 1;
      this.image2.style.opacity = 1;
      if (this.isIE) {
        this.image2.style.filter = "alpha(opacity=100)";
      }
      
      // Counter wrap
      if (!this.items[this.counter]) {
        this.counter = 0;
      }
      
      // Initialiseer volgende plaatje
      this.image2.style.backgroundImage = "url(" + this.items[this.counter][0] + ")";
      if (this.tekst) {
        this.tekst.innerHTML = this.txt;
        if (this.link) {
          this.link.href = this.href;
        }
      }
      
      // Wissel variabelen voor plaatjes om
      var tmp = this.image1;
      this.image1 = this.image2;
      this.image2 = tmp;
    }
  }
  
  // Start de fader
  this.startFader = function(interval, step) {
    if (this.image1 && this.image2) {
      this.step = step;
      var instance = this;
      window.setInterval(function() {instance.setFade()}, interval);
    }
  }
}