var bannerRotateRate = 4000; //miliseconds
var bannerFadeDuration = 0.3; //seconds
var imageDirA = "/dynamic/pages/";
var imageDirB = "/Content/images/";
var img;

var totalSlideCount = 3;
var currentBannerSlide = 1;

var bannerCtlImgPaths = new Array(3);
bannerCtlImgPaths[0] = '/Content/images/bannerCtl0.jpg';
bannerCtlImgPaths[1] = '/Content/images/bannerCtl1.jpg';
bannerCtlImgPaths[2] = '/Content/images/bannerCtl2.jpg';

var images = new Array(3);
var links = new Array(3);
var alts = new Array(3);

images[0] = 'banner_images_image_en_24.jpg';
links[0] = '';
alts[0] = 'International Museum of Women - Photographer: Paola Gianturco';

images[1] = 'banner_images_image_en_25.jpg';
links[1] = '';
alts[1] = 'International Museum of Women - Marie Ange Bordas / www.displacements.info';

images[2] = 'banner_images_image_en_26.jpg';
links[2] = '';
alts[2] = 'International Museum of  Women - Photographer: Paola Gianturco';

for (var i=0; i < totalSlideCount; i++) {
	img = new Image();
	img.src = imageDirA + images[i];
}

var bannerCtlDiv = document.createElement('div');

var bannerCtl = document.createElement('img');
//bannerCtl.src = imageDirB + 'bannerCtlPause.jpg';
bannerCtl.src = "/Content/images/bannerCtlPause.jpg";
bannerCtl.onclick = bannerCtlPause;
bannerCtl.id = 'bannerCtlPause';
bannerCtlDiv.appendChild(bannerCtl);

for (i=0; i < totalSlideCount; i++) {
	bannerCtl = document.createElement('img');
	//bannerCtl.src = imageDirB + 'bannerCtl' + i + '.jpg';
	bannerCtl.src = bannerCtlImgPaths[i];
	bannerCtl.className = 'bannerCtlJump';
	bannerCtl.iSlideId = i;
	bannerCtl.onclick = function() {
		if (!bannerCtlPaused) {
			bannerCtlPause();
		}
		currentBannerSlide = this.iSlideId
		bannerCtlSwitch();
	}
	bannerCtlDiv.appendChild(bannerCtl);
}

document.getElementById('slideControls').appendChild(bannerCtlDiv);

var bannerCtlPaused = false;
function bannerCtlPause() {
	bannerCtlPaused = !bannerCtlPaused;
	document.getElementById('bannerCtlPause').src =
		(bannerCtlPaused)? imageDirB + 'bannerCtlPlay.jpg' :
		imageDirB + 'bannerCtlPause.jpg';
}

function bannerCtlLoad() {
	document.getElementById('banner').src =
		imageDirA + images[currentBannerSlide];

	document.getElementById('banner').alt =
		alts[currentBannerSlide];

	document.getElementById('bannerLink').href =
		links[currentBannerSlide];
}

function bannerCtlSwitch() {
	// You can use scriptaculous here for a pleasant transition
	Effect.Fade(document.getElementById('banner'), {
		duration: bannerFadeDuration,
		afterFinish: bannerCtlLoad
	})
	Effect.Appear(document.getElementById('banner'), {
		queue: 'end',
		duration: bannerFadeDuration
	})
}

function bannerCtlRotate() {
	if (!bannerCtlPaused) {
		currentBannerSlide = ((totalSlideCount - 1) == currentBannerSlide)?
			0 : currentBannerSlide + 1;
		bannerCtlSwitch();
	}
	window.setTimeout('bannerCtlRotate()', bannerRotateRate);
}
window.setTimeout('bannerCtlRotate()', bannerRotateRate);