var left_corner_x =105; // x-coordinate of top left corner of dropdown menu  205
var left_corner_y = 30; // y-coordinate of top left corner of dropdown menu 
var back_color = '#2882B4'; // the background color of dropdown menu 
var border_color = '#1B597B'; // the color of dropdown menu border
var cell_padding  = '5'
var border_size  = '1'; // the width of dropdown menu border
var menu_width   = '65'; // the width of dropdown menu 
//// Don't change these parameters
var delay  = 500; /////
var active_layer_id = -1;  /////
var on_layer_id  = -1;  /////
var buff_id  = -1;  /////
/// ----------------------------
//pageWidth = document.body.clientWidth;
//moveTo = (10 - 760) / 2;
xPos = 500
x_coords     = new Array(60,330,160,240);
y_coords     = new Array(99,99,99,99);
layer_widths = new Array(180,180,180,180);

// menu content; the dropdown menus themselfs between '' and items of every dropdown menu are diveded by |; 

menu_content   = new Array ('<a href="about.asp" class="topNav">about rivercare</a> | <a href="thebigpicture.asp" class="topNav">the big picture</a>',
'<a href="projectsinyourarea.asp" class="topNav">projects in your area</a> | <a href="groupapplication.asp" class="topNav">group application</a>',
'<a href="adoptariver.asp" class="topNav">adopt a river</a> | <a href="javascript:popupWindowNoScroll(\'register.asp\',\'register\',\'600\',\'435\');" class="topNav">register</a> | <a href="contact.asp" class="topNav">contact us</a>',
'<a href="firststeps.asp" class="topNav">first steps</a> | <a href="eventpreparation.asp" class="topNav">event preparation</a>');

// check browser version

NS4 = (document.layers) ? 1 : 0;
function layer_enter (id){
	on_layer_id = id;
}

function layer_exit (id){
	on_layer_id = - 1;
	setTimeout ('hide('+ id +')', delay/5);
}

function menu_enter (id){
	if (buff_id >= 0)
	hide (buff_id);
	show (id);
	active_layer_id = id;
	}

function menu_exit (id){
	setTimeout ('hide('+ id +')', delay);
	buff_id = active_layer_id;
	active_layer_id = -1;
}

function show (id){
	if (!NS4)
	//document.all['Menu' + id].style.visibility = "visible";
	document.getElementById('Menu' + id).style.visibility = "visible";
	else
		document.layers[id].visibility = "visible";
}

function hide (id){
	if (active_layer_id != id && on_layer_id != id)
	{
		if (!NS4)
			//document.all['Menu' + id].style.visibility = "hidden";
			document.getElementById('Menu' + id).style.visibility = "hidden";
		else
			document.layers[id].visibility = "hide";
	}
}

function generate_layers (){
	for (i = 0; i < menu_content.length; i++)
		{
			if (!NS4)
				layer_header = '<div id=Menu' + i +
				' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +
				' style="visibility: hidden; position: absolute; left: ' + (x_coords[i]) +
				'; top: ' + (y_coords[i]) + ';">';
			else
				layer_header = '<layer id=' + i + ' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +
				' visibility=hide left=' + (x_coords[i]) + ' top = ' + left_corner_y + '>';
				
				layer_header += '<table width=' + layer_widths[i] + ' cellpadding=0 cellspacing=0 border=0>' + 
				'<td bgcolor=' + back_color + '><table width=' + layer_widths[i] + ' cellpadding='+ cell_padding + 
				' cellspacing=' + border_size + ' border=0 bgcolor=' + border_color + '><td width=' + layer_widths[i] + ' bgcolor=' + back_color + '>';

			elements = menu_content[i].split (/\s*\|\s*/);
			layer_body = '';
			
			for (j = 0; j < elements.length; j++){
				layer_body += elements[j];
					if ((NS4 && j < elements.length - 1) || (!NS4 && j < elements.length - 1))
						layer_body += '</td><tr bgcolor=' + back_color + '><td>';
					}
				
				layer_footer = '</td></table></td></table>';

			if (!NS4)
				layer_footer += '</div>';
			else
				layer_footer += '</layer>';
			document.writeln (layer_header + layer_body + layer_footer);
		}
	}
generate_layers ();