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].setProperty('src', '/images/home-top-teaser-bar-inaktiv.png');

      new Fx.Style(this.titel, 'height').start(28, 0);
      new Fx.Style($E('.bar', this.navi), 'height').start(28, 0);
 	  },
 	  onChange: function(i)
 	  {
 	    var elements = this.navi2.getChildren();
 	    var i_b = i;
 	    i = (i - (elements.length - 1)) * -1;
      elements[i].setProperty('src', '/images/home-top-teaser-bar-aktiv.png');

 	    this.titel.setText(this.elements[i_b].getProperty('title'));
      new Fx.Style(this.titel, 'height').start(0, 28);
 	    new Fx.Style($E('.bar', this.navi), 'height').start(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 = $(element);
  	
  	// Fading Elemente
  	this.effects = [];
    this.elements = $ES(this.options.contentSelector, this.wrapper);

  	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.Styles(
  	    this.elements[i],
          {
            duration: this.options.fadeDuration,
            onComplete: this.onFadeComplete.bind(this)
          }
  	   );
  	}
  	
  	this.activeElement = 0;

    this.start();

    this.navi = $E('.header', this.wrapper);
    this.navi2 = $E('.navi div', this.wrapper);
    this.titel = $E('.titel', this.navi);
    this.playstop = $E('.pause', this.navi);

    $E('.prev', this.navi).addEvent('click', this.previous.bind(this));
    $E('.pause', this.navi).addEvent('click', this.togglePlay.bind(this));
    $E('.next', this.navi).addEvent('click', this.next.bind(this));

    var count = this.elements.length;

    for(var i = (count - 1); i >= 0; i--)
    {
      var el = new Element('img');
      el.setStyle('cursor', 'pointer');
      el.setProperty('alt', i + 1);
      el.addEvent('click', function(e){
        this.goTo($(e.target).getProperty('alt') - 1);
      }.bind(this));

      if(i == 0)
      {
        el.setProperty('src', '/images/home-top-teaser-bar-aktiv.png');
      }
      else
      {
        el.setProperty('src', '/images/home-top-teaser-bar-inaktiv.png');
      }

      $E('.navi div', this.wrapper).adopt(el);
    }

    this.titel.setText(this.elements[this.activeElement].getProperty('title'));
  },

  togglePlay: function()
  {
    if(this.playstop.getProperty('title') == 'Pause')
    {
      this.stop();
      this.playstop.setProperty('title', 'Start');
      this.playstop.getFirst().setProperty('src', '/images/home-top-teaser-right.gif');
    }
    else
    {
      this.start();
      this.playstop.setProperty('title', 'Pause');
      this.playstop.getFirst().setProperty('src', '/images/home-top-teaser-center.gif');
    }
  },

  stop: function()
  {
    $clear(this.timer);
  },

  start: function()
  {
    if(this.options.cycle)
  	{
  	  this.timer = this[this.options.direction].delay(this.options.delay, this);
  	}
  },
  
  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)
      {
        if(typeof this.options.onStart == 'function')
        {
          this.options.onStart.bind(this)(this.activeElement);
        }
        this.effects[index].start({'opacity': [0, 1]});
        this.effects[this.activeElement].start({'opacity': [1, 0]});
        this.activeElement = index;
        this.eventCounter = 2;
      }
    }
  },
  
  onFadeComplete: function(e)
  {
    this.eventCounter--;
    if(this.eventCounter == 0)
    {
      if(typeof this.options.onStart == 'function')
      {
        this.options.onChange.bind(this)(this.activeElement);
      }
      if(this.options.cycle)
    	{
    	  $clear(this.timer);
    	  this.timer = this[this.options.direction].delay(this.options.delay, this);
    	}
    }
  }
});
DivFader.implement(new Options);

window.addEvent('domready', function()
{
  slider = new DivFader('top-teaser');
});