InstallVeryMenus = function(){

	getPosition = function(parentPos, subSize){

	if (POSITION == "TL"){
	return [parentPos.left- subSize.size.x , parentPos.top - subSize.size.y]
	}
	else if (POSITION == "T"){
	return [parentPos.left, parentPos.top - subSize.size.y]
	}
	else if (POSITION == "TR"){
	return [parentPos.right, parentPos.top - subSize.size.y]
	}
	else if (POSITION == "L"){
	return [parentPos.left- subSize.size.x, parentPos.top]
	}
	else if (POSITION == "R"){
	return [parentPos.right, parentPos.top]
	}
	else if (POSITION == "BL"){
	return [parentPos.left- subSize.size.x, parentPos.top + parentPos.height]
	}
	else if (POSITION == "B"){
	return [parentPos.left, parentPos.top + parentPos.height]
	}
	else if (POSITION == "BR"){
	return [parentPos.right, parentPos.top + parentPos.height]
	}
	};



	//arrays of our sub menus and their special effects (so we don't need to constantly recreate them)
	//they need to have a null 0 element so that my trick for detecting which menu is loading by using the negative of their numbers works propeprly
	var subMenus = [null]
	var subFx = [null]

	var uniqueScope = $(UNIQUEID)

	//make a table to organise our menu in
	var menuTable = uniqueScope.getElement(".VeryMenuTable"+SUFFIX)

	//if our cursor leaves the table of top menu entries, and we haven't visited a submenu yet, we want the submenu last opened to fade away


//note: this revised version will fade the open menu if you haven't visited it by the time it's done fading in


TopMenuLeave = function(menuID) {

			(function(){
	//opera.postError("topMENU exit");

	//if our sub menu is still loading - loop recursively with a slight delay
				if (loadingSub == -menuID){TopMenuLeave(menuID);}

	//if we were already loading a sub-left, returned and called a different sub menu...this should terminate the running recursion that's already running and leave the variable in the right state for the next call (when the mouse leaves the table again) to do the right thing. Note: If the new recursion happens upon this before the old one, it shouldn't make the slightest difference...
				//else if (loadingSub == -3){loadingSub = -2}

	//if our sub menu has finished loading but hasn't been entered
				else if (loadingSub == menuID){
					//alert(loadingSub);
					subFx[loadingSub].start(0)

					//console.log("time" + loadingSub)
					//opera.postError("topMENU exit: time" + loadingSub)

					loadingSub = -100
				}
			}).delay(350)// but we want to make sure the submenu's "mouseEnter" event has a chance to be fired before we try this. NOTE: It may be worth giving the module-user control over this value, in case they want to set the submenu quite far away from the top one, and give the user sufficient time to move their mouse there...

}








menuTable.addEvent('mouseleave',function() {
	TopMenuLeave(Math.abs(loadingSub))
})


	//iterator for naming our menus, lets start at one
	var topIterator = 1
	//variable to remember which menu was last opened, and whether the cursor has visited it since
	var loadingSub = -1

	//set up the menus

	uniqueScope.getElements(".topMenuItem"+SUFFIX).each(function(topMenu){

	//give each top menu item a uniq ID
		topMenu.id = UNIQUEID + "mooTopMenuItem"+topIterator//UNIQUEID + "mooTopMenuItem"+topIterator
		topIterator ++

	//put the top menu item in the table   ---- THIS NEEDS FIXING --the table should be dynamically created, not just appended to
		if (LAYOUT == 'vertical'){
			newCell = new Element('tr').adopt(topMenu)
			menuTable.tBodies[0].rows[0].adopt(newCell);

		}
		else if  (LAYOUT == 'horizontal'){


			newCell = new Element('td')
			newCell.adopt(new Element('td'))
			newCell.adopt(topMenu)
			menuTable.tBodies[0].rows[0].appendChild(newCell);

		}
		else{
			throw "something strange, your layout is neither vertical or horizontal"
		}

	//lets do it for the sub menus too, not really necessary but may be useful in future editions of the program
		subMenu = topMenu.getElement(".subMenu"+SUFFIX)
		//only proceed if it's got a subMenu...
		if (subMenu != null){
			subMenu.id = topMenu.id +"sub";
		//we'll leave the original submenus alone (though invisible) for search engine bots to have a look at, and we'll make a cloned version to apply our special effects to, and give it another unique ID number
			subClone = subMenu.clone()
			subClone.id = 'clone' + subMenu.id
		//leave the originals around, but make them invisible
			subMenu.setStyle('display', 'none')
		//get the clone ready to be positioned once our table has been filled...(it's better to inject it in to the document now so the special effects don't throw errors...
			subClone.setStyles({'opacity': 0, 'display': 'block', 'position': 'absolute'})
			document.body.appendChild(subClone)


		//add them to the array
			subMenus.push(subClone)
		//add special effects. at this point fading, but could be any CSS style
			cloneFX = subClone.effect('opacity', {wait: false})

			subFx.push(cloneFX);

		//when they stop looking at a menu, it should fade away
			subClone.addEvent('mouseleave',function() {

							//console.log("SUB leave")
							//opera.postError("SUB leave")
							this.start(0)
							}.bind(cloneFX))

		//when they look at a submenu, well remember and not fade it away when the mouse leaves the top menu table
			subClone.addEvent('mouseenter',function() {
							//console.log("SUB enter")
							//opera.postError("SUB enter")
							loadingSub = -100
							})


			//when we look at the top menus, we call up the sub-menus
			topMenu.addEvent(
				'mouseenter', function() {
					//luckily the subIDs are based on their parents
					subID = 'clone'+topMenu.id+'sub'
					for (var i = 1; i < subMenus.length; i++){
						//console.log("it's "+i)
						if(subMenus[i].id == subID)
						{
							//console.log("we got: "+i);
							//if it's ours, load it and remember which one it was
							//subFx[i].removeEvents('onComplete');
							loadingSub = -i;
							temp = i
							//this.b=subFx[i];
							//alert(subFx[i]);
							//this.b.removeEvent('onComplete', function() {loadingSub = temp; console.log(temp)});
							subFx[i].start(OPACITY).addEvent('onComplete', function() {
								if (loadingSub == -temp){loadingSub = temp;}
							});
							//if (loadingSub == -2){loadingSub = -3;}
							//else {loadingSub = -2;}

							//console.log("TOP enter yes")
							//opera.postError("TOP Enter Yes")
							//menuTable.removeEvents('byebye');
						}
						else
						{
							//otherwise get rid of it
							subFx[i].start(0)
							//console.log("TOP enter no")
							//opera.postError("TOP Enter no")
						}

					}

				}
			);
		}
	});

	//AFTER everything has finished positioning in the table, we set the positions of the sub-menus...this could be done each time the sub menu is displayed instead (if you're having problems with resizing the screen for instance) by sticking it in the topmenu mouseEnter event handler, but doing it once here should be enough I reckon

	//now that we've set things up, display the menu
	uniqueScope.setStyle("display", "block")


	//and now that the top menu has it's propper screen coordinates, we can position the sub menus
	subMenus.each(function(subMenu){
		if (subMenu != null){
			//set it wherever it should go relative to the parent
			parentSize = $(subMenu.id.substring(5,subMenu.id.length-3)).getCoordinates()
			subMenuCoords = getPosition(parentSize, subMenu.getSize())


			subMenuCoords[0] += parseInt(LEFTOFFSET);
			subMenuCoords[1] += parseInt(TOPOFFSET);
			//make it invisible and correctly positioned
			/*//add this to make the sub menu automatically match it's width to the parent menu: "width": parentSize.width-12*/
			subMenu.setStyles({"left": subMenuCoords[0], "top": subMenuCoords[1]})
		}
	});

}