$(document).ready(function(){
	//Elastic textarea for comments
	$('#comment').elastic();
		
	/* Automatische Größenanpassung */
	
	/*	Die Funktion resizeNow wird beim Laden
		der Seite mit dem Parameter 'load' aufgerufen,
		damit das Seitenverhältnis bestimmt wird */
	resizeNow('load');
	
	/*	Bei einer Größenänderung des Browserfensters
		wird die Funktion ohne Parameter ausgeführt */
	$(window).resize(function() {
		resizeNow('');		
	});
	
	
	// Image-descrition when hovering an image
	$(".size-full").hover(function(){
			var title = $(this).attr("title");
			if (title != "") {
				$(this).removeAttr("title");					
				$(this).after('<div class=\"imagetitle\"><p>' + title + '</p></div>');
				
				var thiswidth = $(this).outerWidth();
				var thisheight = $(this).next(".imagetitle").height();
				
				    var cssObj = {
					'margin-top' : -thisheight,
					'position' : 'relative',
					'bottom' : 0,
					'width' : thiswidth
    				}
				
				$(this).next(".imagetitle").css(cssObj);
			}
			$(this).next(".imagetitle").stop(true, true).fadeIn();
		},
		function(){
			$(this).next(".imagetitle").stop(true, true).fadeOut();
	});
	// Prev-Next-Navigation
	$(document).scroll(function() {
		var bodypos = $(document).scrollTop();
		if (bodypos > 0 && bodypos < 125) {
			var newpos = 145 - bodypos;
			$(".prev-next-nav").css("top",newpos);
		} else if (bodypos > 125){ 
			$(".prev-next-nav").css("top",20);
		} 	else if (bodypos < 125){ 
			$(".prev-next-nav").css("top",145);
		}
	});
	
	function resizeNow(isLoad){
		
		// Auf den Einzelseiten sind die Bilder schön groß!
		$('.single .resizable').each(function() {
			
			/* 	Liest die aktuelle Höhe und 
				Breite des Bildes aus */
			var thisheight = $(this).attr('height');
			var thiswidth = $(this).attr('width');
			
			/* 	Beim Laden der Seite wird das Seitenverhältnis
				des Bildes bestimmt und im img-Tag gespeichert */
			if (isLoad == 'load') {
				var ratio = thiswidth / thisheight;
				$(this).attr('ratio', ratio);
			}
			
			/* 	Die aktuelle Höhe und Breite
				des Fensters wird bestimmt */
			var windowheight = $(window).height();
			var windowwidth = $(window).width();
			
			/* 	Die neue Höhe des Bildes wird gesetzt
				und aus dem Verhältnis die Breite berechnet */
			var newheight = windowheight - 75;
			if ( newheight > 900 ) { newheight = 900; }
			var newwidth = newheight * $(this).attr('ratio');
			
			/* 	Wenn die neue Breite des Bildes kleiner ist als die
				Fensterbreite des Browsers, wird diese
				an das Bild übergeben */
			if (newwidth < windowwidth) {
				$(this).attr('height', newheight);
				$(this).attr('width', newwidth);
			} else {
				/* 	ansonsten wird basierend auf der Breite eine neue
					Bildgröße bestimmt und diese an das Bild übergeben */
				newwidth = windowwidth - 75;	
				newheight = newwidth / $(this).attr('ratio');
				$(this).attr('height', newheight);
				$(this).attr('width', newwidth);
			}

			/* 	Schließlich wird das Bild noch zentriert ausgerichtet.
				Der Code geht dabei von einer Breite von 700px
				für den Content-Bereich aus */
			var marginleft = ((newwidth / 2) * (-1) + 350);
			$(this).css('margin-left', marginleft);
		});
		
		/* Auf den Übersichtsseiten werden die
		Bilder auf 700px skaliert. */
		$('.home .resizable').each(function() {

			var thisheight = $(this).attr('height');
			var thiswidth = $(this).attr('width');

			if (isLoad == 'load') {
				/* Achtung! Hier wird das Seitenverhältnis andersherum
				berechnet, da die Breite des Bildes ausschlaggebend ist. **/
				var ratio = thisheight / thiswidth;
				$(this).attr('ratio', ratio);
			}
			
			$(this).attr('width', '700');
			var newheight = 700 * $(this).attr('ratio');


			$(this).attr('height', newheight);
			
		});
	}
	
	$('.toggle-meta').click(function() {
		$('.meta-wrapper').slideToggle('slow');
		return false;
	});
	
	
});