var Teasertabs = Class.create({

elemente:  null,

timer: null,

fadeInOut: 500,

viewTime: 5000,

inactiveTime: 10000,

doFade: true,

queue: [],

isFading: false,

initialize: function() {

		this.activeIndex = 0;

		this.myteasertab = $('teasertab');

		this.elemente = this.myteasertab.select('.element');

		this.elemente.invoke('hide');

		this.maxElemente = this.elemente.length;

		this.activeElement = this.elemente[this.activeIndex].show();

		this.timelines = [];

		this.tabs = this.myteasertab.select('li');

		var s = this;

		this.tabs.each(function(e, i){

			e.onclick = function(){

				s.showElementNr(i);

				return false;

			};

			var timeline = Builder.node('div', {'class': 'timeline'});

			var timelineBox = Builder.node('div', {'class': 'timelineBox'}, [timeline]);

			s.timelines.push(timeline);

			e.appendChild(timelineBox);

		});

		this.activeTimeline = this.timelines[this.activeIndex];

		this.activeTimelineMorph = null;

		this.maxTabs = this.tabs.length;

		this.queue = [];

		return this;

	},

	__showNextElement: function() {

		this.nextIndex = this.activeIndex + 1;

		if(this.nextIndex >= this.maxElemente) this.nextIndex = 0;

		this.nextElement = this.elemente[this.nextIndex];

		this.__fadeFromActive2Next();

	},

	__fadeFromActive2Next: function(){

		var self = this;

		if(this.activeElement == this.nextElement)

		{

			return this.__afterFinishFadeFromActive2Next();

		}

		this.activeElement.setStyle({zIndex: 3, opacity: 1}).show();

		this.nextElement.setStyle({zIndex: 2, opacity: 1}).show();



		new Effect.Parallel([

			new Effect.Opacity(self.nextElement, { sync: true, from: 0, to: 1 }), 

			new Effect.Opacity(self.activeElement, { sync: true, from: 1, to: 0 })], { 

				duration: self.fadeInOut/1000,

				beforeStart: function(){self.__beforeStartFadeFromActive2Next()},

				afterFinish: function(){self.__afterFinishFadeFromActive2Next()}

			}

		);

		delete(self);

	},

	__beforeStartFadeFromActive2Next: function(){

		this.isFading = true;

		this.__showActiveTab();

	},

	__afterFinishFadeFromActive2Next: function(){

		this.isFading = false;

                if(this.activeElement != this.nextElement){

                    this.activeElement.hide();

                }

		this.activeIndex = this.nextIndex;

		this.activeElement = this.nextElement;

		if(this.queue.length > 0)

		{

			var o = this.queue.shift();

			this.nextIndex = o.nextIndex;

			this.nextElement = o.nextElement;

			this.__fadeFromActive2Next();

		}

		else

		{

			this.timer = null;

			this.__next();

		}

	},

	__showActiveTab: function(){

		this.tabs[this.activeIndex].removeClassName('aktiv');

		this.tabs[this.nextIndex].addClassName('aktiv');

		this.activeTimeline = this.timelines[this.nextIndex];

		this.activeTimeline.setStyle({width: 0});

	},

	__next: function() {

		if(this.doFade && this.timer == null)

		{

			var self = this;

			this.timer = window.setTimeout(function(){self.__showNextElement();}, self.viewTime);

			/*this.activeTimelineMorph = new Effect.Morph(self.activeTimeline, {

			  style: 'width: 100%',

			  duration: self.viewTime/1000,

			  transition: Effect.Transitions.linear,

			  beforeStart: function(){self.tabs[self.activeIndex].addClassName('doWait');},

			  afterFinish: function(){self.tabs[self.activeIndex].removeClassName('doWait');}

			});
*/

			delete(self);

		}

	},

	__startInactiveTimer: function(){

		var self = this;

		this.__stopInactiveTimer();

		this.inactiveTimer = window.setTimeout(function(){self.start();}, self.inactiveTime);

		delete(self);

	},

	__stopInactiveTimer: function(){

		if(this.inactiveTimer){

			window.clearTimeout(this.inactiveTimer);

		}

	},

start:  function() {

		this.doFade = true;

		this.__next();

		return this;

	},

stop: function() {

		window.clearTimeout(this.timer);

		if(this.activeTimelineMorph != null){

			this.activeTimelineMorph.cancel();

			this.tabs[this.activeIndex].removeClassName('doWait');

		}

		this.activeTimelineMorph = null;

		this.timer = null;

		this.doFade = false;

		return this;

	},

showElementNr: function(number) {

		var o = {};

		o.nextIndex = number;

		if(o.nextIndex >= this.maxElemente || o.nextIndex < 0) o.nextIndex = 0;

		o.nextElement = this.elemente[o.nextIndex];

		this.__startInactiveTimer();

		if(!this.isFading){

			this.stop();

			this.nextIndex = o.nextIndex;

			this.nextElement = o.nextElement;

			this.__fadeFromActive2Next();

		}

		else

		{

			this.stop();

			this.queue.push(o);

		}

	}

});



var myT = null;

document.observe("dom:loaded", function(){myT = new Teasertabs().start();});