var debug = 0;				// 1 = Debug-Informationen anzeigen
var debuginfosend = 0;		// nicht ändern





$(function() {
		
	// Vorteile auf einen Blick ein-/ausblenden
	$('.additionalInfo a#toggleAdvantages').toggle(
		function() {
			$(this).addClass('active');
			$('.additionalInfo #advantages').slideDown();
		}, 
		function() {
			$(this).removeClass('active');
			$('.additionalInfo #advantages').slideUp();
		}
	);

	// Wichtige Info ein-/ausblenden
	$('.additionalInfo a#toggleInfo').toggle(
		function() {
			$(this).addClass('active');
			$('.additionalInfo #info').slideDown();
		}, 
		function() {
			$(this).removeClass('active');
			$('.additionalInfo #info').slideUp();
		}
	);

});





/*
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Funktionen: 	uniqueId(); 			generiert eine einzigartige ID
										Diese Id wird an die Elemente der Slideshow angehängt und dient dazu jede Slideshow eindeutig 
										identifizieren zu können. (Fall: mehrere Slideshows auf einer Seite)
										
				slideshow();			Slideshow-Komponente
										
										Konfiguarationsmöglichkeiten: 	var s = new slideshow()
										
										s.source 		Bilderordner 	Wenn alle Bilder in einem Verzeichnis gespeichert sind, kann 
																		dieses hier angegeben werden.
										
										s.images		Bilderliste 	getrennt durch Komma: bild1.jpg, bild2.jpg, bild3.jpg ...
										
										s.alt			Alt-Tags		Alt-Tags für die Bilder der Bilderliste. Wenn genutzt muss die 
																		Anzahl der Alt-Tags gleich der Anzahl der in s.images 
																		angegebenen Bilder sein. Ansonsten werden die Alt-Tags nicht 
																		eingefügt.
																		
										s.uid			Slideshow-ID	Wenn nicht angegeben, wird an dieser Stelle eine einzigartige 
																		Id zugewiesen.
																		
										
																	
										



*/




var __debug = function(txt) {
	if ( !debug ) return;
	
	if ( !debuginfosend ) {
		debuginfosend = 1; 
		$('#debug').prepend('<br /><br /><br />***** DEBUG INFORMATION *****<br /><br /><br />'); 
	}
	
	$('#debug').append(txt+'<br />'); 
}


var setActiveFlyout = function(element) {
	if ( $(element).parent().hasClass('active') ) {
		$('.galleryThumbBar ul li').removeClass('active');
	} else {
		$('.galleryThumbBar ul li').removeClass('active');
		$(element).parent().addClass('active');
	}
	
	return false;
};


var uniqueId = function() {
	var r = Math.floor(Math.random()*990) + 10; // Zahl zwischen 10 und 1000
	
	var newDate = new Date;
	var id = newDate.getTime() + '_' + r;
	
	return id;
};


var slideshow = function() {
	// Variablen
	this.images = [];					// Bilderliste getrennt durch Komma: bild1.jpg, bild2.jpg, bild3.jpg, ...
	this.alt = [];						// Beschreibungen für Alt-Tags in gleicher Reihenfolge, wie die Bilderliste
	this.description = false;			// Bildbeschreibung (aus Alt-Tag) anzeigen

	this.source = '';					// Bilderordner
	this.uid = uniqueId();
	
	this.thumbnails = true;				// Thumbnailleiste anzeigen: true oder false
	this.pager = false;
	this.thumbWidth = 107;				// Thumbnail-Breite										
	this.thumbHeight = 56;				// Thumbnail-Höhe										
	this.imgWidth = 870;				// Galeriebild-Breite									
	this.imgHeight = 420;				// Galeriebild-Höhe										
	this.speed = 1500;					// Anzeigedauer für ein Bild
	
	this.introImage = '';				// Dateiname des Intro-Bildes (Wenn angegeben, dann wird es angezeigt) -> introImage.length > 4 -> .jpg
	this.introAlt = '';					// Alt-Text des Intro-Bildes
	
	// Code für Galeriebereich und Thumbnailleiste
	var __galIntroLayer = 	'<div class="galleryIntroLayer" id="galleryIntroLayer_'+this.uid+'"></div>';
	var __galContainer =  	'<div class="galleryContainer" id="galleryContainer_'+this.uid+'"></div><div class="galleryOptionalContent" id="galleryOptionalContent_'+this.uid+'"></div>';
	var __galThumbbar =	 	'<div class="galleryThumbBar" id="galleryThumbBar_'+this.uid+'"><ul id="thumbnails_'+this.uid+'"></ul><div class="clear"></div></div>';
	var alt;
	
	
	
	// Funktionen
	this.setSource = function(source) {
		this.source = source;
	};
	
	
	this.setImages = function(imagelist) {
		var il = imagelist.replace(/ /g, '');
		this.images = il.split(',');
	};
	
	
	this.setAlttags = function(altlist) {
		this.alt = altlist.split(',');
		
		// Führende und abschließende Leerzeichen entfernen
		for ( var i=0; i<this.alt.length; i++ ) {
			this.alt[i] = this.alt[i].replace (/^\s+/, '').replace (/\s+$/, '');
		}
	}
	
	
	this.initialize = function(element) {
		
		var desc = this.description;
		var thumbnails = this.thumbnails;
		var images = this.images;
		var pager = this.pager;
		var thumbWidth = this.thumbWidth;
		var thumbHeight = this.thumbHeight;
		var introImage = this.introImage;
		var uid = this.uid;
		var pagerDiv;
		
		
		// Element leeren, Code für IntroLayer, Container und Optionsleiste für die Galerie schreiben
		$(element).empty();
		$(element).addClass('galleryLoadingProjector');
		

		if ( this.introImage.length > 4 ) {
			$(element).css('position', 'relative');
			$(element).append(__galIntroLayer);
			$('#galleryIntroLayer_'+this.uid).hide();
			$('#galleryIntroLayer_'+this.uid).css('width', this.imgWidth+'px');
			$('#galleryIntroLayer_'+this.uid).css('height', this.imgHeight+'px');
			$('#galleryIntroLayer_'+this.uid).append('<img id="intro_' + uid + '" src="' + this.source + this.introImage + '" width="' + this.imgWidth + '" height="' + this.imgHeight + '" alt="' + this.introAlt +'" />');
		}
			
		$(element).append(__galContainer);


	
		/*	Wenn gewünscht, Code für Thumbnailleiste schreiben
		*/
		if ( ( this.thumbnails === true ) && ( this.pager === false ) ){
			$(element).append(__galThumbbar);
			pagerDiv = '#thumbnails_'+this.uid;
		} else 
		if ( ( this.thumbnails === false ) && ( this.pager === true ) ) {
			$('#galleryOptionalContent_'+this.uid).append('<div class="additionalNavigationBar"><ul id="gallerypagerNav_'+this.uid+'"></ul></div>');
			pagerDiv = '#gallerypagerNav_'+this.uid;
		} else {
			pagerDiv = '';
		}
		
		
		
		/*	Bilder der Galerie in das "CINEMA-DIV" schreiben
		*/
		for ( var i=0; i<this.images.length; i++ ) {
			var option = '';
			
			if ( typeof this.alt == "string" ) {
				alt = this.alt;
			} else 
			if ( typeof this.alt == "object" ) {
				if ( this.alt[i] ) {
					alt = this.alt[i];
				} else {			
					alt = 'Ravello Steinteppich '+ (i+1);
				}
			}
					
			$('#galleryContainer_'+this.uid).append('<img id="slide_' + this.uid + '_' + i + '" src="' + this.source + this.images[i] + '" width="' + this.imgWidth + '" height="' + this.imgHeight + '" alt="' + alt +'" title="' + alt +'" />');
		}
		
		
		
		/*	Wenn nur ein Bild in der Galerie vorhanden ist, dann wird cycle({}) nicht durchlaufen und daher auch keine Bild-Unterschrift 
			angezeigt. Für diesen Fall (Bilder <= 1) wird die Bild-Unterschrift sofort angezeigt.
		*/
		if ( (desc) && (this.images.length <= 1) ) {
			$('#galleryOptionalContent_'+this.uid).append('<span id=\'description_'+this.uid+'\' style=\'display: block;\'>'+alt+'</span>'); 							
		}

		

		/*	Cycle-Script starten
		*/
		$('#galleryContainer_'+this.uid).cycle({ 
			fx:					'fade', 
			speed:				this.speed,	
			pager:				pagerDiv,
			timeout: 			4000,
			pagerAnchorBuilder: function(idx, slide) {
									if ( thumbnails ) {
										var optional = '';
										
										if ( idx === 0 ) {
											optional = ' class="first-child"';
										} else {
											optional = '';
										}
										
										return '<li'+ optional +'><a href="#"><img id="img'+idx+'" src="' + slide.src + '" width="' + thumbWidth + '" height="' + thumbHeight + '" alt="Bild '+ (idx+1) +'" /></a></li>';
									} else {
										var optional = '';
										var navElementId = '';
										
										if ( idx === 0 ) {
											optional = ' class="first"';
										} else {
											optional = '';
										}
										
										navElementId = 'navElement_'+uid+'_'+idx;
										return '<li'+ optional +' id="'+navElementId+'" onclick="$(\''+pagerDiv+' a\').removeClass(\'active\'); $(\'#'+navElementId+' a\').addClass(\'active\');"><a href="#">'+slide.alt+'</a></span>';
									}
								},
			before: 			function(currSlide, nextSlide, opts) {
									if ( desc ) {
										$('#galleryOptionalContent_'+uid+' #description_'+uid).fadeOut(300, 	function() {
																													$('#galleryOptionalContent_'+uid).empty();
																												});
									}
								},
			after:				function(currSlide) {
									if ( desc ) {
										$('#galleryOptionalContent_'+uid).append('<span id=\'description_'+uid+'\' style=\'display: none;\'>'+this.alt+'</span>'); 
										$('#galleryOptionalContent_'+uid+' #description_'+uid).fadeIn(300);									
									}
								}
		});

		$('#galleryContainer_'+this.uid+' img:first-child').hide();
		$('#galleryContainer_'+this.uid).cycle('pause');


		
		
		/*	Bilder vorladen
		*/		
		var preload = [];
		var ph = '';
		var nf = '';
		
		if ( this.thumbnails === true ) {
			preload = pagerDiv+' img';
			ph = root+'img/gallerycontent/loading_mini.gif',
			nf = root+'img/gallerycontent/notfound_mini.gif'
		} else {
			for ( var i=0; i<this.images.length; i++ ) {
				preload.push(this.source+this.images[i]);
			}	
		}
		
		
		/* 	Instanz von $.preload() nutzen, damit keinerlei Konflikte auftreten,
			wenn an anderer Stelle weitere Preloader eingesetzt werden oder 
			z.B. zwei Galerien auf der gleichen Seite eingesetzt werden. 
			
			--> Gleicher Fall, wie bei der ID-Veragabe: id_+this.uid */
			
		//var galPreload = $.preload;
		eval('galPreload_'+this.uid+'=$.preload;');
		
		eval('galPreload_'+this.uid)(preload, {
			threshold: 1, 
			placeholder: ph,
			notFound: nf,
			onComplete: function(data) {
				__debug(data.image + ' INDEX: '+data.index);
				if ( thumbnails === true ) {
					$('#galleryThumbBar_'+uid+' #img'+data.index).hide();
					$('#galleryThumbBar_'+uid+' #img'+data.index).fadeIn(200);
				}
			},
			onFinish: function(data) {
				$(element).removeClass('galleryLoadingProjector');

				
				if ( introImage.length > 4 ) {
					
					// Wenn Intro-Layer vorhanden, dann anzeigen und danach die Slideshow starten ...
					
					$('.galleryIntroLayer').fadeIn(1000, function() {
						$('#galleryContainer_'+uid+' img:first-child').fadeIn(1000, function() {
							$('.galleryIntroLayer').fadeOut(1000, function() {
								if ( ( thumbnails === false ) && ( pager === true ) ) {
									$('#'+pagerDiv+' li:first-child a').addClass('activeSlide');
									$('#galleryContainer_'+uid).cycle('resume'); 
								} else {
									$('#galleryContainer_'+uid).cycle('resume'); 
								}
							});
						});
					});
					
				} else {
					
					// ... andernfalls die Slideshow direkt starten
					
					$('#galleryContainer_'+uid+' img:first-child').fadeIn(1000, function() { 
						$('.galleryIntroLayer').fadeOut(500);
						
						if ( ( thumbnails === false ) && ( pager === true ) ) {
							$('#'+pagerDiv+' li:first-child a').addClass('activeSlide');
							$('#galleryContainer_'+uid).cycle('resume'); 
						} else {
							$('#galleryContainer_'+uid).cycle('resume'); 
						}
					});
					
				}
			}
		});
	
			
		
		// onClick - Event (SlideShow stoppen) den Thumbnails zuweisen
		$(pagerDiv+' a').bind('click', function() {
			$('#galleryContainer_'+uid).cycle('pause');
		});
		
	};	
}