// define some constants
numSubNavs = 4;
aniDuration = 500;	// in milliseconds
prefix = 'company';

// this runs once the window has loaded
Event.observe(window, 'load', function(e) {
	// this selects the div tag using its ID, then adds onclick to it
	$('subNav1').observe('click', function(e) { doSubNav(1) });
	$('subNav2').observe('click', function(e) { doSubNav(2) });
	$('subNav3').observe('click', function(e) { doSubNav(3) });
	$('subNav4').observe('click', function(e) { doSubNav(4) });
	
	doSubNav(1);
});

function doSubNav(id) {
	for (i=1;i<=numSubNavs;i++) {
		document.getElementById("subNav"+i).className = "subNavItem";
		document.getElementById(prefix+''+i).style.display = "none";
	}
	document.getElementById("subNav"+id).className = "subNavOn";
	document.getElementById(prefix+''+id).style.display = "block";
	
	if ( id == 4 && !$('subNavSec4').visible() ) {
		new Effect.PhaseIn('subNavSec4', { duration: aniDuration/1000 });
	} else if ( $('subNavSec4').visible() ) {
		new Effect.PhaseOut('subNavSec4', { duration: aniDuration/1000 });
	}	
}

Effect.PhaseIn = function(element) {
  element = $(element);
  new Effect.BlindDown(element, arguments[1] || {});
  new Effect.Appear(element, arguments[2] || arguments[1] || {});
}

Effect.PhaseOut = function(element) {
  element = $(element);
  new Effect.Fade(element, arguments[1] || {});
  new Effect.BlindUp(element, arguments[2] || arguments[1] || {});
}

/*
function doSubNav(num) {
	if (num > 0 && num <= numSubNavs) {
	
		// make all the subnavs plain
		for (i=1; i<=numSubNavs; i++) {
			if (i == num) {
				$('subNav'+i).removeClassName('subNavItem');
				$('subNav'+i).addClassName('subNavOn');
			} else {
				$('subNav'+i).addClassName('subNavItem');
				$('subNav'+i).removeClassName('subNavOn');
			}
			$(idnameprefix+''+i).hide();
			$('subNavSec'+i).hide();
		}
		
		$('subNavSec'+num).show();
		
		// move the next section into view
		//var newX = 0 - 500 * num;
		//new Effect.Move (idnameprefix, { x: newX, y: 0, mode: 'absolute', duration: aniDuration/1000 });
		$(idnameprefix+''+num).show();
				
		// make the company div tall enough to fit in the next section
		//var cHeight = $('equipment').getHeight(); // first we get #company current height
		//var sHeight = $(idnameprefix+''+num).getHeight(); // then we get the #company# height
		//if ( cHeight != sHeight) { // if height needs to change
			// then we scale #company to the right size
		//	var scale = sHeight * 100.0 / cHeight;
		//	new Effect.Scale('equipment', scale, { scaleX: false, scaleContent: false, duration: aniDuration/1000 });
		//}
	}
}
*/