var Fader = new Class({
    Implements: Options,
    options: {
            pause: 8000,
            duration: 500,
            fastDuration: 50
    },
    
    initialize: function(container,options) {
            this.setOptions(options);
            this.container = container;
            this.moreIsVisible = false;
            var imgsContainer = this.container.getElement('div[class=lwAdvancedImageFadeImages]');
            this.textsContainer = this.container.getElement('div[class=lwAdvancedImageFadeTexts]');
            this.navContainer = this.container.getElement('div[class=lwAdvancedImageFadeNavigation]');
            fallbackContainer = this.container.getElement('div[class=lwAdvancedImageFadeFallback]');
            if($defined(fallbackContainer)){
            	fallbackContainer.setStyle('display','none');
            }
            
            this.error = false
            if(!$defined(imgsContainer) || !$defined(this.textsContainer) || !$defined(this.navContainer)){
            	this.error = true;
            	return '';
            }
            
            this.imgs = imgsContainer.getElements('img');
            this.textElements = this.textsContainer.getElements('img');
            var navItems = this.navContainer.getElements('li');
            
            if(this.imgs.length != this.textElements.length || this.imgs.length != navItems.length || !this.imgs.length){
            	this.error = true;
            	return '';
            }
            
            this.imgs[0].setStyle('opacity',1);
            this.imgs[0].setStyle('visibility','visible');
            this.next = 0; 
            this.textElements[0].setStyle('opacity',1);
            this.textElements[0].setStyle('visibility','visible');
            this.navContainer.setStyle('opacity',1);
            this.navContainer.setStyle('visibility','visible');
            
            
            navItems.each(function(element,index){
            	element.addEvent('mouseenter',function(){
            		if(this.next != index){
            			this.swapFast(this.next,index);
            			this.next = index;
            		}
            	}.bind(this));
            }.bind(this));
            
            this.navContainer.addEvent('mouseleave', function(){
            	this.start();
            }.bind(this));
            this.navContainer.addEvent('mouseenter', function(){
            	this.stop();
            }.bind(this));

    },
    
    start: function() {
    	if(this.error){
    		return '';
    	}
    	//this.loop();
    	this.periodical = this.loop.bind(this).periodical(this.options.pause);
    },
    
    stop: function() {
            $clear(this.periodical);
    },
    
    swapFast: function(from,to){
    	var appear = new Fx.Tween(this.imgs[to], {duration: this.options.fastDuration});
    	appear.start('opacity',0,1);
    	var appear = new Fx.Tween(this.textElements[to], {duration: this.options.fastDuration});
    	appear.start('opacity',0,1);
    	var disappear = new Fx.Tween(this.imgs[from],{duration: this.options.fastDuration});
    	disappear.start('opacity',1,0);
    	var disappear = new Fx.Tween(this.textElements[from],{duration: this.options.fastDuration});
    	disappear.start('opacity',1,0);   	
    },
    
    swap: function(from,to){	
    	//alert(to);
    	var appear = new Fx.Tween(this.imgs[to], {duration: this.options.duration});
    	appear.start('opacity',0,1);
    	var appear = new Fx.Tween(this.textElements[to], {duration: this.options.duration});
    	appear.start('opacity',0,1);
    	var disappear = new Fx.Tween(this.imgs[from],{duration: this.options.duration});
    	disappear.start('opacity',1,0);
    	var disappear = new Fx.Tween(this.textElements[from],{duration: this.options.duration});
    	disappear.start('opacity',1,0);
    },
    
    loop: function() {
            	this.next = (this.next==this.imgs.length-1)?0:this.next+1;
            	var prev = (this.next==0)?this.imgs.length-1:this.next-1;
            	this.swap(prev,this.next);
    }
}); 

window.addEvent('domready', function() {	
	var fadeContainers = document.getElements('.tx-lwadvancedimagefade-pi1');
	if($defined(fadeContainers)){
		fadeContainers.each(function(item, index){
			var fader = new Fader(item);
			fader.start();

			var bannerImage = new Element('img', {
				'src': '/typo3conf/ext/lw_advanced_image_fade/res/images/sticker.png'
			});
			var container = item.getElement('div[class=lwAdvancedImageFadeSticker]');
			//console.log(container);
			bannerImage.inject(container);

			function destroyStickerImage(){
				var bannerImage = document.getElement('div[class=lwAdvancedImageFadeSticker]');
				var disappear = new Fx.Tween(bannerImage,{duration: 1000});
				disappear.start('opacity',1,0);
			}
			destroyStickerImage.delay(5000);
		});
	}
});