// JavaScript Document

// Variablen festlegen
image_count = 0;
target_image_number = image_count;

$(document).ready(function() {  /* START Ready-Function */

	measure();
	
	/* 
	
	Wie funktioniert das Laden der unterschiedlichen Bildgrößen?
	 
	Es wird die Nextgen Galerie verwendet. 
	Durch das einsetzten einer Galerie mit "[nggallery id=3]" werden Thumbnails im der Größe 800 X 600 px von jedem Bild angelegt.
	Das JS liest die Browsergröße aus und tauscht die Bilder entsprechend aus. Es verwendet dabei die von der NextGen angelegten Größen.
	
	*/
	
	/* 
	Wir haben hier folgendes Problem: Die Bilder in der 'Thumbs'-Auflösung sind schon fast komplett geladen (und werden weiter geladen) wenn sich das Script für die Größe Medium entscheidet. Dann werden die Größeren Bilder geladen. Das bedeutet doppelte Ladezeiten. Aua. Es muss eine 'nosript'-Lösung geben die die kleinen Bilder lädt und eine JS-Lösung, die den DOM komplett dynamisch aufbaut. Also ohne bereits Bilder zu laden. 
	*/

	var zielgroesse = "medium";
	if( hoehe < 600 ){ var zielgroesse = "thumb"; }  
	if( hoehe > 900 ){ var zielgroesse = "large"; } 
	
	// Wie viele Bilder gibt es auf der Seite (von 0 bis Anzahl -1)?
	total_images = $('#content .ngg-gallery-thumbnail img').length -1;
	
	// im HTML Quelltext-Angaben auf die entsprechenden Next-Gen-Bilder ändern
	var htmlElement = document.getElementById("container");	
	$(".ngg-gallery-thumbnail-box").addClass('js');
	$(".ngg-gallery-thumbnail img").addClass('gallery-image').addClass('js');
	// Anker um die Bilder entfernen
	for (var n = total_images; n >= 0; n-- ){
		$(".ngg-gallery-thumbnail a").eq(n).replaceWith( $(".ngg-gallery-thumbnail a").eq(n).contents() );
	}

	if (zielgroesse == "medium") {
		// suchen und ersetzen im Quellcode
		var pfad=new RegExp("thumbs/thumbs_","g");
		htmlElement.innerHTML = htmlElement.innerHTML.replace(pfad, "");
		// Klassen austauschen
		$(".ngg-gallery-thumbnail").removeClass('ngg-gallery-thumbnail').addClass('attachment').addClass('attachment-medium');
	}
	if (zielgroesse == "large") {
		// suchen und ersetzen im Quellcode
		var pfad=new RegExp("thumbs/thumbs_","g");
		var backup=new RegExp(".jpg","g");
		htmlElement.innerHTML = htmlElement.innerHTML.replace(pfad, "");
		htmlElement.innerHTML = htmlElement.innerHTML.replace(backup, ".jpg_backup");
		// Klassen austauschen
		$(".ngg-gallery-thumbnail").removeClass('ngg-gallery-thumbnail').addClass('attachment').addClass('attachment-large');
	}

	
	/*
	
	Die Galeriesteuerung:
	
	Alle Bilder bis auf das erste ausblenden
	onKlick das nächste darstellen
	
	*/
	
	/* sind wir auf der Homepage oder auf der Gallery-Seite */
	if ($('.page').hasClass('page-template-templategallery-php')) {
		target = ".page-template-templategallery-php";
	}
	if ($('.page').hasClass('page-template-templatehomepage-php')) {
		target = ".page-template-templatehomepage-php";
		/* Zufalls-Bild festlegen */
		target_image_number = Math.floor(Math.random()*total_images);
	}
	
	// alle Bilder ausblenden
	$(target + ' #content img.gallery-image').hide();
	
	// untere Navigation einblenden
	$('.image-nav-bottom').addClass("js");
	
	
	// Bildnavigations-Buttons mit Listener belegen
		// rollover auf den seitlichen Buttons
		$(target + ' .image-nav-button').hover(
			function () {
				$(this).addClass("hover");
			},
			function () {
				$(this).removeClass("hover");
			}
		);
		// rollover auf der unteren Navigation
		$(target + ' .image-nav-bottom .next').hover(
			function () {
				$(target + ' .image-nav-button.next').addClass("hover");
			},
			function () {
				$(target + ' .image-nav-button.next').removeClass("hover");
			}
		);
		$(target + ' .image-nav-bottom .previous').hover(
			function () {
				$(target + ' .image-nav-button.previous').addClass("hover");
			},
			function () {
				$(target + ' .image-nav-button.previous').removeClass("hover");
			}
		);
		// rollover auf Bildern
		$(target +' #content img').hover(
			function () {
				$(target + ' .image-nav-button.next').addClass("hover");
			},
			function () {
				$(target + ' .image-nav-button.next').removeClass("hover");
			}
		);

		// click next
		$(target + ' .image-nav-button.next').click(function() { // Seitenbutton
			nav_next();
		});
		$(target + ' .image-nav-bottom .next').click(function() { // Navigation unten
			nav_next();
		});
		$('.page-template-templategallery-php #content img').click(function() { // Bilder
			nav_next();
		});
		
		// click previous
		$(target + ' .image-nav-button.previous').click(function() { // Seitenbutton
			nav_prev();
		});
		$(target + ' .image-nav-bottom .previous').click(function() { // Navigation unten
			nav_prev();
		});
		
		image_count = target_image_number;
		// und endlich …
		reveal_image(target_image_number);
		
}); /* -- END Ready-Function */

/* Funktionen */

function nav_next(){
	if (image_count < total_images) {
		image_count ++;
	} else {
		image_count = 0;
	}
	reveal_image(image_count);
}
function nav_prev(){
	if (image_count > 0) {
		image_count --;
	} else {
		image_count = total_images;	
	}
	reveal_image(image_count);
}

/* Funktion: Browser messen */
function measure(){
	// Browser messen und Bildgröße aussuchen 
	if (self.innerWidth != undefined) {
		breite = self.innerWidth;
		hoehe = self.innerHeight;
	} else {
		breite = document.documentElement.clientWidth;
		hoehe = document.documentElement.clientHeight;
	}
}

/* Funktion: Bild anzeigen und altes ausblenden */

function reveal_image(target_image_number){
	measure();
	
	/* das breite zu höhe Verhältnis des Bildes auslesen und unter hbverh speichern */
	/* überprüfen, welcher Browser voliegt - Größe auslesen funktioniert im IE und Moz/Webkit nicht gleich */ 
	if (checkBrowserName('MSIE')){  
		var bhverh = $(target +' #content img:eq('+target_image_number+')').width() / $(target +' #content img:eq('+target_image_number+')').height();
	} else { 
		var bhverh = $(target +' #content img:eq('+target_image_number+')').attr('width') / $(target +' #content img:eq('+target_image_number+')').attr('height');
	} 
	/* var bhverh = $(target +' #content img:eq('+target_image_number+')').width() / $(target +' #content img:eq('+target_image_number+')').height(); */
	var zielhoehe = hoehe - 165;  // hier den unteren Bildrand einstellen
		
	if ( bhverh == 0 || bhverh > 3 || isNaN (bhverh) ) {
		
		setTimeout ('reveal_image(image_count)', 500);
				
	} else {
		
		var bildmargin = 0 - ((zielhoehe * bhverh) / 2);

		// Bild mit der Klasse "hide" ausblenden
		$(target +' #content img.visible').hide().removeClass('visible');
		// skalieren 
		if ( breite < (hoehe * bhverh) ) { // Bild breiter als der Browser
			zielhoehe =  (breite / bhverh) - 165;
			bildmargin = 0 - ((zielhoehe * bhverh) / 2);
		} 

		$(target +' #content img:eq('+target_image_number+')').css({ "height" : zielhoehe, "margin-left" : bildmargin });
		// angegebenes Bild einblenden, eingeblendetes Bild mit class "visible" versehen
		$(target +' #content img:eq('+target_image_number+')').fadeIn(500).addClass('visible');
						
	}
}


/* Bildgröße anpassen bei Ändern der Browsergröße */

$(window).resize(function() {
	reveal_image(image_count);
});


/* User Agent (Browserkennung) auf einen bestimmten Browsertyp prüfen */  
 function checkBrowserName(name){  
   var agent = navigator.userAgent.toLowerCase();  
   if (agent.indexOf(name.toLowerCase())>-1) {  
     return true;  
   }  
   return false;  
 }