// createSubNav usage:
// parameter 1 : image dir
// parameter 2 : number of images
// parameter 3 : image prefix
// parameter 4 : image extension
// Image naming convention : prefix + 01. + image extension, prefix + 02. + image extension, ...
// as in : all01.jpg, all02.jpg

var activeNavItem = 'navImg0';
var activeSubNavItem = '';

function createSubNav(imgDir, numberOfImages, prefix, extension) {
	myImgSubNav = $('imgSubNav');

	myImgSubNav.innerHTML = '';
	var imgName = '';	
	for (var i=1; i<=numberOfImages; i++) {
		if (i<10) {imgNum = '0' + i;} 
		else {imgNum = i;}

		mI = document.createElement('img');
		myImgSubNav.appendChild(mI);

		if (i==1) {mI.setAttribute('src', 'i/' + imgNum + 'b.png');
		} else {mI.setAttribute('src', 'i/' + imgNum + '.png');}

		mI.setAttribute('id', 'subNavImg' + imgNum);
		mI.className = 'subNavImg';
		mUrl = imgDir + prefix + imgNum + '.' + extension;
		//onClickAction = 'loadImage("' + mUrl + '");setActiveSubNavItem(this);';

		mI.setAttribute('mUrl', mUrl);		
		mI.onmouseover = new Function ("swapImage(this)");
		mI.onmouseout = new Function ("swapImage(this)");
		mI.onclick = new Function("controlSubNav(this)");
		if (i==1) {loadImage(mUrl);}
	}
}

function loadImage(mUrl) {
	$('mainImage').src=mUrl;
	return;
}

function controlSubNav(imgRef) {
	$('mainImage').src=imgRef.getAttribute("mUrl");
	setActiveSubNavItem(imgRef);
	return;
}

function swapImage(imgRef) {
	if (activeNavItem == imgRef.id) {return;}
	if (activeSubNavItem == imgRef.id) {return;}
	mySrc = imgRef.src;
	if (mySrc.substr(mySrc.length-5, 5) == 'b.png') {
		newSrc = mySrc.replace(/b.png/, '.png');
	} else {
		newSrc = mySrc.replace(/.png/, 'b.png');
	}
	imgRef.src = newSrc;
}

function setImageOn(imgRef) {
	mySrc = imgRef.src;
	if (mySrc.substr(mySrc.length-5, 5) == 'b.png') {return;} 
	else {newSrc = mySrc.replace(/.png/, 'b.png');}
	imgRef.src = newSrc;
}

function setImageOff(imgRef) {
	mySrc = imgRef.src;
	if (mySrc.substr(mySrc.length-5, 5) == 'b.png') {newSrc = mySrc.replace(/b.png/, '.png');imgRef.src = newSrc;} 
}

function setActiveNavItem(imgRef) {
	imgColl = $("c4").getElementsByClassName('navImg');
	for (var i=0; i<imgColl.length; i++) {setImageOff(imgColl[i]);}
	activeNavItem=imgRef.id;
	setImageOn(imgRef);
	return;
}

function setActiveSubNavItem(imgRef) {
	imgColl = $("imgSubNav").getElementsByClassName('subNavImg');
	for (var i=0; i<imgColl.length; i++) {setImageOff(imgColl[i]);}
	activeSubNavItem=imgRef.id;
	setImageOn(imgRef);
	return;
}