//	Script to show photos/pictures/images in a nice slideshow with fade effects
//	Optional: show controlls to jump to the next or previous image when hovered
//  Version 1.1
//	Created by Paka, latest version available @ http://polsson.co.cc
//	Feel free to remove this text if you want... 
//	Cheers! 

function imgfade(){
	
	var divname = document.getElementById("thepictures"); 	
	var image = divname.getElementsByTagName("li");			
	divname.style.display = "none"; 						
	var NumberOfPics = image.length;						
	NumberOfPics = NumberOfPics-1;   	
	
	// Ändra inställningarna här! 
	
	var WaitTime = 5000;	// Tid att visa bilderna i ms (5000 = 5 sekunder)
	var PicToShow = 0;		// Ställ in den bild som visas först, nr 0 är första
	var FadeSpeed = 5;		// Ställ in hur många millisekunder det ska gå mellan varje uttoningssteg, lägre ger snabbare uttoning.
	var FadeStep = 2;		// Ställ in hur många % som ska tonas ut varje gång, hur ofta det sker ställs in i variabeln ovan.
	var ImgHeight = 300;	// Ställ in hödjden på bilderna, de bör ha samma!
	var ImgWidth = 400;		// Ställ in bredden , kan vara bredare än bilderna, men inte smalare!
	var prevImgArrow = "images/arrowleft.gif"; //adress till vänsterpilen
	var nextImgArrow = "images/arrowright.gif"; //adress till högerpilen
	var showControlls = "nej"; // Visa kontroller när man håller musen över, (ja, om de ska visas)
	var imgChangeTechnique = "fade";	// Kan vara fade eller slide, 
	
	// Sluta ändra här!
	
	//controlls
	var controlls = document.getElementById("controlls");
	controlls.style.display = "none";
	controlls.style.height = "27px";
	controlls.style.width = ImgWidth+"px";
	controlls.style.position = "relative";
	controlls.style.top = "-27px";
	controlls.style.backgroundColor = "#000000";
	controlls.style.opacity ="0.8";
	controlls.style.filter= "alpha(opacity=80)";
	controlls.style.zIndex = 2;
	controlls.innerHTML ="<a href=\"javascript:prevImg()\"><img src=\""+prevImgArrow+"\" alt=\"Previous\" style=\"float:left; border:0px solid #000;\" /></a><a href=\"javascript:nextImg()\"><img src=\""+nextImgArrow+"\" alt=\"Next\" style=\"float:right; border:0px solid #000;\" /></a>";
	//controlls
	
	document.getElementById("slideshowcontainer").style.width = ImgWidth+"px";
	document.getElementById("slideshowcontainer").style.height = ImgHeight+"px";
	document.getElementById("slideshowcontainer").style.marginBottom = "20px";
	if (showControlls=="ja"){
		document.getElementById('slideshowcontainer').onmouseover = new Function("showControlls()");
		document.getElementById('slideshowcontainer').onmouseout = new Function("hideControlls()");
	}
	document.getElementById("slideshow").style.zIndex = 1;
	document.getElementById("slideshow").style.position = "absolute";
	document.getElementById("nextpic").style.zIndex = 0;
	document.getElementById("nextpic").style.position = "absolute";
	var divToShowIn= document.getElementById("slideshow");	
	divToShowIn.title = PicToShow -1; 		// for the controlls
	var mFadeStep = FadeStep/100;
	if (imgChangeTechnique == 'fade'){
		runFade(divToShowIn,NumberOfPics,PicToShow,image,WaitTime,FadeSpeed,FadeStep,mFadeStep);
	}
	else if (imgChangeTechnique == 'slide'){
		PicToShow = PicToShow + 1;
		document.getElementById('slideshowcontainer').style.overflow = 'hidden';
		document.getElementById('slideshowcontainer').style.position = 'relative';	// fix for IE overflow hidden
		runSlide(divToShowIn,NumberOfPics,PicToShow,image,WaitTime,ImgWidth);
	}
}

function runFade(divToShowIn,NumberOfPics,PicToShow,image,WaitTime,FadeSpeed,FadeStep,mFadeStep){
	divToShowIn.style.opacity = 1;
	divToShowIn.style.filter= "alpha(opacity=100)";							
	var PreloadPic=++divToShowIn.title;
	if (PreloadPic>NumberOfPics){PreloadPic = 0;}  			
	document.getElementById("nextpic").innerHTML = image[PreloadPic].innerHTML;
	var opac = 100;
	fadeout(divToShowIn,opac,FadeSpeed,FadeStep,mFadeStep);									
	divToShowIn.innerHTML = image[PicToShow].innerHTML;
	divToShowIn.title = PreloadPic; 	
	PicToShow = PreloadPic;	
	setTimeout(function() {runFade(divToShowIn,NumberOfPics,PicToShow,image,WaitTime,FadeSpeed,FadeStep,mFadeStep);}, WaitTime);
}

function fadeout(bild,opac,FadeSpeed,FadeStep,mFadeStep){
	if (bild.style.opacity>0){
		bild.style.opacity = bild.style.opacity - mFadeStep;
		opac=opac-FadeStep;
		bild.style.filter= "alpha(opacity=" + opac + ")";
		setTimeout(function() {fadeout(bild,opac,FadeSpeed,FadeStep,mFadeStep);}, FadeSpeed);
	}
}

function runSlide(divToShowIn,NumberOfPics,PicToShow,image,WaitTime,ImgWidth){
	divToShowIn.style.zIndex = '1';
	document.getElementById("nextpic").style.zIndex = '2';
	document.getElementById("nextpic").style.position = 'relative';
	document.getElementById("nextpic").style.left = ImgWidth + 'px';
	var PreloadPic=++divToShowIn.title;
	if (PreloadPic>NumberOfPics){PreloadPic = 0;}  			
	document.getElementById("nextpic").innerHTML = image[PreloadPic].innerHTML;
	slidePosition = ImgWidth;
	slideIn(divToShowIn,ImgWidth,slidePosition);
	divToShowIn.innerHTML = image[PicToShow].innerHTML;
	divToShowIn.title = PreloadPic; 	
	PicToShow = PreloadPic;	
	setTimeout(function() {runSlide(divToShowIn,NumberOfPics,PicToShow,image,WaitTime,ImgWidth);}, WaitTime);	
}

function slideIn(divToShowIn,ImgWidth,slidePosition){
	if (slidePosition > 0){
		slidePosition = slidePosition -2;
		document.getElementById("nextpic").style.left = slidePosition+ 'px';
		setTimeout(function() {slideIn(divToShowIn,ImgWidth,slidePosition);},2);
	}
	
}

function showControlls(){
document.getElementById("controlls").style.display = "block";
}

function hideControlls(){
document.getElementById("controlls").style.display = "none";
}

function nextImg(){
	var currentImg = document.getElementById("slideshow").title;
	var NumberOfPics = document.getElementById("thepictures").getElementsByTagName("li").length-1;
	if (currentImg==NumberOfPics){
		var ShowImg = 0;
	}
	else{
		var ShowImg = ++currentImg;
	}
	document.getElementById("nextpic").innerHTML = document.getElementById("thepictures").getElementsByTagName("li")[ShowImg].innerHTML;
	document.getElementById("slideshow").title = ShowImg;
}

function prevImg(){
	var currentImg = document.getElementById("slideshow").title;
	var NumberOfPics = document.getElementById("thepictures").getElementsByTagName("li").length-1;
	if (currentImg==0){
		var ShowImg = NumberOfPics;
	}
	else{
		var ShowImg = currentImg-1;
	}
	document.getElementById("nextpic").innerHTML = document.getElementById("thepictures").getElementsByTagName("li")[ShowImg].innerHTML;
	document.getElementById("slideshow").title = ShowImg;
}