var screenImage = function() {
	
	var imageFade = new Class({
		
		options: {
			duration: 300,
			periodical: false,
			periode: 4000,
			startIndex: 0
		},
		
		initialize: function(container, options) {
			$extend(this.options, options);
			
			this.elm = container;
			this.items = this.elm.getElements('*');
			this.currentElement = this.items[this.options.startIndex];
			this.currentIndex = 0;
			this.fadeFx = new Fx.Elements(this.items, {
				link: 'cancel',
				duration: this.options.duration,
				fps: 100,
				onComlete: function() {
					this.updateControlPanel();
					
				}.bind(this)
			});
								
			// Styles allgemein für content-items
			//this.elm.setStyles({'overflow': 'hidden'});
			this.items.setStyles({'position': 'absolute', 'float': 'left', 'opacity': 0});
			this.items[this.currentIndex].setStyles({'opacity': 1});
			
			if(this.options.periodical == true)
				this.periodical();
		},
		
		periodical: function() {
			this.fade.periodical(this.options.periode, this);
		},
		
		getNextElement: function() {
			var nextElement = this.currentElement.getNext();
						
			if(nextElement != null) {
				this.currentIndex++;
			} else {
				this.currentIndex = 0;
			}
			
			return this.currentIndex;
		},
		
		getLastElement: function() {
			var lastElement = this.currentElement.getPrevious();
			
			if(lastElement) {
				this.currentIndex--;
			} else {
				this.currentIndex = this.items.length - 1;
			}
			
			return this.currentIndex;
		},

		fade: function(nextElement) {
			if(nextElement != this.currentElement) {
				
				if(!$defined(nextElement))
					var nextElement = this.getNextElement();
			
				this.currentElement = this.items[nextElement];
					
				var fxCmd = {};
				this.currentElement.getAllPrevious().each(function(elm, i) {
					fxCmd[i] = {'opacity': 1};
				});
				
				fxCmd[nextElement] = {'opacity': 1};
							
				this.currentElement.getAllNext().each(function(elm, i) {
					fxCmd[nextElement + 1 + i] = {'opacity': 0};
				});
				
				this.fadeFx.start(fxCmd);
				
			} else {
				console.log("ne");
			}
		},
		
		reset: function() {			
			this.fade(this.options.startIndex);
		},
		
		updateControlPanel: function() {
			var controlPanel = this.elm.getElement('#control-panel');
			
			if($defined(controlPanel))
				controlPanel.set('value', this.currentIndex + ' / ' + (this.items.length));
		},
		
		initControlPanel: function() {
			this.updateControlPanel();
			
			this.elm.getElement('.next').addEvent('click', this.fade.bind(this));
			this.elm.getElement('.back').addEvent('click', this.fade.bind(this));
		}
	});
	
	return {
		init: function() {

			var faders = [];
			
			$$(".imageFade").each(function(elm, i) {
				faders.push(new imageFade(elm));
				
				elm.addEvent("mouseenter", function() {
					faders[i].fade();
				});
				elm.addEvent("mouseleave", function() {
					faders[i].fade();
				});
			});


			
			if($defined($("accordion"))) {
				$("accordion").addEvent("mouseleave", function() {
					faders.each(function(fader) {
						fader.reset();
					});
				});
			}
		}
	}
}();

document.addEvent('domready', screenImage.init);