var currentMilestone = 0;
var altArray = '';
var interValue, opacity = 0;
function milestone(direction) {
	if (direction == '+') {
		if (currentMilestone == 9) {
			return false;
		} 
		
		if (document.getElementById('previousMilestone').src.indexOf('-off') != -1) {
			document.getElementById('previousMilestone').src = document.getElementById('previousMilestone').src.replace('-off', '');
			document.getElementById('previousMilestone').parentNode.style.cursor = 'pointer';
		}
		
		currentMilestone ++;

		if (currentMilestone == 9) {
			document.getElementById('nextMilestone').src = document.getElementById('nextMilestone').src.replace('arrow-next.gif', 'arrow-next-off.gif');
			document.getElementById('nextMilestone').parentNode.style.cursor = 'default';
			clearInterval(slideshowInterval);
		} else {
			var img = new Image();
			img.src = levelString + 'images/milestone-' + currentMilestone + '.gif';
		}


	} else {
		if (currentMilestone == 0) {
			return false;
		} 
		
		if (document.getElementById('nextMilestone').src.indexOf('-off') != -1) {
			document.getElementById('nextMilestone').src = document.getElementById('nextMilestone').src.replace('-off', '');
			document.getElementById('nextMilestone').parentNode.style.cursor = 'pointer';
		}
		
		currentMilestone --;

		if (currentMilestone == 0) {
			document.getElementById('previousMilestone').src = document.getElementById('previousMilestone').src.replace('arrow-previous.gif', 'arrow-previous-off.gif');
			document.getElementById('previousMilestone').parentNode.style.cursor = 'default';
		}  else {
			var img = new Image();
			img.src = levelString + 'images/milestone-' + currentMilestone + '.gif';
		}
	}
	
	
		
	if (opacity == 0) {
		opacity = 1;
	} else {
		stopSlide();
	}
	
	document.getElementById('milestoneBackImage').src = levelString + 'images/milestone-' + currentMilestone + '.gif';
	document.getElementById('milestoneImage').alt = altArray[currentMilestone];
	
	interValue = setInterval('slide()', 50);
	
	if (currentMilestone == 9) {
		document.getElementById('milestoneImage').useMap = '#milestoneMap';
	} else {
		document.getElementById('milestoneImage').useMap = '';
	}
	
}
function slide() {
	opacity -= 0.1;
	if (document.getElementById('milestoneImage').style.opacity != null) {
		document.getElementById('milestoneImage').style.opacity = opacity;
	} else {
		document.getElementById('milestoneImage').style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
	}
	 
	 if	(opacity <= 0) {
		stopSlide();
	 }
}
function stopSlide() {
	clearInterval(interValue);
	document.getElementById('milestoneImage').src = document.getElementById('milestoneBackImage').src ;
	if (document.getElementById('milestoneImage').style.opacity != null) {
		document.getElementById('milestoneImage').style.opacity = 1;
	} else {
		document.getElementById('milestoneImage').style.filter = 'alpha(opacity=100)';
	}

	opacity = 1;
}

var slideshowInterval = 0;
function slideshow() {
	document.getElementById('milestoneImage').src = levelString + 'images/milestone-0.gif';
	document.getElementById('milestoneBackImage').src = document.getElementById('milestoneImage').src ;
	document.getElementById('milestoneBackImage').src = '' ;

	if (document.getElementById('milestoneImage').style.opacity != null) {
		document.getElementById('milestoneImage').style.opacity = 0.5;
	} else {
		document.getElementById('milestoneImage').style.filter = 'alpha(opacity=50)';
	}
	
	clearInterval(slideshowInterval);

	setTimeout(function() {
							if (document.getElementById('milestoneImage').style.opacity != null) {
								document.getElementById('milestoneImage').style.opacity = 1;
							} else {
								document.getElementById('milestoneImage').style.filter = 'alpha(opacity=100)';
							}
							document.getElementById('milestoneBackImage').src = document.getElementById('milestoneImage').src ;
							
							setTimeout(function() {
													currentMilestone = 0;
													milestone("+");
													slideshowInterval = setInterval('milestone("+")', 10000); // 10 seconds
													}, 2500);

						}, 250);
}