// JavaScript Document
window.addEvent('domready', function(){
	initializeImageGallery();
});


/*
 * Die Bildergallerie zeigt beim Aufruf das erste Bild
 * des darunterliegenden FCE an.
 * 
 * Dazu werden alle divs erzeugt, die die Bilder und deren Bildunterschriften 
 * beinhalten. Diese werden untereinander (mit position: absolut) dargestellt.
 * 
 * Dieses Scrupt blendet alle, ausser dem ersten Element aus.
 * 
 * Weiterhin wird eine Anzahl klickbarer Elemente erzeugt.
 * Diese korrespondieren mit der Anzahl anzuzeigender Bilder.
 * 
 * 
 * */
function initializeImageGallery() {

	var FX_Options = {};
	FX_Options.duration = 1500;
	
	var gallery = $('gallery');
	if (!gallery) return;
	
	// gallery-Container minimieren, wenn es keine Inhalte gibt
	if( ! $('gallery').getFirst() )
		$('gallery').setStyle('height', '0');
			
	// Event-Handler
	var clickHandler = function(event){
		
		/*alert('clicked');*/	
		        
		event = new Event(event);

        var button = event.target;
		var buttonIndex = button.getProperty('id').toString();
	
		var currentInd = buttonIndex.slice(6, buttonIndex.length);
   
		// suche aktuell sichtbares div (opacity==1)
		galleryImageDivs.forEach(function(item, index){
			
			if ($(item).getStyle('opacity') == 1) {
				
				fadeOut = new Fx.Style(item, 'opacity', { onComplete: function() { 
					// Navigations-Thumb andere Klasse geben (class="galleryThumbNav")
					$('button'+index).removeClass('galleryThumbNav_active');
					$('button'+index).addClass('galleryThumbNav');
					$('button'+index).addEvent('click',function(e){clickHandler(e)}); 
					}, duration: 500});
				fadeOut.start(0);
				
			}
			if(index==currentInd){
				fadeIn = new Fx.Style(item, 'opacity', { onComplete: function() { 
						// setzen Button-Klasse auf class="galleryThumbNav_active"
						button.removeClass('galleryThumbNav');
						button.removeEvents('click');
						button.addClass('galleryThumbNav_active');
					}, duration: 500});
				fadeIn.start(1);
			}
			
		});

    }// Ende Event-Handler
	
	
	
	var galleryImageDivs = $$('div.galleryImage');
	
	var galleryThumbNav = $$('div.galleryThumbnav');
	
	var galleryThumbNavUL = new Element('ul', {
		'id': 'galleryThumbNavUL'
		});
	
	galleryThumbNavUL.inject('galleryThumbnav');
	
	// Alle div-Elemente durchgehen
	galleryImageDivs.forEach(function(item, index){
	
		//alert('Gallery-Element: ' + index);
		
		// erstes div anzeigen
		// ersten Eintrag 
		if(index<1){
			
			//alert(' Erstes Element ! ');
	
			$(item).setStyle('opacity','1');
			
			// ersten Listeneintrag erstellen
			var galleryThumbNavUL_LI = new Element('li',{
				'class': 'galleryThumbNavUL_LI'
				});
			
				
			var galleryThumbNavUL_LI_SPAN = new Element('span',{	
				'id': 'button'+ index,	
				'class': 'galleryThumbNav_active', 
				'events': {	
					'click': function(e){ 
						clickHandler(e);
					}	
				}	
			});
			
			// Span dem LI hinzufügen
			galleryThumbNavUL_LI_SPAN.inject(galleryThumbNavUL_LI);
			
		}		
		// alle weiteren divs ausblenden
		else{
		
			//alert(' Element Nummer: ' + index+1);
			$(item).setStyle('opacity','0');
			
			// weitere Listeneintraege erstellen
			var galleryThumbNavUL_LI = new Element('li',{
				'class': 'galleryThumbNavUL_LI'});
				
			var galleryThumbNavUL_LI_SPAN = new Element('span',{
				'id': 'button'+ index,	
				'class': 'galleryThumbNav', 
				'events': {	
					'click': function(e){ 
						clickHandler(e);	
					}	
				}	
			});
			// Span dem LI hinzufügen
			galleryThumbNavUL_LI_SPAN.inject(galleryThumbNavUL_LI);
			
		}
		
		// LI dem UL hinzufügen
		galleryThumbNavUL_LI.inject(galleryThumbNavUL);
			
	});	
	
}