// >> Hält die Slideshowcontainer eindeutig
var slideshowCounter=0;

//>> Klasse
function Slideshow(container){
	
	var imageArr=[];
	var currentImageNum=0;
	
	var timeTillNext=6000;
	var timeToFade=1000;
	var container=container;
	
	var currentContainerID=0;
	var autoSlide=true;
	var imageObjects=[];
	
	var fdi="";
	var imageDir="../asp_service/upload/header/";
	
	slideshowCounter++;
	var id=slideshowCounter;
	
	var intervalNext=0;
	var loadInterval=0;
	
	/////////////////////////// Start shared functions ///////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////////////////////
	
	//>> ImageArray Setzen
	this.setimageArr=function(imgArr){
		imageArr=imgArr;
	};

	//>> Zeit bis zum laden eines neuen Bildes setzen
	this.setTimeTillNext=function(timeInMs){
		timeTillNext=timeInMs;	
	};
	
	//>> Autoplay an/aus (Standart = an)
	this.setAutoSlide=function(boolean){
		autoSlide=boolean;
	};
	
	//>> Überblendungsdauer setzen
	this.setTimeToFade=function(timeInMs){
		timeToFade=timeInMs;		
	};
	
	//>> Fdi setzen (statt Bildarray-Übergabe)
	this.setFdi=function(fdiurl){
		fdi=fdiurl;	
	};
	
	//>> Nächstes Bild laden
	this.nextImage=function(){
		nextImage();
	};
	
	//>> Vorheriges Bild laden
	this.previousImage=function(){
		previousImage();	
	};
	
	//>> Größe des ImageArrays abfragen (zb. für Nummern-Menü oder Punkte-Menü)
	this.getImageArrLength=function(){
		return imageArr.length;
	};
	
	//>> Gibt die ImageArray zurück, (zb. für Thumpnailmenü)
	this.getImageArr=function(){
		return imageArr;
	};
	
	//>> AutoSlide stoppen
	this.pause=function(){
		autoSlide=false;
		clearInterval(intervalNext);	
	};
	
	//>> AutoSlide starten/vortsetzen
	this.restart=function(){
		autoSlide=true;
		nextImage();		
	};
	
	//>> Starte die Slideshow (Schreibt div's, setzt Syle vom Container, lädt fdi wenn nötig)
	this.start=function(){
	 	start();
	};
	
	//>> Bildordner festlegen
	this.setImageDir=function(dir){
		imageDir=dir;
	};
	
	////////////////////////////////////////////////////////////////////////////////////////////
	/////////////////////////// end shared functions ///////////////////////////////////////////
	
	//>> Generelle Startfunktion für Slideshow
	function start(done){
		if(fdi=="" || done==true){
		
			//>>Schreiben der Containerdivs
			$('#' + container).css('position', 'relative');
			$('#' + container).html("<div id='ss_"+id+"_container_0' style='z-index:2'></div><div id='ss_"+id+"_container_1' style='z-index:3'></div>");
		
			//>> Laden des ersten bildes
			loadImage(currentImageNum);	
			
		}else{
			
			 $.ajax({
				 url : fdi,
				 success : function (data) {
					imageArr=data.split("|");
					start(true);
				 }
			 });
						  
		}
		
	};
	
	//>> Function zum laden eines bildes (Übergabe: Position in Array)
	function loadImage(num){
		
		currentImageNum=num; //>> Setzen von currentImageNum, falls die funktion nicht per AutoSlide aufgerufen wird, damit die Slideshow mit dem richtigen Bild weitermacht
		imageObjects.push(new Image()); //>> Neues Imageobject erstellen
		
		if(imageArr[0]!=""  &&  imageArr[0]!=undefined){
			imageObjects[imageObjects.length-1].src=imageDir+imageArr[num];//>> Setzen der Bildurl
			loadInterval=window.setInterval(showcurrentImage,100);
		};
		
		if(imageObjects.length>2){
			imageObjects.shift(); //>> Löscht ab dem 3. Eintrag immer das 1. Bild (ansonsten keine Ahnung was mit dem Chache passiert
		};
		
	};
	
	
	//>> Anzeigen des gerade geladenen Bildes
	function showcurrentImage(){
	
		if(imageObjects[imageObjects.length-1].complete){
			window.clearInterval(loadInterval);
			var otherDiv="ss_"+id+"_container_"+currentContainerID; //>> altes Div
		
			//>> Zweiten Container finden
			if(currentContainerID == 0){
				currentContainerID=1;
			}else{
				currentContainerID=0;
			};
			
			var currentDiv="ss_"+id+"_container_"+currentContainerID; //>> Neues Div
			
			//>> Zindex ändern	
			$('#' + otherDiv).css('z-index', '2');
			$('#' + currentDiv).css('z-index', '3');
		
			//>> Löschen des im Container vorhandenen Bildes und hinzufügen des neuen
			$('#' + currentDiv).html('');
			$('#' + currentDiv).append(imageObjects[imageObjects.length-1]);
			
			//>> Einblenden des neuen Divs
			$('#' + currentDiv).css('display', 'none');
			$("#"+currentDiv).fadeIn(timeToFade);
			
			//>> Autoslide starten, wenn nötig
			if(autoSlide){
				intervalNext = setInterval( function(){ nextImage(); }, timeTillNext );
			}
			
		}
		
	};	
	
	// >> Nächstes Bild laden
	function nextImage(){
		
		clearInterval(intervalNext); //>> Interval stoppen
		
		if(currentImageNum<imageArr.length-1){
			currentImageNum++;	
		}else{
			currentImageNum=0;	
		};
		
		loadImage(currentImageNum);
		
	};

	
	// >> Vorheriges Bild laden
	function previousImage(){
		
		clearInterval(intervalNext);  //>> Interval stoppen
		
		if(currentImageNum>0){
			currentImageNum--;	
		}else{
			currentImageNum=imageArr.length-1;	
		};
		
		loadImage(currentImageNum);
		
	};
	
}