/**
 * @author Tan
 */
var element = null; //Top image.
var element2 = null; //Bottom image.
var url = '/wp-content/themes/master/images/img'; //Image URL and image name w/o the image number.
var topImage = "invisible"; //Current visibility status of the top image.
var nextSlideInQueue = 2; //The number of the next slide in the queue.
var opacityLevel = 0;
var imageType = '.jpg'; //Set the image file extension.
var numberOfSlides = 4; //Set the max number of slides. Include corresponding number of images [image name][1] - [image name][x]
var slideTransitionSpeed = 4000; //Speed in milliseconds.
var animationSpeed = 40; //Speed in milliseconds.
var animationObject = null; 


/*
 * Fadein()
 * ========
 * Fades the top image to visibility 1.
 */
function fadein() {
	opacityLevel += .1;
	z = opacityLevel*100;
	element.style.opacity = opacityLevel;
	element.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=' + z + ')';
	if (element.style.opacity < 1) {
		animationObject = setTimeout(fadein,animationSpeed);
	} else {
		opacityLevel = 1;
		increment();
		element2.src = url + nextSlideInQueue + imageType;
		animationObject = setTimeout(swap,slideTransitionSpeed);
	}
}

/*
 * Fadeout()
 * =========
 * Fades the top image to visibility 0
 */
function fadeout() {
	opacityLevel -= .1;
	z = opacityLevel*100;
	element.style.opacity = opacityLevel;
	element.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=' + z + ')';
	if (element.style.opacity > 0) {
		animationObject = setTimeout(fadeout,animationSpeed);
	} else {
		opacityLevel = 0;
		increment();
		element.src = url + nextSlideInQueue + imageType;
		animationObject = setTimeout(swap,slideTransitionSpeed);
	}
}

/*
 * Increment()
 * ===========
 * Sets the number of the next slide in the sequence.
 */
function increment() {
	if (nextSlideInQueue < numberOfSlides) {
		nextSlideInQueue++;
	} else {
		nextSlideInQueue = 1;
	}
}

/*
 * Swap()
 * ======
 * Moves indicator button to correspond with the displayed image.
 * Sets the visibility status of the top image and chooses the proper animation based on the visibility status.
 */
function swap() {	
	for(i = 1; i < (numberOfSlides + 1); i++) {
		indicator = 'indicator' + i;
		if (i == nextSlideInQueue) {
			document.getElementById(indicator).style.backgroundPosition = "bottom";
		} else {
			document.getElementById(indicator).style.backgroundPosition = "top";
		}
	}
	
	if (topImage == "invisible") {
		topImage = "visible";
		fadein();
	} else {
		topImage = "invisible";
		fadeout();
	}
}

/*
 * Init()
 * ======
 * Initiates the animation sequence.
 * Assign variable names to the elements to be manipulated.
 */
function init() {
	element = document.getElementById("top");
	element2 = document.getElementById("bottom");
	element.style.opacity = 0;
	element.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
	animationObject = setTimeout(swap,slideTransitionSpeed);
}

/*
 * Transition()
 * ============
 * Controls the manual transitioning of images in the banner.
 */
function transition(slideNumber) {
	if (opacityLevel < 1 && opacityLevel > 0) {
		return;
	}
	
	clearTimeout(animationObject);
	
	nextSlideInQueue = slideNumber; 
	
	if (opacityLevel == 1) {
		element2.src = url + nextSlideInQueue + imageType;
	} else if (opacityLevel == 0) {
		element.src = url + nextSlideInQueue + imageType;
	}
	
	swap();
}