var strOn = "/img/icon/icon-square-red.gif"
var strOff = "/img/icon/icon-square-black.gif"
var imgOn = new Image();
var imgOff = new Image();
imgOn.src = "/img/icon/icon-square-red.gif";
imgOff.src = "/img/icon/icon-square-black.gif";

function fnFeatureChange(intFeature) {
	idNavOffItem = 'feature-image-nav-' + intActiveFeature;
	document.images[idNavOffItem].src = imgOff.src;
	document.getElementById("feature" + intActiveFeature).style.display = "none";

	idNavItem = 'feature-image-nav-' + intFeature;
	document.images[idNavItem].src = imgOn.src;
	document.getElementById("feature" + intFeature).style.display = "block";
	
	intActiveFeature = intFeature;
}

function fnFeatureNext(){
	(intActiveFeature == (arrayFeatureCaption.length - 1)) ? fnFeatureChange(1) : fnFeatureChange(intActiveFeature + 1);
}

function fnFeaturePrevious(){
	(intActiveFeature == 1) ? fnFeatureChange((arrayFeatureCaption.length - 1)) : fnFeatureChange(intActiveFeature - 1);
}

function fnBuildFeatureViewer() {
	var intTotalFeatures = (arrayFeatureCaption.length - 1);

	document.write('<ul class="bd-media-nav">');
	if (intTotalFeatures > 1) {
		//document.write('<li><img src="/img/icon/icon-document.gif" width="14" height="12" alt="Story menu" title="Story menu" class="news-media-nav-icon" /></li>');
		document.write('<li><a href="#" onclick="fnFeaturePrevious(); return false;" onmouseover="this.firstChild.src=\'/img/icon/icon-carratLeft-red.gif\';" onmouseout="this.firstChild.src=\'/img/icon/icon-carratLeft-black.gif\';"><img src="/img/icon/icon-carratLeft-black.gif" width="12" height="12" alt="Previous story" title="Previous story" /></a></li>');
	
		for(i = 1; i <= intTotalFeatures; i++) {
			if (i == intActiveFeature) { var strColor = "red" } else { var strColor = "black"; }
			document.write('<li><a href="#" onclick="fnFeatureChange(' + i + '); return false;" onmouseover="this.firstChild.src =\'' + strOn + '\';" onmouseout="if (' + i + ' != intActiveFeature) { this.firstChild.src =\'' + strOff + '\'; }"><img src="/img/icon/icon-square-' + strColor + '.gif" width="14" height="12" title="' + arrayFeatureCaption[i] + '" name="feature-image-nav-' + i + '" /></a></li>');
		}
	
		document.write('<li><a href="#" onclick="fnFeatureNext(); return false;" onmouseover="this.firstChild.src=\'/img/icon/icon-carratRight-red.gif\';" onmouseout="this.firstChild.src=\'/img/icon/icon-carratRight-black.gif\';"><img src="/img/icon/icon-carratRight-black.gif" width="12" height="12"  alt="Next story" title="Next story" /></a></li>');
	}
	document.write('</ul>');
	document.write('<div class="ballast"></div>');

	
	document.getElementById("feature1").style.display = "none";
	document.getElementById("feature" + intActiveFeature).style.display = "block";
}