var crossfader = new Class({
	initialize: function(images, current) {
		this.images = images;
		this.current = current;
	},
	fade: function ()
	{
		var el = this.images[this.current];
		//new Element('div',{html: "current: " + el + "|" + this.current}).inject(document.body,'bottom');
		
		// nächstes element lesen wenn element letztes ist, erstes lesen
		if((this.images.length-1) == this.current)
		{
			var nextel = this.images[0];
			//new Element('div',{html: "first: "+nextel }).inject(document.body,'bottom');
			this.current = 0;
		}
		else
		{
			var nextel = this.images[this.current+1];
			//new Element('div',{html: "next: "+nextel }).inject(document.body,'bottom');
			this.current++;
		}
				
		// crossfade durchführen
		el.set('tween', {property: 'opacity', duration: 1000, 
			onStart: function() {}, 
			onComplete: function() {}
			}
		);
		el.get('tween').start(0);
		
		// crossfade durchführen
		nextel.set('tween', {property: 'opacity', duration: 1000});
		nextel.get('tween').start(1);
	}
});


var crossfadestart = function() {       
	// bilder in liste laden
	if(!document.id('slideicons'))
		return;
	
	var crossfader1 = new crossfader($('slideimage').getChildren('img'), 0);
	var crossfader2 = new crossfader($('slideicons').getChildren('img'), 0);
	
	var img_elements = $('slideimage').getChildren('img');
	img_elements.each(function(el, index) {
		if(index == 0)
			el.setStyle('opacity', 1);
		else
			el.setStyle('opacity', 0);			
	});
	img_elements = $('slideicons').getChildren('img');
	img_elements.each(function(el, index) {
		if(index == 0)
			el.setStyle('opacity', 1);
		else
			el.setStyle('opacity', 0);			
	});
	
	
	crossfader1.fade.periodical(4000, crossfader1);
	crossfader2.fade.periodical(4000, crossfader2);
};

window.addEvent("domready", crossfadestart);