// JavaScript Document

// Set-up

function swapImages() {
	// put the file names into an array
	var image_fileNames = document.slideshowImages.elements['fileNames'].value.split(",");
	var text_fileNames = document.slideshowTexts.elements['fileNames'].value.split(",");
	// work out file count
	var image_fileCount = image_fileNames.length;
	var text_fileCount = text_fileNames.length;
	// get the position in the array of the file name to update
	var image_fileNumber = document.slideshowImages.elements['fileNumber'].value;
	var text_fileNumber = document.slideshowTexts.elements['fileNumber'].value;
	// set the filename to update
	var image_fileName = "slideshow/" + image_fileNames[image_fileNumber];
	var text_fileName = "slideshow/" + text_fileNames[text_fileNumber];
	// set the position in the array of the next file name - ONLY COUNT IMAGES
	if (Number(image_fileNumber) < Number(image_fileCount-1)) {
		document.slideshowImages.elements['fileNumber'].value = Number(image_fileNumber) + 1;
		document.slideshowTexts.elements['fileNumber'].value = Number(text_fileNumber) + 1;
	} else {
		document.slideshowImages.elements['fileNumber'].value = '';
		document.slideshowTexts.elements['fileNumber'].value = '';
	}
	// get DIV name to update
	var image_fadeIn = document.slideshowImages.elements['divName'].value;
	var image_fadeOut = "";
	var text_fadeIn = document.slideshowTexts.elements['divName'].value;
	var text_fadeOut = "";
	// set DIV name to update next time
	if (image_fadeIn == "slideshow_a") {
		image_fadeOut = "slideshow_b";
		text_fadeOut = "slideshow_d";
		document.slideshowImages.elements['divName'].value = "slideshow_b";
		document.slideshowTexts.elements['divName'].value = "slideshow_d";
	} else {
		image_fadeOut = "slideshow_a";
		text_fadeOut = "slideshow_c";
		document.slideshowImages.elements['divName'].value = "slideshow_a";
		document.slideshowTexts.elements['divName'].value = "slideshow_c";
	}
	// load new image
	if(document.slideshowImages.elements['fileNumber'].value !== '') {
	updateImage(image_fileName,image_fadeIn,image_fadeOut,text_fileName,text_fadeIn,text_fadeOut);
	}
}

// Swap image

function updateImage(image_fileName,image_fadeIn,image_fadeOut,text_fileName,text_fadeIn,text_fadeOut)
{
	newImage = new Image();
	newImage.onload = function() {
		document.getElementById(image_fadeIn).style.background = "url(" + image_fileName + ") no-repeat center center";
	};
	newImage.src = image_fileName;
	newText = new Image();
	newText.onload = function() {
		document.getElementById(text_fadeIn).style.background = "url(" + text_fileName + ") no-repeat center center";
	};
	newText.src = text_fileName;
	// do fade
	var slideshow_opacity = 0;
	var transitionPause = 1 * 500;
	var transtionSpeed = 3 * 600; // !!! not used yet !!!
	setTimeout(function(){fadeIN(slideshow_opacity,image_fadeIn,image_fadeOut,text_fadeIn,text_fadeOut,transtionSpeed,transitionPause)},transitionPause);
}

// track through fade

function fadeIN(slideshow_opacity,image_fadeIn,image_fadeOut,text_fadeIn,text_fadeOut,transtionSpeed,transitionPause){
	// put DIVS onscreen and offscreen DIVs into variables
	var slideshow_image_fadein = document.getElementById(image_fadeIn)
	var slideshow_text_fadein = document.getElementById(text_fadeIn)
	var slideshow_image_fadeout = document.getElementById(image_fadeOut)
	var slideshow_text_fadeout = document.getElementById(text_fadeOut)
	// change slideamount
	if(slideshow_opacity < 100) {
		
		slideshow_opacity = slideshow_opacity + 1;
		
		
		
		setOpacity(slideshow_image_fadeout, 100-Number(slideshow_opacity))
		setOpacity(slideshow_text_fadeout, 100-Number(slideshow_opacity))
		setOpacity(slideshow_image_fadein, slideshow_opacity)
		setOpacity(slideshow_text_fadein, slideshow_opacity)
		setTimeout(function(){fadeIN(slideshow_opacity,image_fadeIn,image_fadeOut,text_fadeIn,text_fadeOut,transtionSpeed,transitionPause)},0);		
	} else {
		slideshow_opacity = 100;
		setOpacity(slideshow_image_fadeout, 100-Number(slideshow_opacity))
		setOpacity(slideshow_text_fadeout, 100-Number(slideshow_opacity))
		setOpacity(slideshow_image_fadein, slideshow_opacity)
		setOpacity(slideshow_text_fadein, slideshow_opacity)
		setTimeout(function(){swapImages()},transitionPause);
	}
}

// apply new values to image

function setOpacity(obj, opacity) {
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;  
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}