$(document).ready(function() {
	slideShow();
	$(".inhalt").hide();
	$(".inhalt-1").show();
	$('.titel').each (function (i) {
		$(this).click(function(){
			$('.inhalt-'+(i)).slideToggle("500");
		});
	});	
});

function slideShow() {
	//append a LI item to the UL list for displaying 
	$steuerung = '';
	$('.slideshow li').each (function (i) {
		var akt = '';
		if(i == 0) akt = 'class="akt"';
		$steuerung += '<a ' + akt +' rel=' + i + ' href="http://' + window.location.hostname + window.location.pathname + '#">' + (i+1) + '</a>';
	});
	$('ul.slideshow').append('<li id="slideshow-"><div class="slideshow--container"><div class="steuerung">' + $steuerung + '</div><h4></h4><p></p></div></li>');
	
	$('.steuerung a').each (function (i) {
		$(this).click(function(){
			wechsel(i);
			$(".steuerung a").removeClass();
			$(this).addClass('akt');
		});
	});

	//Set the opacity of all images to 0 & display first
	$('ul.slideshow li').css({opacity: 0.0});
	$('ul.slideshow li:first').css({opacity: 1.0});
	
	//Get the  of the first image from REL attribute and display it
	$('#slideshow- h4').html($('ul.slideshow img:first').attr('title'));
	$('#slideshow- p').html($('ul.slideshow img:first').attr('alt'));
		
	//Display Text 
	$('#slideshow-').css({opacity: 0.80});
}

function wechsel(ziel) {
//if no IMGs have the show class, grab the first image
	var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ($('ul.slideshow li').eq(ziel));

	if (next.find('img').attr('title') != current.find('img').attr('title')) {
		//Get next image 
		var title = next.find('img').attr('title');	
		var desc = next.find('img').attr('alt');	
	
		//Set the fade in effect for the next image, show class has higher z-index
		next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1500);
		
		//Hide the  first, and then set and display the 
		$('#slideshow-').slideToggle(400, function () { 
			$('#slideshow- h4').html(title); 
			$('#slideshow- p').html(desc); 
			$('#slideshow-').slideToggle(750);
		});		
	
		//Hide the current image
		current.animate({opacity: 0.0}, 1500).removeClass('show');
	}
}