var DivFader = new Class({

  Implements: [Events, Options],

	Binds: ['onFadeComplete', 'onStart', 'onChange'],

	options:
	{
	  onStart: function(i)
 	  {
	    var elements = this.navi2.getChildren();
 	    i = (i - (elements.length - 1)) * -1;
 	    elements[i].removeClass('number_selected');
 	    elements[i].addClass('number');

 	    var slider = new Fx.Morph(this.titel, {duration: 'short'});
 	    slider.start({'height': [28, 0]});
 	    var slider2 = new Fx.Morph(this.navi.getElement('.bar'), {duration: 'short'});
 	    slider2.start({'height': [28, 0]});
 	  },
 	  onChange: function(i)
 	  {
 	    var elements = this.navi2.getChildren();
 	    var i_b = i;
 	    i = (i - (elements.length - 1)) * -1;
 	    elements[i].removeClass('number');
 	    elements[i].addClass('number_selected');

 	    this.titel.set('text', this.elements[i_b].get('title'));
 	    var slider = new Fx.Morph(this.titel, {duration: 'short'});
 	    slider.start({'height': [0, 28]});
 	    var slider2 = new Fx.Morph(this.navi.getElement('.bar'), {duration: 'short'});
 	    slider2.start({'height': [0, 28]});
 	  },
  	contentSelector: '.teaser',
  	fadeDuration: 1000,
  	delay: 4000,
  	direction: 'next',
  	cycle: true
	},

	initialize: function(element, options)
	{
	  // Set Options
  	this.setOptions(options);

  	// Init Timer Var with null
  	this.timer = null;

  	// Event Counter (Damit Events abgelaufen sind)
  	this.eventCounter = 0;

  	// Wrapper Element
  	this.wrapper = document.id(element);

  	// Fading Elemente
  	this.effects = [];
  	this.elements = this.wrapper.getElements(this.options.contentSelector);

  	for(var i = 0; i < this.elements.length; i++)
  	{
  	  this.elements[i].setStyle('opacity', i == 0 ? 1 : 0);
  	  this.elements[i].getElements('.titel').set('display', 'none');
  	  this.effects[i] = new Fx.Tween(
  	    this.elements[i],
          {
            property: 'opacity',
            duration: this.options.fadeDuration,
            link: 'chain',
            onComplete: this.onFadeComplete
          }
  	   );
  	}

  	this.activeElement = 0;

  	if(this.options.cycle)
  	{
  	  this.timer = this[this.options.direction].delay(this.options.delay, this);
  	}

  	this.navi = this.wrapper.getElement('.header');
  	this.navi2 = this.navi.getElement('.navi');
  	this.titel = this.navi.getElement('.titel');
    var count = this.elements.length;

    for(var i = (count - 1); i >= 0; i--)
    {
      if(i == 0)
      {
        var className = 'number_selected';
      }
      else
      {
        var className = 'number';
      }
      var el = new Element('a').addClass(className).set('text', i + 1).set('href', 'javascript: void(0);');
      el.addEvent('click', function(e){
        this.goTo($(e.target).get('text') - 1);
      }.bind(this));

      this.navi.getElement('.navi').adopt(el);
    }

    this.titel.set('text', this.elements[this.activeElement].get('title'));
  },

  next: function()
  {
    if(this.activeElement + 1 < this.elements.length)
    {
      this.goTo(this.activeElement + 1);
    }
    else
    {
      this.goTo(0);
    }
  },

  previous: function()
  {
    if(this.activeElement - 1 >= 0)
    {
      this.goTo(this.activeElement - 1);
    }
    else
    {
      this.goTo(this.elements.length - 1);
    }
  },

  goTo: function(index)
  {
    if(index != this.activeElement)
    {
      if(this.eventCounter == 0)
      {
        this.fireEvent('start', this.activeElement);
        this.effects[index].start(0, 1);
        this.effects[this.activeElement].start(1, 0);
        this.activeElement = index;
        this.eventCounter = 2;
      }
    }
  },

  onFadeComplete: function(e)
  {
    this.eventCounter--;
    if(this.eventCounter == 0)
    {
      this.fireEvent('change', this.activeElement);
      if(this.options.cycle)
    	{
    	  $clear(this.timer);
    	  this.timer = this[this.options.direction].delay(this.options.delay, this);
    	}
    }
  }
});