var fadebox = null;
Event.observe(window, 'load', function(){
	var counter = 0;
	
	$$('div.fadebox').each(function(fadeBoxContainer){
		counter++;
		fadeBoxContainer.id = "fadebox_b" + counter;
		fadebox = new Fadebox(fadeBoxContainer.id, counter);
	});
	
});

var Fadebox = Class.create();
Object.extend(Fadebox.prototype, {
	currentFrame: 1,
	slideshowDuration: 3, //Wie viel Sekunden soll ein Frame einer Slideshow angezeigt werden?
	initialize:function(fadebox, counter)
	{
		var maxheight = 0;
		var intcounter = 0;
		var p = this;
		
		
		$$('#' + fadebox + ' .fade').each(function(fadeContainer){
			intcounter++;
			fadeContainer.id = "fade_b" + counter + "_n" + intcounter;
			//fadeContainer.setStyle('overflow', 'hidden');
			fadeContainer.style.overflow = "hidden";
		});

		var linklist, listelement, link;
		for(i=1;i<=intcounter;i++) {
			linklist = Builder.node('ul');
			if(i>1) {
				linklist.appendChild(
					Builder.node('li', {className: 'prevpage pngfix'}, 
						Builder.node('a', {href: '#show-'+(i-1)+'-'+i, className: 'fadelistlink'}, 'Zurück')
					)
				);
			}
			for(j=1;j<=intcounter;j++) {
				if(j==1) {
					listelement = Builder.node('li', {className: 'first'});
				} else if(j==intcounter) {
					listelement = Builder.node('li', {className: 'last'});
				} else {
					listelement = Builder.node('li', {className: 'mid'});
				}
				
				if(i!=j) {
					link = Builder.node('a', {href: '#show-'+j+'-'+i, className: 'fadelistlink'}, j);
				} else {
					link = Builder.node('span', {className: 'current'}, j);
				}
				listelement.appendChild(link);
				linklist.appendChild(listelement);
			}
			if(i<intcounter) {
				linklist.appendChild(
					Builder.node('li', {className: 'nextpage pngfix'}, 
						Builder.node('a', {href: '#show-'+(i+1)+'-'+i, className: 'fadelistlink'}, 'Vor')
					)
				);
			}
			$$('#fade_b'+counter+'_n'+i+' .fadelinks').each(function(fadelinksContainer){
				fadelinksContainer.appendChild(linklist);
			});
			if(i!=1) $('fade_b'+counter+'_n'+i).hide();
		}
		
		/**
		 * Initialisiere die Slideshow
		 **/
		var slideShowExecutor = new PeriodicalExecuter(function(pe) {
			if( intcounter > 1) {
				var nextFrame = (p.currentFrame == intcounter) ? 1 : parseInt(p.currentFrame) +1;
				p.showNext.call(p, nextFrame, p.currentFrame, counter, fadebox);
			}
		}, p.slideshowDuration);
		
		/**
		 * Initialisiere normales Click Event
		 **/
		$$('#' + fadebox + ' .fadelistlink').each(function(link){
			Event.observe(link, 'click', function() {
				linkvalue = link.href.split('#')[1].split('-')[1];
				currentvalue = link.href.split('#')[1].split('-')[2];
				
				p.showNext.call(p, linkvalue, currentvalue, counter, fadebox);
				//Bei manuellem Anwählen, wird die Slideshow gestoppt.
				slideShowExecutor.stop();
			});
		});

	},
	/**
	 * @param linkvalue Index des anzuzeigenden Frames
	 * @param currentvalue Index des Frames, das ausgeblendet werden muss
	 */
	showNext : function(linkvalue, currentvalue, counter, fadebox ){
				this.currentFrame = linkvalue;
				$(fadebox).setStyle({
					'height': $('fade_b' + counter + '_n'+currentvalue).offsetHeight + 'px',
					'overflow': 'hidden'
				});

				$('fade_b' + counter +'_n'+currentvalue).hide();
				$('fade_b' + counter +'_n'+linkvalue).appear({ 
					duration: 0.2, 
					afterFinish: function(){
					
						
					
						$(fadebox).morph('height:'+$('fade_b' + counter +'_n'+linkvalue).offsetHeight+'px;', { 
							duration: 0.1,
							beforeStart: function(){
								//$(fadebox).setStyle({
								//	'overflow': 'auto'
								//});
								
								var hColor = "";
								
								$$('#fade_b' + counter +'_n'+currentvalue+' h3').each(function(h3){
									hColor = h3.getStyle('color');
								});
								
								
								$$('#fade_b' + counter +'_n'+currentvalue+' h4').each(function(h4){
									hColor = h4.getStyle('color');
								});
								
								
								$$('#fade_b' + counter +'_n'+currentvalue+' h5').each(function(h5){
									hColor = h5.getStyle('color');
								});
								
								
								$$('#fade_b' + counter +'_n'+currentvalue+' h6').each(function(h6){
									hColor = h6.getStyle('color');
								});
								
								
							}
						});
					} 
				});
			}
});