var timer_id;

var active;
if ($('sec1').className == 'active') {
	active = 1;
} else if ($('sec2').className == 'active') {
	active = 2;
} else if ($('sec3').className == 'active') {
	active = 3;
} else {
	active = 0;
}

function $(id) {
	return document.getElementById(id);
}


function showSub(n) {
	clearTimeout(timer_id);
	current_sec = n;
	for (var i=1; i<=3; i++) {
		if (n != i) {
			$('sub'+i).style.display = 'none';
		}
	}
	if ($('sub'+n).style.display == 'none') {
		$('sub'+n).style.display = '';
	}
}


function hideSub() {
	clearTimeout(timer_id);
	timer_id = setTimeout("hideAll()", 2000);
}

function hideAll() {
	for (var i=1; i<=3; i++) {
		if (active != i) {
			$('sub'+i).style.display = 'none';
		} else {
			$('sub'+i).style.display = '';
		}
	}
}





$('sec1').onmouseover = function() {showSub(1);}
$('sec2').onmouseover = function() {showSub(2);}
$('sec3').onmouseover = function() {showSub(3);}

$('sec1').onmouseout = function() {hideSub();}
$('sec2').onmouseout = function() {hideSub();}
$('sec3').onmouseout = function() {hideSub();}

$('sub1').onmouseover = function() {clearTimeout(timer_id);}
$('sub2').onmouseover = function() {clearTimeout(timer_id);}
$('sub3').onmouseover = function() {clearTimeout(timer_id);}

$('sub1').onmouseout = function() {hideSub();}
$('sub2').onmouseout = function() {hideSub();}
$('sub3').onmouseout = function() {hideSub();}