function mElement(elementName) {
	if (document.layers) {
	//we want 1 object (not nested)
		//simple layer reference
		if (mElement.arguments.length == 1) {
			var cEl = eval("document.layers['" + elementName + "']");
		
		//refer document in layer: document.layers[layername].document
				// use 'strange' spelling to minimise conflicts with existing objects
		} else if (mElement.arguments[1] == 'DoC') {
			var cEl = eval("document.layers['" + elementName + "'].document");
		//refer an image: document.images[imageName]
		} else if (mElement.arguments[1] == 'iMageZ') {
			var cEl = eval("document.images['" + elementName + "']");
		
		//nested objects
		} else if (mElement.arguments.length>1) {
			var cEl = "document.layers['" + mElement.arguments[1] + "']";//start the string
			for (var i=2;i<mElement.arguments.length;i++) {//leave the first argument, because that's the one you're after, the second because you used that one to start the string
				if ( (mElement.arguments[i] != 'DoC') && (mElement.arguments[i] != 'iMageZ') && (mElement.arguments[i] != 'ForMz') ) {
					//alert(mElement.arguments[i]);
					cEl = cEl + ".document.layers['" + mElement.arguments[i] + "']";//get the next layer
				}
			}
			if (mElement.arguments[mElement.arguments.length-1] == 'iMageZ')  {
				cEl = cEl + ".document.images['" + elementName + "']";//in case you need the images in the layer rather than the layer or doc
			} else if (mElement.arguments[mElement.arguments.length-1] == 'ForMz')  {
				cEl = cEl + ".document.forms['" + elementName + "']";//in case you need the form in the layer rather than the layer or doc
			} else {
				cEl = cEl + ".document.layers['" + mElement.arguments[0] + "']";//add first element (the one you're after)
				if (mElement.arguments[mElement.arguments.length-1] == 'DoC') {
				cEl = cEl + ".document";//in case you need the document in the layer rather than the layer itself
				}
			} 
			cEl = eval(cEl);//wrap up and make string into an object
		} else {
			var cEl = eval("document.layers['" + mElement.arguments[1] + "'].document." + elementName);
		}
	
	//old IE browsers:
	} else if (document.all) {
		var cEl = eval('document.all.' + elementName);
	
	//W3C standard:
	} else {
		var cEl = document.getElementById(elementName);
	}
	return cEl;
}







//PROPERTY:
//returns the height of a layer:
function measureHeight(div) {
	if(document.layers) {
	var divs="'" + div + "','";//start with the main one
		for (var i=1;i<measureHeight.arguments.length;i++){//add string with all parent divs
		divs += measureHeight.arguments[i]+"','";
	}
	divs += "DoC'";//add the doc because that's what we need
	tHeight = eval("mElement(" + divs + ").height");
	} else {
	tHeight = mElement(div).offsetHeight;
	//tHeight = mElement(div).style.height;

	}
	return tHeight;
}
//make a div visible, and/or position it:
function makeVis(divName,posX,posY) {
	if(document.layers) {
		mElement(divName).visibility = 'show';
		mElement(divName).left = parseInt(posX);
		mElement(divName).top = parseInt(posY);
	} else {
		mElement(divName).style.visibility = 'visible';
		mElement(divName).style.left = parseInt(posX);
		mElement(divName).style.top = parseInt(posY);
	}
}
//make layer invisible:
function makeInVis(divName) {
	if(document.layers) {
		mElement(divName).visibility = 'hide';
	} else {
		mElement(divName).style.visibility = 'hidden';
	}
}




//BEHAVIOUR:

//look for the resolution of the screen and chose the left location of the menu

function changeRes()
{
leftplace=0;
	if ((screen.width == 640) && (screen.height == 480)) 
		leftplace=0;
	else if ((screen.width == 800) && (screen.height == 600))
		leftplace=25;
	else if ((screen.width == 1024) && (screen.height == 768))
		leftplace=135;
	return (leftplace);
}
function menus(objID,Ymargin) {
	//fixed properties:
	this.gap = 0;//gap between the menus
	this.posX =0//distance from the left
	
	//properties
	this.objID = objID;//ID
	this.elID = "tMenu" + objID;//name of menu layer
	this.subElID = "sMenu" + objID;//name of description layer
	
	this.Ymargin = 0;//where it starts from the top
	this.posY=156;//start from 0 from the top
	
	this.delay = 5;//delay of animation in miliseconds
	this.timer;//this is used to set/reset the timer
	
	//methods
	this.measure =  measure;
	this.showMenu = showMenu;
	this.rePos = rePos;
	this.layerShift = layerShift;
	this.finish;//empty methos will be declared later
	this.slideMenu = slideMenu;//animate the menus
	this.showDescr = showDescr;//show the description
}

function measure() {
	//measure menus and description and put in array
	tMenuH[this.objID] = measureHeight(this.elID);
	sMenuH[this.objID] = measureHeight(this.subElID);
}
function showMenu() {//this method will show the menus
	//Start form the top:
	posY=this.Ymargin;
	//Then go throught all the menus that are there yet, to find the position of the next one:
	for (var i=0;i<=this.objID-1;i++) {
		posY += parseInt(tMenuH[i]) + this.gap;//add the gap
	}
	this.posY = posY;//make the object 'remember' where the menu is
	makeVis(this.elID,this.posX,posY);//position it and make visible
}
function rePos(id) {
	//first make the description invisible in case it was showing
	makeInVis(this.subElID);
	//find the final Y pos where the menu is moving to
	posY=this.Ymargin;
	for (var i=0;i<=this.objID-1;i++) {//loop through all previous
		posY += parseInt(tMenuH[i]) + this.gap;
	}
	
	//we check if it is the last menu
	// if it is, then we create a new method that will show the selected description after all menus have animated down:
	if (this.objID == tMenuH.length-1) {
		var  f="openSub(" + id + ")";//decalare the method that will move all the topnavs to make space for the description; show descriptions
	} else {//otherwise wait with opening
		var  f="";//empty method
	}
	
	this.finish = new Function(f);//-> created the new method
	
	//animate the menu down to posY, in steps of -10px:
	this.layerShift(posY,-10)
}
function layerShift(posY,moveY) {//animate the menu to posY, in steps of moveY
	if (moveY>0) {//we're moving up
		var a=posY-this.posY;//this.posY is the current position of the menu, so compare that one to the destination
	} else {//moving down
		var a=this.posY-posY;
	}
	if (a>0) {//destination is not yet reached:
		this.posY = this.posY + moveY;//'remeber' the menu's position
		makeVis(this.elID,this.posX,this.posY);//move the layer to that new position
		if(this.timer) {
			//alert(this.timer);
			clearTimeout(this.timer);//clear the existing timer
		}
		//repeat this method after the set delay:
		eval("menuA[" + this.objID + "].timer = setTimeout(\"menuA[" + this.objID + "].layerShift("+posY+","+moveY+","+this.delay+")\"," + this.delay + ")");
	} else {//we have reached the destination, so run the finish method
		this.finish();
	}
}

function openSub(id) {//open the description
	for (var i=0;i<menuA.length-1;i++) {//runs through all menus
		if (id <= menuA[i].objID) {//that is the one or next
			menuA[i+1].slideMenu(id);//move (animate) the next topnavs
		}
	}
	if (id == menuA.length-1) {//if the chosen menu is the last one, then we don't have to move the next, as there or no
		menuA[menuA.length-1].showDescr();//just show description
	}
}
function slideMenu(id) {//as showTop but animated //** MAKE ANIMATED  **//
	posY = this.Ymargin;
	//find the Y pos
	posY+=sMenuH[id]+this.gap;//add space for subnav
	for (var i=0;i<=this.objID-1;i++) {//add tNavs
		posY += parseInt(tMenuH[i]) + this.gap;
	}
	//slide:
	var  f="menuA[" + id + "].showDescr()";//show subnav
	this.finish = new Function(f);//-> set the method
	this.layerShift(posY,10)
}
function showDescr() {
	posY = this.Ymargin;
	//find the Y pos
	//posY+=this.gap;//add a gap
	for (var i=0;i<=this.objID;i++) {
		posY += parseInt(tMenuH[i]) + this.gap;//find top menu positions
	}
	//put under the topNav
	makeVis(this.subElID,this.posX,posY);
}





function openMenu(id){//opens a menu-description
	//loop through menus and close all descriptions and repositioning the menus
	for (var i=0;i<menuA.length;i++) {
		menuA[i].rePos(id); 
	}
}





//page specific:

	//global variables:
	var menuA = new Array;
	var tMenuH = new Array;//height of top menus
	var sMenuH = new Array;//height of sub menus

function init() {
//create menu objects:
	//server created: population of menus:
	menuA[0] = new menus(0,25);
	menuA[1] = new menus(1,25);
	menuA[2] = new menus(2,25);
	menuA[3] = new menus(3,25);
	menuA[4] = new menus(4,25);
	menuA[5] = new menus(5,25);
	menuA[6] = new menus(6,25);
	menuA[7] = new menus(7,25);
	menuA[8] = new menus(8,25);
		
	//show initialy
	for (var i=0;i<menuA.length;i++) {//loop through the array of objects, and show the menus
		//measure menus:
		menuA[i].measure();
		//show menus:
		menuA[i].showMenu();
	}
}