function unpressAllButtons(){
	var menuButtonIds = document.getElementById('menuButtonIds');
	var menuButtonIdsArray = menuButtonIds.value.split(';');
	for (i = 0; i < menuButtonIdsArray.length; i++) {
		unpressButton(menuButtonIdsArray[i]);
	}
}

function pressButton(buttonID){
	// First unpress all the buttons. (If multiple buttons are pressed simultaneously, then menus start overlapping, which doesn't look very good.)
	unpressAllButtons();

	// Press the buttons by changing their classes.
	var buttonLeft = document.getElementById('menuButtonLeft' + buttonID);
	var buttonMiddle = document.getElementById('menuButtonMiddle' + buttonID);
	var buttonRight = document.getElementById('menuButtonRight' + buttonID);
	var hiddenWidth = document.getElementById('hiddenWidth' + buttonID);
	var hiddenPadding = document.getElementById('hiddenPadding' + buttonID);
	buttonLeft.className = 'menuButtonLeft_pressed';
	buttonMiddle.className = 'menuButtonMiddle_pressed';
	buttonRight.className = 'menuButtonRight_pressed';

	// Set the padding such that the text shifts a little bit.
	var paddingValue = parseInt(hiddenPadding.value);
	buttonMiddle.style.padding = (paddingValue + 1) + 'px ' + paddingValue + 'px ' + (paddingValue - 1) + 'px ' + paddingValue + 'px;';
}

function unpressButton(buttonID){
	// Unpress the buttons by changing their classes.
	var buttonLeft = document.getElementById('menuButtonLeft' + buttonID);
	var buttonMiddle = document.getElementById('menuButtonMiddle' + buttonID);
	var buttonRight = document.getElementById('menuButtonRight' + buttonID);
	var hiddenWidth = document.getElementById('hiddenWidth' + buttonID);
	var hiddenPadding = document.getElementById('hiddenPadding' + buttonID);
	buttonLeft.className = 'menuButtonLeft_unpressed';
	buttonMiddle.className = 'menuButtonMiddle_unpressed';
	buttonRight.className = 'menuButtonRight_unpressed';

	// Set the padding such that the text shifts a little bit.
	var paddingValue = parseInt(hiddenPadding.value);
	buttonMiddle.style.padding = paddingValue + 'px;';

	// Let the menu disappear again.
	document.getElementById('menuChild' + buttonID).style.visibility = 'hidden';
}

function menuAppear(buttonID){
	// Pressing the button.
	pressButton(buttonID)

	// Getting the objects.
	var menuParent = document.getElementById("menuButton" + buttonID);
	var menuChild = document.getElementById("menuChild" + buttonID);

	// Finding the position.
	var top = menuParent.offsetHeight + 4; // The menu appears 4 pixels under the button.
	var left = (menuParent.offsetWidth - menuChild.offsetWidth)/2; // The menu appears (horizontally) exactly below the button.
 	for (; menuParent; menuParent = menuParent.offsetParent){
		top += menuParent.offsetTop;
		left += menuParent.offsetLeft;
	}

	// Setting the values to make the menu appear in the right place.
	menuChild.style.position = "absolute";
	menuChild.style.top = top + 'px';
	menuChild.style.left = left + 'px';
	menuChild.style.visibility = "visible";

	// And resetting its disappearance timer.
	clearTimeout(menuChild["atTimeout"]);
}

function menuDisappear(buttonID){
	// Setting the disappearance timer.
	menuChild = document.getElementById("menuChild" + buttonID);
	menuChild["atTimeout"] = setTimeout('unpressButton(' + buttonID + ')', 250); // The menu disappears after 250 milliseconds.
}

function activateChild(menuID, subMenuID){
	var child = document.getElementById('menuChild' + menuID + '_' + subMenuID);
	child.className = 'menuItem menuItem_pressed';
}

function deactivateChild(menuID, subMenuID){
	var child = document.getElementById('menuChild' + menuID + '_' + subMenuID);
	child.className = 'menuItem menuItem_unpressed';
}