var slides = $('#empfehlungen .slides'); // Die einzelnen Slides
var breiteContainer = 220; // Breite der Slides
var anzahlSlides = slides.length +2; // Anzahl der Slides + Klon von erstem und letztem Slide
var aktuellesBild = 1; // Zweites Slide zuerst, weil erstes ein Klon vom letzten ist

$('#empfehlungen').css({'overflow':'hidden', 'width':breiteContainer}); // Breite und overflow ändern, wenn js aktiviert
// $('#empfehlungen').css({'margin':'0 auto','overflow':'visible', 'width':breiteContainer}); // Breite und overflow ändern, wenn js aktiviert

slides.wrapAll("<div id='slidesContainer'></div>"); // Container für Slides erstellen

var slidesContainer = $('#slidesContainer'); // Slidecontainer

slidesContainer.css({ 
'width': breiteContainer * anzahlSlides, // Slidecontainer ist so breite wie alle Slides zusammen
'marginLeft':breiteContainer*(-1)}); // Zweites Slide zuerst anzeigen, weil erstes ein Klon vom letzten ist

slides.first().addClass('erstes').clone().appendTo(slidesContainer); // Erstes und letztes Slide klonen und an Anfang bzw. Ende des
slides.last().addClass('letztes').clone().prependTo(slidesContainer); // Containers stellen, damit endloses Sliden möglich ist

$('#empfehlungen').append('<span class="pfeil" id="pfeilLinks">Links</span><span class="pfeil" id="pfeilRechts">Rechts</span>');
// Links und Rechts-Buttons erstellen	

$('.pfeil').bind('click', function(){
	clearInterval(start_slideshow); // Sobald auf einen Pfeil geklickt wird, automatische Slideshow stoppen
	slidesContainer.stop('true','true'); // Fehlerhafte Darstellung bei zuvielem Klicken unterbinden

	if($(this).attr("id") == "pfeilLinks") { aktuellesBild--; } // Nummer aktueller Slide verringern

	if($(this).attr("id") == "pfeilRechts") { aktuellesBild++; } // Nummer aktueller Slide erhöhen
	
	bilderBlaettern();
});

function bilderBlaettern() {
	
	slidesContainer.animate({'marginLeft':breiteContainer*(-aktuellesBild)},function(){ // Slidecontainer verschieben
	
		if(aktuellesBild == anzahlSlides-1) { // Wenn bei letztem Slide (Klon vom ersten), auf Original springen
			slidesContainer.css({'marginLeft':breiteContainer*(-1)});	
			aktuellesBild = 1;
		} 
	
		if(aktuellesBild == 0) { // Wenn beim ersten Slide (Klon vom letzten), auf Original springen
			slidesContainer.css({'marginLeft':breiteContainer*(anzahlSlides-2)*(-1)});	
			aktuellesBild =  anzahlSlides-2;
		}
	});	
}
	
function slideshow() { // Blättern starten + Nummer aktuelles Bild erhöhen
	aktuellesBild++;
	bilderBlaettern();
}

var start_slideshow = setInterval( "slideshow()", 5000 ); // Alles x/1000 Sekunden blättern