var FM_TeaserControl = new Class({
	
	init: function(itemContainer){
		
		this.itemContainer = itemContainer;
		this.fadeinfx = null;
		this.fadeoutfx = null;
		this.options = {
			zIndex 		: 200,
			duration 	: 2500,
			interval 	: 6000
		};
		this.teaserItems = this.getTeaserItems();
		this.navItems = this.createNavigator();

		for(i = 0; i < this.teaserItems.length; i++) {
			if(this.teaserItems[i].getProperty('teaser:preSelected') == 'selected') {
				this.showItemNumber(i);
				break;
			}
		}
		/*
		if(this.teaserItems.length > 1) {
			this.teaserItems.each(function(el, index) {
				if(el.getProperty('teaser:preSelected') == 'selected') {
					this.showItemNumber(index);
					return true;
				}
				return false;
			}.bind(this));
		}*/
		
		if(this.teaserItems.length> 1 && $('teaser_autostart').value == '1') {
			this.timer = this.showNextItem.bind(this).periodical(this.options.interval);
		}
	},
	
	getTeaserItems : function(){
		
		var tempItems = [];
		var i = 0;
		$A($(this.itemContainer).getElements('div')).each(function(el,index){
			if(el.hasClass('teaser_item')){
				//el.setStyle('z-index',this.options.zIndex+(i++));
				tempItems.push(el);
				
				if(el.getStyle('visibility') != 'hidden'){
					this.currentItem = index;
				}
			}			
		}, this);
		
		return tempItems;
		
	},
	
	createNavigator : function(){
		if($(this.itemContainer).getElement('div.navigator_item_control') && this.teaserItems.length > 1){
			
			var tempItems = [];
			$(this.itemContainer).getElement('div.navigator').setStyle('visibility','visible');
			$(this.itemContainer).getElement('div.navigator_item_control').empty();
			
			this.teaserItems.each(function(item, index){
							
				var nav_item =  new Element('div',{
					'class' : 'navigator_item navigator_item_index_'+index,
					'html' 	:	'<!-- -->',
					'events': {
						'click': this.clickShowItem.bindWithEvent(this, index)
					}
				});
					
				//First Element is active
				if(this.currentItem == index){
					nav_item.addClass('navigator_item_active navigator_item_active_index_'+index);
				} else {
					nav_item.addClass('navigator_item_inactive navigator_item_inactive_index_'+index);
				}
					
				nav_item.injectInside($(this.itemContainer).getElement('div.navigator_item_control'));
				tempItems.push(nav_item);
			},this);
			
			new Element('div',{
				'class' : 'cleardiv',
				'html' 	:	'<!-- -->'
			}).injectInside($(this.itemContainer).getElement('div.navigator_item_control'));
			
			return tempItems;
		}
		
		return null;
	},
	
	showNextItem : function(){	
		this.showItemNumber((this.currentItem+1) % this.teaserItems.length);
	},
	
	showPrevItem : function(){		
		this.showItemNumber((this.currentItem-1 + this.teaserItems.length) % this.teaserItems.length);
	},
	
	clickShowItem : function(event, nextItem){
		this.stopEffect();
		
		$clear(this.timer);
		this.timer = null;
		
		this.showItemNumber(nextItem);
		
		if ($('teaser_autostart').value == '1') {
			this.timer = this.showNextItem.bind(this).periodical(this.options.interval);
		}
	},
	
	showItemNumber : function (nextItem) {		
		this.stopEffect();
		
		var e1 = this.teaserItems[this.currentItem];
		var e2 = this.teaserItems[nextItem];
		var to1 = 0;
		var to2 = 1;
		
		this.fadeoutfx = new Fx.Tween(e1, {duration: this.options.duration, property: 'opacity', wait: true, fps:16 ,transition: Fx.Transitions.linear});
		this.fadeinfx = new Fx.Tween(e2, {duration: this.options.duration, property: 'opacity', wait: true, fps:16 ,transition: Fx.Transitions.linear});	    

		if (this.currentItem == 0) {
			e1.setStyle("z-index",200);
		}

		e2.setStyle("z-index",(e1.getStyle("z-index")-1));
		e2.setStyle('visibility','visible');
		e1.setStyle("opacity",to2);
		e2.setStyle("opacity",to1);
        
		this.fadeoutfx.start(to1);
		this.fadeinfx.start(to2);
		this.setNavigatorItem(this.currentItem, nextItem);

		if(this.teaserItems[this.currentItem].get('teaser:bodyClass') != "") {
			document.getElement('body').removeClass(this.teaserItems[this.currentItem].get('teaser:bodyClass'));
		}

		if(this.teaserItems[nextItem].get('teaser:bodyClass')) {
			document.getElement('body').addClass(this.teaserItems[nextItem].get('teaser:bodyClass'));
		}


		this.currentItem = nextItem;
	},
	
	stopEffect : function(){
		if(this.fadeoutfx){
			this.fadeoutfx.cancel();
		}
		
		if(this.fadeinfx){
			this.fadeinfx.cancel();
		}
	},
	
	setNavigatorItem : function(currentItem, nextItem){
		if(this.navItems){			
			this.navItems[currentItem].removeClass('navigator_item_active');
			this.navItems[currentItem].removeClass('navigator_item_active_index_'+currentItem);
			this.navItems[currentItem].addClass('navigator_item_inactive');
			this.navItems[currentItem].addClass('navigator_item_inactive_index_'+currentItem);
			
			this.navItems[nextItem].removeClass('navigator_item_inactive');
			this.navItems[nextItem].removeClass('navigator_item_inactive_index_'+nextItem);
			this.navItems[nextItem].addClass('navigator_item_active');
			this.navItems[nextItem].addClass('navigator_item_active_index_'+nextItem);
		}
	}
});

window.addEvent('domready', function()    {
	var header = $$('div.teaser_karussell');
	header.each( function(el) {
		el.fm_teaserControl = new FM_TeaserControl()
		el.fm_teaserControl.init(el);
	});
});