//Slideshow.js V3.0

//Changes till V2.0
// > Support Image Text (Png)
// > Bugfix single Image (no autoslide!)
//

//Author: Lukas Wallmann
//Copyright @ Micado-IT-Solutions


// >> 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 labelObjects=[];
	
	var fdi="";
	var imageDir="../asp_service/upload/header/";
	
	slideshowCounter++;
	var id=slideshowCounter;
	
	var intervalNext=0;
	var loadInterval=0;
	
	var loadTextImages=false;
	
	var firstImageGotLoaded=false;
	
	var scale="regular" // or 'ScaleToStage'
	
	/////////////////////////// Start shared functions ///////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////////////////////
	
	//>> ImageArray Setzen
	this.setimageArr=function(imgArr){
		imageArr=imgArr;
	};

	//>> Label Laden ein/aus (Standart = aus)
	this.setLoadTextImages=function(boolean){
		loadTextImages=boolean;
	};

	//>> 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;
	};
	
	this.setImageSize=function(string){
		scale=string;
	};
	
	//>> Ãœ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).html("<div id='ss_"+id+"_0' class='container' style='z-index:2'><div id='simg_"+id+"_0' style='z-index:1' class='element'></div><div id='slab_"+id+"_0' style='z-index:2' class='element'></div></div><div id='ss_"+id+"_1' style='z-index:3' class='container'><div id='simg_"+id+"_1' style='position:z-index:1' class='element'></div><div id='slab_"+id+"_1' style='z-index:2' class='element'></div>");
		
		/*	if($.browser.webkit){
				var webkittween="opacity "+(timeToFade/1000)+"s linear	";
			
				document.getElementById("simg_"+id+"_0").style['-webkit-transition'] = webkittween;
				document.getElementById("simg_"+id+"_1").style['-webkit-transition'] = webkittween;
				document.getElementById("slab_"+id+"_0").style['-webkit-transition'] = webkittween;
				document.getElementById("slab_"+id+"_1").style['-webkit-transition'] = webkittween;
				
				$("#slab_"+id+"_1" ).css('opacity','0.0');
				$("#slab_"+id+"_0" ).css('opacity','0.0');
				$("#simg_"+id+"_1" ).css('opacity','0.0');
				$("#simg_"+id+"_0" ).css('opacity','0.0');
			};*/
				
			//>> 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(100,100)); //>> Neues Imageobject erstellen
		labelObjects.push(new Image()); //>> Neues ImageObject für Label
		
	
		
		
		if($.browser.webkit && !firstImageGotLoaded ){
			var ck="micado_"+String(Number(new Date() ));
			imageObjects[imageObjects.length-1].src=imageDir+imageArr[num].split('#')[0]+"?ck="+ck; //>> Setzen der Bildurl für Iphone/Ipdad
		}else{
			imageObjects[imageObjects.length-1].src=imageDir+imageArr[num].split('#')[0]; //>> Setzen der Bildurl
		}
	
	//	imageObjects[imageObjects.length-1].class='slideimage';		

		if(imageArr[num].split("#")[1]=="1" && loadTextImages==true){
		
			labelObjects[labelObjects.length-1].src=imageDir+imageArr[num].split('#')[0]+"_text.png"; //>> Setzen der Bildurl des Labels
			
			
		//	labelObjects[labelObjects.length-1].class='slideimage';
			
		}
		loadInterval=window.setInterval(showcurrentImage,100); //>>LoadStatus abfragen
		
		if(imageObjects.length>3){
			//>> Löscht ab dem 4. Eintrag immer das 1. Bild (ansonsten keine Ahnung was mit dem Chache passiert
			imageObjects.shift(); 
			labelObjects.shift();
		};
		
	};
	
	
	//>> Anzeigen des gerade geladenen Bildes
	function showcurrentImage(){
	
        var toLoad=1;
        var loaded=0;
        if(labelObjects[labelObjects.length-1].src!='' && loadTextImages==true){
        	toLoad=2;
        	if(labelObjects[labelObjects.length-1].complete){
       			loaded++;
       		}
       	}
       	if(imageObjects[imageObjects.length-1].complete){
       		loaded++;
       	}
	
		if(toLoad==loaded){
			firstImageGotLoaded=true;
			window.clearInterval(loadInterval);
			var otherDiv="ss_"+id+"_"+currentContainerID; //>> altes Div
			var otherImg="simg_"+id+"_"+currentContainerID; //>> altes Image Div
			var otherLab="slab_"+id+"_"+currentContainerID; //>> altes Label Div
  
			//>> Zweiten Container finden
			if(currentContainerID == 0){
				currentContainerID=1;
			}else{
				currentContainerID=0;
			};
			
			var currentDiv="ss_"+id+"_"+currentContainerID; //>> Neues Div
			var currentImg="simg_"+id+"_"+currentContainerID; //>> altes Image Div
			var currentLab="slab_"+id+"_"+currentContainerID; //>> altes Label Div
			
			/*if($.browser.webkit){
				//Webkit Tween für Iphone, Ipad, Ipod, Android, Linux, Safari	
				document.getElementById(currentImg).style['-webkit-transition'] = 'none';
				document.getElementById(currentLab).style['-webkit-transition'] = 'none';
				jQuery('#' + currentImg).css('opacity','0');

			}*/
		
			//>> Zindex ändern	
			$('#' + otherDiv).css('z-index', '2');
			$('#' + currentDiv).css('z-index', '3');
		
			//>> Löschen des im Container vorhandenen Bildes und hinzufügen des neuen
			$('#' + currentImg).html('');
			$('#' + currentLab).html('');
			$('#' + currentImg).append(imageObjects[imageObjects.length-1]);
			//>> Wenns ein Label gibt dieses Hinzufügen
			if(labelObjects[labelObjects.length-1].src!=''){
				$('#' + currentLab).append(labelObjects[labelObjects.length-1]);
			}
			
			
			resizeImages()	;
					
			
			//>> Einblenden des neuen Divs
		/*	if($.browser.webkit){
			
				//Webkit Tween für Iphone, Ipad, Ipod, Android, Linux, Safari	
				document.getElementById(currentImg).style['-webkit-transition'] = 'none';
				document.getElementById(currentLab).style['-webkit-transition'] = 'none';

				var webkittween="opacity "+(timeToFade/1000)+"s linear";
				
				document.getElementById(currentImg).style['-webkit-transition'] = webkittween;

				jQuery('#' + currentImg).css('opacity','1.0');
				jQuery('#' + currentLab).css('opacity','1.0');
				
				jQuery('#' + otherImg).css('opacity','0.0');
	
				
			}else{*/
			
				//Andere Browser
				if($.browser.msie){
					//IE Tweens
					$('#' + currentImg).css('display', 'none');
					$("#"+currentImg).fadeIn(timeToFade);
				}else{
					//Tween normal
					$('#' + currentDiv).css('display', 'none');
					$("#"+currentDiv).fadeIn(timeToFade);
				}
				
		//	}
			
			//>> Autoslide starten, wenn nötig
			if(autoSlide && imageArr.length>1 ){
				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);
		
	};
	
}