var numSlides  = 6; // no. of slides. make sure this is updated whenever slides are added or removed.

var activeId   = 'slide1'; // this is the id of the first slide to be shown
var curActiveBox  = 'box1'; // this is the id of first slide button to be highlighted

var maxOpacity = 10;
var minOpacity = 0.09;
var slideIndex = 0;
var eids, eid, showObj, hideObj, decVal, incVal, newActiveBox;

function rs_show(eid) {
	clearTimeout(isPlay);
	showSlide(eid);
}

function showSlide(eid) {
	if (eid != activeId) {
		decVal   = maxOpacity;
		incVal   = minOpacity;
		showObj  = document.getElementById(eid);
		hideObj  = document.getElementById(activeId);
		activeId = eid;
		
		// highlight active box
		numId = eid.substr(eid.length - 1, 1);
		newActiveBox = 'box' + numId;		
		var objInactiveBox = document.getElementById(curActiveBox);
		var objActiveBox   = document.getElementById(newActiveBox);
		objInactiveBox.style.backgroundColor = '#790A0A';
		objActiveBox.style.backgroundColor = '#FDC900';
		curActiveBox = newActiveBox;
		
		// switch slides
		switchSlides();		
	}
}

function switchSlides() {
	decVal = decVal - 0.3;
	incVal = incVal + 0.3	
	if (decVal > minOpacity && incVal < maxOpacity) {
		setOpacity(showObj, incVal);
		setOpacity(hideObj, decVal);
		showObj.style.zIndex = '10';
		hideObj.style.zIndex = '0';
		isSwitch = setTimeout("switchSlides()", 1);
	} else {
		clearTimeout(isSwitch);
	}
}

function setOpacity(obj, value) {
	obj.style.opacity = value / 10;
	obj.style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function playSlides_init() {
	eids = new Array(numSlides);
	for (i = 0; i < numSlides; i++) {
		eids[i] = 'slide' + (i + 1);
	}
	document.getElementById(curActiveBox).style.backgroundColor = '#FDC900';
	document.getElementById(activeId).style.zIndex = '10';
	playSlides();	
}

function playSlides() {	
	showSlide(eids[slideIndex]);	
	slideIndex++;	
	isPlay = setTimeout("playSlides()", 5000);	
	if (slideIndex >= numSlides) slideIndex = 0;
}

// hide other slides. show slide 1 on load
function hideSlides() {
	for (i = 2; i <= numSlides; i++) {
		var objSlide = document.getElementById('slide' + i);
		setOpacity(objSlide, minOpacity);		 
		objSlide.style.zIndex = '0';		
	}
}