/**
 * @requires mootools-core-1.3.2
 * @requires mootools-more-1.3.2
 * @author Andy Pillip <p@pvse.com>
 */

Elements.implement({
  equalizeTotalHeight: function() {
    var maxTotalHeight = 0,
      length = this.length,
      i = this.length;
    
    // reset height before
    this.resetTotalHeight();
    
    while (i--) {
      var totalHeight = this[i].getComputedSize()['totalHeight'];
      maxTotalHeight = Math.max(totalHeight, maxTotalHeight);
    }
    
    i = length;
    while (i--){
      var additionalHeight = this[i].getComputedSize()['totalHeight']
                            -this[i].getComputedSize()['height'];
      
      this[i].setStyle('height',
                       (maxTotalHeight - additionalHeight) + 'px'); 
    }
    
    return this;
  },

  resetTotalHeight: function() {
    this.setStyle('height', '100%'); /* auto funktioniert nicht */
  }
});

/**
 * Setzt die Höhe für die drei Boxen auf der Startseite gleich,
 * sofern die richtige Bildschirmgröße dafür erreicht ist
 * @return void
 */
function sameHeightForFloatingBoxes() {
  var els = $$('.box.studenten, .box.presse, .box.notdienst');
  
  // nur durch den mediaquery werden die Boxen nebeneinander dargestellt
  if(document.documentElement.clientWidth > 860)
    els.equalizeTotalHeight();
  else
    els.resetTotalHeight();
}

/**
 * Starts switching between images in a contao gallery
 * 
 * The images are just faded to transparent to show the image below.
 * CSS needs to position the images in the same place.
 * 
 * @param element the ce_gallery element
 * @param duration in s between image fades
 */
fadeGallery = function(element, duration) {
  this.images = element.getElements('img');
  this.duration = duration;
  
  this.init();
};

/**
 * Setzt die Bilder in ihrer Reihenfolge untereinander
 * und legt die Animationsdauer fest
 * @return void
 */
fadeGallery.prototype.init = function() { 
  this.images.each(function(elem, index) {
    elem.setStyle('z-index', '-' + index);
    elem.set('tween', {duration: 'long'});
  });

  this.topImage = this.images[0];
  
  this.next.periodical(this.duration, this);
};

/**
 * Verschiebt die Bilder in z um 1 und setzt
 * das bisher oberste Bild nach hinten
 * @post this.topImage.getStyle('z-index') == 0
 * @return void
 */
fadeGallery.prototype.rotateImages = function() {
  this.images.each(function(elem, index) {
    var z = parseInt(elem.getStyle('z-index'));
    
    z++;
    
    if(z == 0) {
      this.topImage = elem;
    }
    
    // das gerade ausblendende Bild bleibt oben
    if(z > 1) {
      z = 2 - this.images.length;
    }
    
    elem.setStyle('z-index', z);
  }, this);
};

/**
 * Zeigt das nächste Bild
 * @return void
 */
fadeGallery.prototype.next = function() {  
  this.topImage.fade('out');
  this.rotateImages();
  this.topImage.fade('show');
};

window.addEvent('resize', sameHeightForFloatingBoxes);

window.addEvent('load', function() {
  sameHeightForFloatingBoxes();
  
  if($('welcome')) {
    new fadeGallery($('welcome').getElement('.ce_gallery'), 3000);
  }
});