/**
 * 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.comparearr = new Array();
    
  // Voeg plaatje met tekst toe aan items
  this.add = function(img, tekst, link) {
    this.items.push(new Array(img, tekst, link));
  }
  
  this.setcounter = function()
  {
    var same = false;
    //document.getElementById("kolom1").innerHTML = "<br>";
    this.counter += 1;
    if(!this.items[this.counter])
    {
      this.counter = 0
    }
    return this.counter;
  }
  // Skippen naar bepaald plaatje
  this.skipto = function(x) {
    this.counter = x;
  }
  this.compare = function(array)
  {
    this.comparearr = array;
    //alert(this.comparearr.length);
  }
  
  // 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%";
      this.setcounter();
      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[this.counter][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;
      this.setcounter();
      // Zet tekst op actieve plaatje
      if (this.items[0] && this.items[0][0]) {
        this.image2.style.backgroundImage = "url(" + this.items[this.counter][0] + ")";
        if (this.tekst) {
          this.tekst.innerHTML = this.items[this.counter][1];
          
          this.txt = this.items[this.counter][1];
          
        }
        if (this.link) {
          this.link.href = this.items[this.counter][2];
        }
        this.href = this.items[this.counter][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.setcounter();
      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 = '';
        
        this.txt = this.items[this.counter][1];
        
      }
      if (this.link) {
       this.link.href = "javascript:void(null)";
      }
      this.href = this.items[this.counter][2];
      this.setcounter();
    }
    
    // Vervaag bovenste plaatje zodat onderste meer zichtbaar wordt
    this.image2.style.opacity -= this.step/100;
    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;
      this.image2.style.filter = "alpha(opacity=100)";
      
      // 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,extra) {
    if (this.image1 && this.image2) {
      this.step = step;
      var instance = this;
      window.setInterval(function() {instance.setFade()}, interval);
    }
  }
}