// JavaScript Document

//var url = "CustomBrandGallery/XML/js_gallery.xml"; // Set this variable in the head section of your page
var slideShowImgs = new Array();
var currImage = 0;
var timer;
var timer2;
var imageID = "slideShow";	// This is the ID you wanna give to your <img> tag
var imageCache = new Array();	// Array to cache images, this is not used for anything else

var paused = false; // If true, it means that the user paused the animation

//onload = getData(url, initSlide); // Add this event to the body of the html for it to work on IE

function initSlide() {
	if(ajaxRequest.readyState == 4) {
		xmldata = ajaxRequest.responseXML;
		buildSlideShow();
	}
}	


function buildSlideShow() {		
		
		// Store all images from XML document in an array
		var slideShow = xmldata.getElementsByTagName("img");
		
		var gallery = xmldata.getElementsByTagName("gallery")[0];
		path = gallery.getAttribute("path");
		
		// Image sources to an predefined array
		for(i=0; i<slideShow.length; i++) {
			var _Src = slideShow[i].getAttribute("src");
			slideShowImgs[i] = path + _Src;
			}
		
		// Cache the images
		for(j=0; j<slideShowImgs.length; j++) {
			imageCache[j]= new Image();
			imageCache[j].src = slideShowImgs[j];
		}

		
		// Set initial opacity for the images
		var imgBottom = document.getElementById("slideShow");
		imgBottom.style.opacity = 0;	// Safari and modern browsers
		imgBottom.style.MozOpacity = 0; // Firefox 1.5 and earlier
			if(document.all) {
				imgBottom.style.filter="Alpha(opacity=0)";	// Explorer
			}	

//		document.getElementById(imageHolder).appendChild(imgBottom);
	
		transition();
}


var op = 0; // Opacity value, I use a number instead of getting opacity value from image to minimize browser processing
var fading = false; // This variable is used in the transition function and lets me know if the image is fading or appearing

function transition() {

	// Start the timer
	if(!timer) {timer = setInterval("transition()", 100);}
	
	// Put image into a variable and if it doesn't have its source set yet
	// call the function switchImages to make the first image appear
	var _img = document.getElementById(imageID);
	//if(!_img.src) {switchImages();}		
	
	// Checks if the image is transparent and it's not fading so it begins to appear
	if(op<1 && fading===false) {
		op = op + 0.1;
		_img.style.opacity = (_img.style.opacity * 1) + 0.1;								// Modern browsers opacity
		_img.style.MozOpacity = (_img.style.MozOpacity * 1) + 0.1;						// Firefox opacity ( 1.5 and earlier )
		if(document.all) {
			_img.filters.alpha['opacity'] =(_img.filters.alpha['opacity'] * 1) + 10;	// IE opacity
		}
			
			if(op>=1) {
				fading = true;
				op = 1;			
				if(timer) {
					clearInterval(timer);
					timer = null;}
				
					if(paused === false){ // If paused is true, the user stopped the animation. Note, this time stays unless cleared in the pause function
						timer2 = setTimeout("transition()", 3000); // Here is when you control the time the image remains visible
					}
				}
	}
	
	if(op>0 && fading===true) {
		op = op - 0.1;
		_img.style.opacity = (_img.style.opacity * 1) - 0.1;
		_img.style.MozOpacity = (_img.style.MozOpacity * 1) - 0.1;							 // Firefox 1.5 and earlier
		if(document.all) {
			_img.filters.alpha['opacity'] =(_img.filters.alpha['opacity'] * 1) - 10;
		}
			if(op<=0) { op = 0;}
	}
	
	if(op==0 && fading==true) {
		fading = false;
		switchImages();
	}
	
}

function switchImages() {

	var _img = document.getElementById(imageID);

	_img.src = slideShowImgs[currImage];
	currImage = currImage + 1;
	if(currImage >= slideShowImgs.length) {currImage = 0;}
}

function pause() {
	paused = true;
	if(timer2) { // Kills the hold timer
		clearTimeout(timer2);
		timer2 = null;
		}		

//	var button =document.getElementById("playPause");
//	button.onclick = play;
//	button.innerHTML = "PLAY";
}

function play() {
	paused = false;
	if(!timer) {timer = setInterval("transition()", 50);}
//	var button =document.getElementById("playPause");
//	button.onclick = pause;
//	button.innerHTML = "PAUSE";
}


function previousImg() {
	if(timer2) {clearTimeout(timer2);}
	currImage = currImage - 2;
	if(currImage < 0) {currImage = 0;}
	transition();
}

function nextImg() {
	if(timer2) {clearTimeout(timer2);}
	transition();
}

function gotoImg() {
	pause();
	var objID = this.getAttribute("id");
	
	if(timer2) {clearTimeout(timer2); timer2 =  null;}

	currImage = objID;
	transition();
}