var menuX = 0;
var menuY = 280;
var menuW = 362;
var menuH = 314;
var slideMenuX = 100;
var slideMenuY = 100;
var menuGreyBarXOffset = -20;
var menuGreyBarYOffset = -4;
var arrowXOffsetInGreyBar = 4;
var arrowYOffsetInGreyBar = 3;
var mainMenuTopMargin = 7;
var subMenuTopMargin = 0;
var mainMenuItemHeight = 18;
var subMenuItemHeight = 18;
var subMenuScrollAddon = 7;
var animationFrameStep = 1;
var animationFrameDelay = 1;
var imageDirectory = '../nhtml';
var imageFileExtension = 'gif';
var imageItemNormalIndicator = 'N';
var imageItemSelectedIndicator = 'S';
var mainMenu = false;  
var mainMenuNodes = new Array(); 
var mainMenuOnclickNodes = new Array(); 
var mainMenuSubNodes = new Array(); 
var subMenuItemCount = new Array();
var menuItemImagesNormal = new Array(); 
var menuItemImagesSelected = new Array();
var arrowNodes = new Array(); 
var arrowImages = new Array(); 
var animationRunning = false;
var MAINMENU_ID_PREFIX = 'mainmenuitem';
var SUBMENU_ID_PREFIX = 'submenu';
var ARROW_ID_PREFIX = 'arrow';
var subMenuHeightCorrection = 0;

if (navigator.appName.indexOf('Internet Explorer') >= 0) {
	subMenuTopMargin = subMenuTopMargin / 2;
	subMenuHeightCorrection = 1;
} else {
}
var animationMenuIndex = 0;
var animationDirection = 0;
var nextPage = "";
var nextState = "";
var nextForceOpenIndex = 0;
var nextSelectedItemIndex = 0;

function startAnimationOpenSubMenu(menuIndex) {
	animationMenuIndex = menuIndex;
	animationDirection = 1;
	animationRunning = true;
	setTimeout('animate()', animationFrameDelay);
}
function startAnimationCloseSubMenu(menuIndex) {
	animationMenuIndex = menuIndex;
	animationDirection = -1;
	animationRunning = true;
	setTimeout('animate()', animationFrameDelay);
}

function encodeState(forceOpenIndex, selectedItemIndex) {
	var state = 0;
	
	for (var i = 0; i < mainMenuNodes.length; i++) {
		if (isOpen(i) || (i == forceOpenIndex)) {
			state = state + 1
		}
		
		state = state << 1;
	}

	var slideMenuNode = document.getElementById('popupmenu');
	var images = slideMenuNode.getElementsByTagName('IMG');
	for (var i = 0; i < images.length; i++) {
		// Default
		if (selectedItemIndex != -1) {
			if (i == selectedItemIndex) {
				state = state + 1;
			}
		} else {
			if (selectedItemIndex == -999) {
				if (isMarkedMenuItem(i)) {
					state = state + 1;
				}
			}
		}			
		
		state = state << 1;
	}

	state = state >> 1;
	
	return state;
}

function restoreState(state) {
	var slideMenuNode = document.getElementById('popupmenu');
	var images = slideMenuNode.getElementsByTagName('IMG');
	for (var i = images.length - 1; i >= 0; i--) {
		var flag = state & 1;
		
		if (flag == 1) {
			markMenuItem(i);
		}
		
		state = state >> 1;
	}

	for (var i = mainMenuNodes.length - 1; i >= 0; i--) {
		var flag = state & 1;
		
		if (flag == 1) {
			openMenu(i);
		}
		
		state = state >> 1;
	}

	mainMenu.style.top = slideMenuY + 'px';

	syncArrows();
}

function openMenu(menuIndex) {
	setMenuHeight(menuIndex, subMenuItemCount[menuIndex]
					* (subMenuItemHeight + subMenuHeightCorrection) + subMenuTopMargin + subMenuScrollAddon);
}

function closeMenu(menuIndex) {
	setMenuHeight(menuIndex, 0);
}

function isOpen(menuIndex) {
	return (getMenuHeight(menuIndex) - mainMenuItemHeight) > 0;
}

function markMenuItem(itemIndex) {
	var slideMenuNode = document.getElementById('popupmenu');
	var images = slideMenuNode.getElementsByTagName('IMG');

	var imageNode = images[itemIndex];
	imageNode.src = menuItemImagesSelected[itemIndex].src;
}

function unmarkMenuItem(itemIndex) {
	var slideMenuNode = document.getElementById('popupmenu');
	var images = slideMenuNode.getElementsByTagName('IMG');

	var imageNode = images[itemIndex];
	imageNode.src = menuItemImagesNormal[itemIndex].src;
}

function isMarkedMenuItem(itemIndex) {
	var slideMenuNode = document.getElementById('popupmenu');
	var images = slideMenuNode.getElementsByTagName('IMG');

	var imageNode = images[itemIndex];
	return (imageNode.src == menuItemImagesSelected[itemIndex].src);
}

function animateScrollInMenu() {
   var currentTopPosition = parseInt(mainMenu.style.top.replace('px',''));
   
   if (currentTopPosition > slideMenuY) {
	   currentTopPosition = currentTopPosition - animationFrameStep;
	   if (currentTopPosition < slideMenuY) {
		   currentTopPosition = slideMenuY;
	   }
	
	   mainMenu.style.top = currentTopPosition + 'px';
	   syncArrows();
	   setTimeout('animateScrollInMenu()', animationFrameDelay);
   }
}

function getMainMenuIndex(menuID) {
	var idString = menuID.substring(MAINMENU_ID_PREFIX.length + 1, MAINMENU_ID_PREFIX.length + 2);
	return parseInt(idString);
}

function getSubMenuIndex(menuID) {
	var position = MAINMENU_ID_PREFIX.length + 1 + SUBMENU_ID_PREFIX.length + 1;
	var idString = menuID.substring(position, position + 1);
	return parseInt(idString);
}

function getMenuItemIndex(menuNode) {
	alert(menuNode);
}

function mapNodeToImageIndex(menuItemNode) {
	var index = -1;
	
	var imageNode = menuItemNode.getElementsByTagName('IMG')[0];
	
	var i = 0;
	while ((index == -1) && (i < menuItemImagesNormal.length)) {
		if ((imageNode.src == menuItemImagesNormal[i].src) || (imageNode.src == menuItemImagesSelected[i].src)) {
			index = i;
		}
	
		i++;
	}

	return index;	    
}

function markMenuItemSelected(menuItemNode) {
	var slideMenuNode = document.getElementById('popupmenu');
	var images = slideMenuNode.getElementsByTagName('IMG');
	for (var i = 0; i < images.length; i++) {
		unmarkMenuItem(i);

	}
	
	markMenuItem(mapNodeToImageIndex(menuItemNode));

}


function initMenuItemImages() {
	var slideMenuNode = document.getElementById('popupmenu');
	var images = slideMenuNode.getElementsByTagName('IMG');
	for (var i = 0; i < images.length; i++) {
		var currentImage = images[i];
		var imageURL = currentImage.src.substring(0, currentImage.src.length - 5);
	
		var normalImage = new Image();
		normalImage.src = imageURL + imageItemNormalIndicator + '.' + imageFileExtension;
		var selectedImage = new Image();
		selectedImage.src = imageURL + imageItemSelectedIndicator + '.' + imageFileExtension;
		
		menuItemImagesNormal.push(normalImage);
		menuItemImagesSelected.push(selectedImage);
	}
}

function handleMenuItemClicked(e, inputObject) {	         
	if (!animationRunning) {

		var clickedItem = inputObject;
		if (!clickedItem) {
			clickedItem = this.parentNode;
		}
	

		if (clickedItem.id.indexOf(SUBMENU_ID_PREFIX) < 0) {

			if (parseInt(clickedItem.style.height.replace('px','')) > mainMenuItemHeight) {
				// Lets check if the clicked menu will change to the current page. => No animation needed
				var menuIndex = mapNodeToImageIndex(clickedItem);
				if (isMarkedMenuItem(menuIndex)) {
					markMenuItemSelected(clickedItem);
					startAnimationCloseSubMenu(getMainMenuIndex(clickedItem.id));
				} else {
					markMenuItemSelected(clickedItem);
				}
			} else {
				markMenuItemSelected(clickedItem);
				startAnimationOpenSubMenu(getMainMenuIndex(clickedItem.id));
			}
		}
	}
}

function handleArrowClicked(e, inputObject) {
	if (!animationRunning) {
		var clickedArrow = this;
		var clickedArrowIDString = clickedArrow.id.substring(ARROW_ID_PREFIX.length + 1, ARROW_ID_PREFIX.length + 2);
		var clickedArrowIndex = parseInt(clickedArrowIDString);
	
		handleMenuItemClicked(e, mainMenuNodes[clickedArrowIndex]);
	}
}

function switchPage(page) {
	alert("ERROR: HTML-Error. Link to page '" + page + "' not updated");
}

//function switchPage(page, forceOpenIndex, selectedItemIndex) {
function ooswp(page, forceOpenIndex, selectedItemIndex) {
	nextPage = page;
	if ((forceOpenIndex != -1) && !isOpen(forceOpenIndex)) {
		nextForceOpenIndex = forceOpenIndex;
	} else {
		nextForceOpenIndex = -1;
	}
	nextSelectedItemIndex = selectedItemIndex;

	setTimeout('finalSwitchPage()', animationFrameDelay*1.5);
/*
        if (switchAfterAnimation) {
		nextPage = page;
		nextState = encodeState(forceOpenIndex, selectedItemIndex);
		restoreState(nextState, true);
        } else {
		if (window.location.href.indexOf(page) == -1) {
			var switchToPage = page + '?m=' + encodeState(forceOpenIndex, selectedItemIndex);
			window.location = switchToPage;
		}
	}
*/
}

function finalSwitchPage() {
	if (!animationRunning) {
		if (window.location.href.indexOf(nextPage) == -1) {
			var switchToPage = nextPage + '?m=' + encodeState(nextForceOpenIndex, nextSelectedItemIndex);
			window.location = switchToPage;
		}
	}
}

function animate() {
	var currentHeight = parseInt(mainMenuNodes[animationMenuIndex].style.height.replace('px',''))
				- mainMenuItemHeight;
	if (animationDirection == 1) {
		var subMenuHeight = subMenuItemCount[animationMenuIndex]
					* (subMenuItemHeight + subMenuHeightCorrection) + subMenuTopMargin + subMenuScrollAddon;
		if (currentHeight < subMenuHeight) {
			currentHeight = currentHeight + animationFrameStep;
			if (currentHeight > subMenuHeight) {
				currentHeight = subMenuHeight;
			}
		
			setMenuHeight(animationMenuIndex, currentHeight);
			setTimeout('animate()', animationFrameDelay);
		} else {
			animationRunning = false;
			finalSwitchPage();
		}
	} else {
		if (currentHeight > 0) {
			currentHeight = currentHeight - animationFrameStep;
			if (currentHeight < 0) {
				currentHeight = 0;
			}
		
			setMenuHeight(animationMenuIndex, currentHeight);
			setTimeout('animate()', animationFrameDelay);
		} else {
			animationRunning = false;
			finalSwitchPage();
		}
	}
	syncArrows();
}

function setMenuHeight(index, height) {
	mainMenuNodes[index].style.height = height + mainMenuItemHeight + 'px';
}

function getMenuHeight(index) {
	return parseInt(mainMenuNodes[index].style.height.replace('px',''));
}

function initSubMenuItems(mainMenuNode) {

	var children = mainMenuNode.getElementsByTagName('DIV')[0].childNodes;
	var itemIndex = 0;
	for (var i = 0; i < children.length; i++) {
		if (children[i].tagName == 'DIV') {

			children[i].id = mainMenuNode.id + '_' + SUBMENU_ID_PREFIX + '_' + itemIndex;
			if (itemIndex == 0) {
				children[i].style.marginTop = subMenuTopMargin + 'px';
			} else {
				children[i].style.marginTop = '0px';
			}

			var hrefNode = children[i].getElementsByTagName('A')[0];
			hrefNode.onclick = handleMenuItemClicked;
		
			itemIndex++;
		}
	}
}

function initMainMenuItems(menuNode) {
	var children = menuNode.childNodes;
	var itemIndex = 0;
	for (var i = 0; i < children.length; i++) {
		var currentMainMenuNode = children[i];
	
		if (currentMainMenuNode.tagName == 'DIV') {
			currentMainMenuNode.id = MAINMENU_ID_PREFIX + '_' + itemIndex;
		
			mainMenuNodes.push(currentMainMenuNode);
			mainMenuSubNodes.push(currentMainMenuNode.getElementsByTagName('DIV')[0]);
			subMenuItemCount.push(currentMainMenuNode.getElementsByTagName('DIV').length - 1);

			var hrefNode = currentMainMenuNode.getElementsByTagName('A')[0];
			hrefNode.onclick = handleMenuItemClicked;
			mainMenuOnclickNodes.push(hrefNode);
		
			initSubMenuItems(currentMainMenuNode);
		
			itemIndex++;
		}
	}
}

function initMenuNodes(menuNode) {
	initMainMenuItems(menuNode);

	for (var i = 0; i < mainMenuNodes.length; i++) {
		setMenuHeight(i, 0);
	
		if (i >= 1) {
			mainMenuNodes[i].style.marginTop = mainMenuTopMargin + 'px';
		}
		mainMenuNodes[i].style.overflow = 'hidden';
	}
}


function syncArrows() {

	var yOffset = 0;
	for (var i = 0; i < mainMenuNodes.length; i++) {
		arrowNodes[i].style.top = parseInt(mainMenu.style.top.replace('px','')) - slideMenuY - menuGreyBarYOffset
					  + arrowYOffsetInGreyBar + yOffset + 'px';
		arrowNodes[i].style.left = arrowXOffsetInGreyBar + 'px';
	

		yOffset = yOffset + mainMenuTopMargin
			  + getMenuHeight(i);

	}
	

	for (var i = 0; i < mainMenuNodes.length; i++) {
		var arrowImageNode = arrowNodes[i].childNodes[0].childNodes[0];
		var currentSubMenuSize = getMenuHeight(i) - mainMenuItemHeight;
		var maxSubMenuSize = subMenuItemCount[i]
					* (subMenuItemHeight + subMenuHeightCorrection) + subMenuTopMargin + subMenuScrollAddon;
	
		var arrowImageIndex = ((currentSubMenuSize * 9) / maxSubMenuSize).toFixed(0);
		if (arrowImageNode.src != arrowImages[arrowImageIndex].src) {
			arrowImageNode.src = arrowImages[arrowImageIndex].src;
			arrowImageNode.width = arrowImages[arrowImageIndex].width;
			arrowImageNode.height = arrowImages[arrowImageIndex].height;
		}
	}
}

function initArrows() {

	for (var i = 0; i < 10; i++) {
		ArrowImage = new Image();
		ArrowImage.src = imageDirectory + '/Arrow' + i + '.' + imageFileExtension;
		arrowImages.push(ArrowImage);
	}
	
	var arrowsNode = document.getElementById('arrows');
	arrowsNode.style.position = 'absolute';
	arrowsNode.style.top = '0px';
	arrowsNode.style.left = '0px';
	for (var i = 0; i < mainMenuNodes.length; i++) {
		var newArrowNode = document.createElement('DIV');
		newArrowNode.id = ARROW_ID_PREFIX + '_' + i;
		newArrowNode.style.position = 'absolute';
		newArrowNode.onclick = handleArrowClicked;
	
		Arrow = new Image();
		Arrow.src = arrowImages[0].src;

		var arrowHRef = document.createElement('A');
		arrowHRef.href = mainMenuNodes[i].getElementsByTagName('A')[0];
		arrowHRef.appendChild(Arrow);
		newArrowNode.appendChild(arrowHRef);
	
		arrowsNode.appendChild(newArrowNode);
		arrowNodes.push(newArrowNode);
	}
	
	syncArrows();
	arrowsNode.style.visibility = 'visible';
}

function initSlideMenu() {
	mainMenu = document.getElementById('popupmenu');
	mainMenu.style.position = 'absolute';
	mainMenu.style.left = slideMenuX + 'px';
	mainMenu.style.top = slideMenuY + 'px';
	mainMenu.style.top = menuW + 'px';

	initMenuNodes(mainMenu);
}

function initGreyBar() {
	var menuGreyBarNode = document.getElementById('menu_grey_bar');
	menuGreyBarNode.style.position = 'absolute';
	menuGreyBarNode.style.top = slideMenuY + menuGreyBarYOffset + 'px';
	menuGreyBarNode.style.left = slideMenuX + menuGreyBarXOffset + 'px';
}

//function initMenu() {
function ooim() {
	var menu = document.getElementById('menu');

	menu.style.visiblity = 'hidden';
	menu.style.position = 'absolute';
	menu.style.left = menuX + 'px';
	menu.style.top = menuY + 'px';
	menu.style.width = menuW + 'px';
	menu.style.height = menuH + 'px';
	menu.style.overflow = 'hidden';		
	
	initGreyBar();
	initSlideMenu();
	initArrows();
	initMenuItemImages();

	menu.style.visibility = 'visible';

	var location = window.location.href;
	var paramIndex = location.indexOf('?m=');
	if (paramIndex >= 0) {

		var state = location.substring(paramIndex + 3, location.length)
		if (state.indexOf('?') != -1) {
			state = state.substring(0, state.indexOf('?'));
			state = parseInt(state);
		}

		restoreState(state);
	} else {
		setTimeout('animateScrollInMenu()', 200);
	}
}