// JavaScript Document
var currentImageID;
var loadedImages;
var totalWidth;
var slides;

function createSlideshow(images){
	//werte für neue sliodeshow reseten
	loadedImages = 0;
	totalWidth = 0;
	currentImageID = 0
	slides = new Array();
	slides = images;
	$('#slideshow').stop();
	$('#slideshowOverlayNav').children().remove();
	$('#slideshow li').remove();
	$('#slideshow').css({left: 0});
	$('#slideshow').fadeTo(0, 0);
	$('#slideshowNav').children().remove();
	$('#slideshowNav').append("<span id='sliderCounter'>loading...</span>");
	
	loadPhoto();
}

function loadPhoto()
{
	var img = new Image();
	var image = slides[loadedImages][0];

	$(img).load(function(){
		//gesamtlänge der Slideshow
		totalWidth += this.width;
		
		//geladenes foto einbinden
		$('#slideshow').append("<li><p class='firstline'>"+slides[loadedImages][1]+"</p><p>"+slides[loadedImages][2]+"</p></li>");
		$('#slideshow li:last').prepend($(this));
		$(this).attr("id", "image"+loadedImages);
		
		//position des fotos abspeichern
		slides[loadedImages][3] = $(this).position().left;	
		loadedImages++;
		
		//nächstes photo laden
		if(loadedImages < slides.length) { 
			loadPhoto();
			if( slides.length >=3 && loadedImages == 3){
				startSlideShow();
			}
		}else{ 
			if( slides.length <=3){
				startSlideShow();
			}
		};
	});
	
	$(img).attr('src', 'photos/'+image);
}

//zum vorherigen bild silden
$(".prevImage").live('click', function(){
	//nur ausführen wenn nicht bereits die slideshow bewegt wird
	if(!$('#slideshow').is(":animated")){
		//letzte position abspeichern
		var currentPosX = slides[currentImageID][3];
		
		currentImageID--;
		
		//differenz zum letzten bild berechnen
		var diffX
		if(currentImageID < 0){
			//zum letzten bild sliden
			//diffX = -slides[slides.length-1][3];
			//currentImageID = slides.length -1;
			currentImageID=0;
		}else{
			diffX = Math.abs(currentPosX - slides[currentImageID][3]);
		}
		moveListe(diffX);
		updateCounter();
	}
});



//zum nächsten bild silden
$(".nextImage").live('click', function(){
	//nur ausführen wenn nicht bereits die slideshow bewegt wird
	if(!$('#slideshow').is(":animated")){
		//letzte position abspeichern
		var currentPosX = slides[currentImageID][3];
		
		currentImageID++;
		
		//differenz zum letzten bild berechnen
		var diffX
		if(currentImageID >= slides.length){
			//wieder zum ersten bild sliden
			diffX = currentPosX;
			currentImageID = 0;
		}else{
			diffX = -Math.abs(currentPosX - slides[currentImageID][3]);	
		}
		moveListe(diffX);
		updateCounter();
	}
});

function moveListe(diffX){
	//liste schieben
	$('#slideshow').animate(					
		{"left": "+="+diffX},
		{	
			duration: 1200,
			easing: 'easeOutExpo',
			complete: function() { 
			}
		} 
	);
}

function startSlideShow(){
	$('#slideshowOverlayNav').append("<div class = 'prevImage' id= 'prevImageOverlay'></div><div class = 'nextImage' id= 'nextImageOverlay'></div>");
	$('#slideshowNav').fadeTo(0, 0);
	updateCounter();
	$('#slideshowNav').prepend("<a href='#' class ='prevImage' alt='previous Image'>&laquo; </a>");
	$('#slideshowNav').append("<a href='#' alt='next Image' class = 'nextImage'> &raquo;</a>");
	$('#slideshowNav').fadeTo(400, 1);
	$('#slideshow').fadeTo(400, 1);
	
}

function updateCounter(){
	$('#sliderCounter').text(currentImageID+1+"/"+slides.length);
}