var subnavstring = '';
var navstylestring = '';

var theshapes = new Array();
var navshapes = new Array();

theshapes[0] = 'square';
theshapes[1] = 'circle';
theshapes[2] = 'triangle';

for (i = 0; i < theshapes.length; i++) {
	navshapes[theshapes[i]] = new Array();

	var theimg = new Image();
	theimg.src = linkref + 'images/nav/' + theshapes[i] + '_on.gif';
}


// Each element of the array contains the image name and associated url

navshapes['square'][0] = 'overview,square_overview,square.asp';
navshapes['square'][1] = 'config12,square_12,square_12.asp';
navshapes['square'][2] = 'config16,square_16,square_16.asp';

navshapes['circle'][0] = 'overview,circle_overview,circle.asp';
navshapes['circle'][1] = 'config12,circle_12,circle_12.asp';
navshapes['circle'][2] = 'config16,circle_16,circle_16.asp';

navshapes['triangle'][0] = 'overview,triangle_overview,triangle.asp';
navshapes['triangle'][1] = 'config15,triangle_15,triangle_15.asp';


// Build the subnavigation

for (i = 0; i < theshapes.length; i++) {
	var loc = new String(document.location);
	if (shape != theshapes[i] || pagetype != "configurator") {
		var vis = "hidden";
	} else {
		var vis = "visible";		
	}

	var left = 0;
	switch(theshapes[i]) {
		case 'square':
			left = 204;
			break;
		case 'circle':
			left = 306;
			break;
		case 'triangle':
			left = 397;
			break;
		default:
			break;
	}

	navstylestring += '#divnav' + theshapes[i] + ' { position: absolute; left:' + left + 'px; top:38px; visibility:' + vis + '; z-index: 20; }\n';
	subnavstring += '<div id="divnav' + theshapes[i] + '">';

	for (j = 0; j < navshapes[theshapes[i]].length; j++) {
		var childstring = new String(navshapes[theshapes[i]][j]);
		childlinks = childstring.split(',');
		if (loc.indexOf(childlinks[2]) == -1) {
			subnavstring += '<a href="' + linkref + 'configurator/' + childlinks[2] + '" onmouseover="clearTimeout(timerID);" onmouseout="deactivate();"><img src="' + linkref + 'images/nav/' + childlinks[0] + '_off.gif" border="0" name="' + childlinks[1] + '"></a>';
		} else {
			subnavstring += '<img src="' + linkref + 'images/nav/' + childlinks[0] + '_on.gif" name="' + childlinks[1] + '">';
		}
	}
	subnavstring += '</div>\n';
}


// Build the stylesheet

function buildnavcss() {
	document.write('<style type="text/css">\n' + navstylestring + '</style>\n');
}

buildnavcss();


// Layer show/hide functions

function showLayer(id){
	if (ie4) document.all[id].style.visibility = 'visible';
	else if (ns4) document.layers[id].visibility = 'show';
	else if (dom2) document.getElementById(id).style.visibility = 'visible';
}

function hideLayer(id){
	if (ie4) document.all[id].style.visibility='hidden';
	else if (ns4) document.layers[id].visibility='hide';
	else if (dom2) document.getElementById(id).style.visibility='hidden';
}


// Rollover activation/deactivation functions

var timerID;
if (pagetype == "configurator") {
	var activenav = shape;
} else {
	var activenav;
}
var basenav = activenav;

function activate(whichdiv) {
	activenav = whichdiv;
	if (whichdiv != '') {
		if (timerID) clearTimeout(timerID);
		for (var j = 0; j < theshapes.length; j++) {
			whichdiv = theshapes[j];
			if (activenav != whichdiv) {
				eval('document.images["nav' + whichdiv + '"].src = "' + linkref + 'images/nav/' + whichdiv + '_off.gif"');
				hideLayer('divnav' + whichdiv);
			} else {
				eval('document.images["nav' + whichdiv + '"].src = "' + linkref + 'images/nav/' + whichdiv + '_on.gif"');
				showLayer('divnav' + whichdiv);
			}
		}
	}
}


function deactivate() { 
	timerID = setTimeout('restoreLayers()',750);
}

function restoreLayers() {
	for (var j = 0; j < theshapes.length; j++){
		whichdiv = theshapes[j];
		if (basenav != whichdiv) {
			eval('document.images["nav' + whichdiv + '"].src = "' + linkref + 'images/nav/' + whichdiv + '_off.gif"');
			hideLayer('divnav' + whichdiv);
		} else {
			if (basenav != null) {
				eval('document.images["nav' + whichdiv + '"].src = "' + linkref + 'images/nav/' + whichdiv + '_on.gif"');
				showLayer('divnav' + whichdiv);
			}
		}
	}
}