//Slideshow.js V3.0

// >> 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 effekt='fade';
	var layout='base';
	var thumptop=0;
	var loadTextImages=false;

	
	var tweenInter=window.setInterval(tween,30);
	var tweenfrom=0;
	var tx=0;
	
	/////////////////////////// Start shared functions ///////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////////////////////
	
	
	
	this.thumpsUp=function(){
		thumptop+=320;
	}
	
	this.thumpsDown=function(){
		thumptop-=320;
	}
	

	function tween(){
	
		var max=-imageArr.length*80+400;
		
		if(thumptop<max){
 			thumptop=max;
 		}
 		
 		if(thumptop>0){
 			thumptop=0;
 		}
		
		var step=Math.ceil(Math.abs(tx-thumptop)/7);
		
		if(thumptop>tx){
			tweento=tx+step;
		}else{
			tweento=tx-step;
		}
		if(tx!=tweento){
			document.getElementById("thumps").style.top=tweento+"px";
			tx=tweento;
		}
	}
	
	
	this.setLayout=function(l){
		layout=l;
	}
	
	//>> 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;
	};
	
	
	//>> Ü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;
	};
	
	//>> Effekt Möglichkeiten (slide,fade) standard=fade
	this.setEffect=function(ef){
		effekt=ef;
	};
	
	//>> 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;
	};
	
	this.loadImage=function(n){
		clearInterval(loadInterval);
		clearInterval(intervalNext);
		loadImage(n);
	}
	
	////////////////////////////////////////////////////////////////////////////////////////////
	/////////////////////////// end shared functions ///////////////////////////////////////////
	
	//>> Generelle Startfunktion für Slideshow
	function start(done){
		if(fdi=="" || done==true){
		
			//>>Schreiben der Containerdivs
			var containerHTML="<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></div>";		
		
			if(layout=="thumps"){
			
				var thumptemp="";
				var thumpnav="<a class='thumpNavTop' href='javascript:header.thumpsUp();'><img src='../images/up.png' alt='' height='10' width='34' border='0'></a>";
			 	thumpnav+="<a class='thumpNavBottom' href='javascript:header.thumpsDown();'><img src='../images/down.png' alt='' height='10' width='34' border='0'></a>";
				
				for(var i=0; i<imageArr.length; i++){
					thumptemp+="<div class='thumpnail'><a id='th_"+i+"' href='javascript:header.loadImage("+i+")'><img  src='"+imageDir+"small_"+imageArr[i]+"' width='105' height='70'></a></div>";
				}
			
				containerHTML+="<div id='headerThumpnav'><div id='thumpnav'>"+thumpnav+"</div><div id='thumpcontainer' style='postion:relative'><div id='thumps' style='position:absolute; top:0px; left:0px'>"+thumptemp+"</div></div></div>";
			}
			jQuery('#' + container).html(containerHTML);
			
		
		
			if(jQuery.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;
				
				jQuery("#slab_"+id+"_1" ).css('opacity','0.0');
				jQuery("#slab_"+id+"_0" ).css('opacity','0.0');
				jQuery("#simg_"+id+"_1" ).css('opacity','0.0');
				jQuery("#simg_"+id+"_0" ).css('opacity','0.0');
				
			}
		
			//>> Laden des ersten bildes
			loadImage(currentImageNum);	
			for(var i=1; i<imageArr.length; i++){
				$('#th_'+i).css({ opacity: 0.5 });
			}
		}else{
			
			 jQuery.ajax({
				 url : fdi,
				 success : function (data) {
					imageArr=data.split("|");
					start(true);
				 }
			 });
						  
		}
		
		
		
		
	};
	
	//>> Function zum laden eines bildes (Übergabe: Position in Array)
	function loadImage(num){
		//document.getElementById("th_"+currentImageNum).getElementsByTagName('img')[0].style.height='90px';
		$('#th_'+currentImageNum).css({ opacity: 0.5 });
		currentImageNum=num; //>> Setzen von currentImageNum, falls die funktion nicht per AutoSlide aufgerufen wird, damit die Slideshow mit dem richtigen Bild weitermacht
		$('#th_'+currentImageNum).css({ opacity: 1.0 });

		imageObjects.push(new Image()); //>> Neues Imageobject erstellen
		labelObjects.push(new Image()); //>> Neues ImageObject für Label
		if(layout!="thumps"){
			imageObjects[imageObjects.length-1].src=imageDir+imageArr[num].split('#')[0]; //>> Setzen der Bildurl
		}else{
			imageObjects[imageObjects.length-1].src=imageDir+"marke_"+imageArr[num].split('#')[0]; //>> Setzen der Bildurl
		}
		
		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
			
			 //>> IE Transparenzbugfix
			if(jQuery.browser.msie){
				labelObjects[labelObjects.length-1].style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + labelObjects[labelObjects.length-1].src + "')";
			}
			
		}
		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){
		
			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
		
			//>> Zindex ändern	
			jQuery('#' + otherDiv).css('z-index', '2');
			jQuery('#' + currentDiv).css('z-index', '3');
		
			//>> Löschen des im Container vorhandenen Bildes und hinzufügen des neuen
			jQuery('#' + currentImg).html('');
			jQuery('#' + currentLab).html('');
			jQuery('#' + currentImg).append(imageObjects[imageObjects.length-1]);
			//>> Wenns ein Label gibt dieses Hinzufügen
			if(labelObjects[labelObjects.length-1].src!=''){
				jQuery('#' + currentLab).append(labelObjects[labelObjects.length-1]);
			}
			
			if(effekt=='fade'){
				//>> Einblenden des neuen Divs
				if(jQuery.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');
					jQuery('#' + currentLab).css('opacity','0');
					
					var webkittween="opacity "+(timeToFade/1000)+"s linear";
					
					document.getElementById(currentImg).style['-webkit-transition'] = webkittween;
					document.getElementById(currentLab).style['-webkit-transition'] = webkittween;
		
					jQuery('#' + currentImg).css('opacity','1.0');
					jQuery('#' + currentLab).css('opacity','1.0');
					
					jQuery('#' + otherImg).css('opacity','0.0');
					jQuery('#' + otherLab).css('opacity','0.0');
					
				}else{
				
					//Andere Browser
					if(jQuery.browser.msie){
					
						//IE Tweens
						jQuery('#' + currentImg).css('display', 'none');
						jQuery('#' + currentLab).css('display', 'none');
						jQuery("#"+currentImg).fadeIn(timeToFade);
						jQuery("#"+currentLab).fadeIn(timeToFade);		
					}else{
					
						//Tween normal
						jQuery('#' + currentDiv).css('display', 'none');
						jQuery("#"+currentDiv).fadeIn(timeToFade);
						
					}
					
		
				}
			}
			
			
			if(effekt=='slide'){
				jQuery('#' + currentImg).css('margin-left', '980px');
				jQuery('#' + currentLab).css('margin-left', '980px');
				jQuery('#' + currentImg).css('opacity', '0');
				$('#' + currentImg).animate({
				   	marginLeft: "0px",
				   	opacity:1
				  },1200, function() {
	 				
 				 });
				
				 $('#' + currentLab).animate({
				 	  	marginLeft: "0px",
				 	  	opacity:1
				 },1400);
				  
			//jQuery("#"+currentDiv).fadeIn(timeToFade);	
			}
			
			
			
			thumptop=currentImageNum*-80;
				
			if(imageArr.length>1){
				document.getElementById("headernav").style.display="block";
			} 
			
			//>> Autoslide starten, wenn nötig
			if(autoSlide && imageArr.length>1 ){
				intervalNext = setInterval( function(){ nextImage(); }, timeTillNext );
			}
			
			
		}
		
	};	
	
	
	function isiPhone(){
	    return (
	        (navigator.platform.indexOf("iPhone") != -1) ||
	        (navigator.platform.indexOf("iPod") != -1)
	    );
	}
	
	// >> Nächstes Bild laden
	function nextImage(){
		
		clearInterval(intervalNext); //>> Interval stoppen
		tn=currentImageNum
		if(currentImageNum<imageArr.length-1){
			tn++;	
		}else{
			tn=0;	
		};
		
		loadImage(tn);
		
	};

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