function showColorSwatches()
{
	var swatches = document.getElementById('scrollable2');
	var currentOpacity = (swatches.style.opacity) * 1;

	swatches.style.visibility = 'visible';

	if (currentOpacity >= 1) {
		swatches.style.opacity = 1;
		swatches.style.filter = 'alpha(opacity='+(1 * 100)+')';
		return;
	}
	else {
		swatches.style.opacity = currentOpacity + .1;
		swatches.style.filter = 'alpha(opacity='+((currentOpacity + .1) * 100)+')';
		setTimeout(function(){showColorSwatches()},50);
	}
}

function initHero()
{
	setTimeout(function(){rotateHero(1);},5000);
}

function rotateHero(index)
{
	var hideIndex;
	if (index == 0) {
		hideIndex = numHeroImages;	//numHeroImages set in index.jsp (number of images in the hero slideshow)
	}
	else {
		hideIndex = index - 1;
	}
	
	var showImage = document.getElementById('heroImage_' + index);
	var hideImage = document.getElementById('heroImage_' + hideIndex);
	
	showImage.style.zIndex = 2;
	hideImage.style.zIndex = 1;
	
	fadeImageIn(index);
	
	var nextIndex = index + 1;
	if (nextIndex > numHeroImages) {nextIndex = 0;}
	
	rotateTimer = setTimeout( function(){rotateHero(nextIndex)},5000 );
}

function fadeImageIn(index)
{
	var hideIndex;
	if (index == 0) {
		hideIndex = numHeroImages;
	}
	else {
		hideIndex = index - 1;
	}
	
	var showImage = document.getElementById('heroImage_' + index);
	var hideImage = document.getElementById('heroImage_' + hideIndex);
	
	var currentOpacity = (showImage.style.opacity) * 1;
	
	if (currentOpacity >= 1) {
		showImage.style.opacity = 1;
		showImage.style.filter = 'alpha(opacity='+(1 * 100)+')';
		
		hideImage.style.opacity = 0;
		hideImage.style.filter = 'alpha(opacity='+(0 * 100)+')';
		
		return;
	}
	else {
		showImage.style.opacity = currentOpacity + .1;
		showImage.style.filter = 'alpha(opacity='+((currentOpacity + .1) * 100)+')';
		setTimeout(function(){fadeImageIn(index)},50);
	}
}