/**
 * @import com.emaildatasource.eds.punt.client.taglib.tagjsp.menu_jsp.CONTAINER menu.container
 */
eds.punt.client.widget.Menu = function(domIds, selfReference, uid, menuItems) {

	var MENU_HEIGHT = 26;

	var key = eds.punt.client.KeyChain.menu;

	var that = this;

	var menuIdPrefix = 'puntMenu';
	var menuId = 0;

	var skipNextShow = false;

	var subMenuCounts = {};

	var mainMenu = '';

	if ( arguments.length != 4 ) {
		throw "menu wrong number of elements";
	}

	eds.webapp.widget.Widget.call(this, domIds);

	this.init = function() {
		setupMenu();
		this.setElHtml(key.container, mainMenu);
	}

	this.destroy = function() { }

	function getWidth(menuItem) {

		return 'width: ' + menuItem['width'] + 'px;';
	}

	function getHeight() {
		return 'height: ' + MENU_HEIGHT + 'px;';
	}

	function getNextMenuId() {
		return menuIdPrefix + menuId++;
	}

	function setupSubMenu(subMenu) {

		var thisMenu;

		var thisMenuHtml = '';

		var menuId = getNextMenuId();

		var newLayer;

		for ( var index in subMenu ) {

			var menuItem = subMenu[index];

			var value = menuItem['value'];

			var type = value.constructor.toString();

			if (type.indexOf("Array") == -1) {
				thisMenuHtml += '<div class="menuItem" style="'+
					getHeight() +
					'"><a href="' + value + '">' +
					menuItem['name'] + '</a></div>';
			} else {

				thisMenuHtml += '<div class="menuItem" onMouseOver="" ' +
					getWidth(menuItem) + '>' +
					menuItem['name'] + '</div>';

				for ( var index in value ) {
					subMenus.concat(drawLowerLevel(value));
				}

			}

		}

		thisMenuHtml += '</div>';

		thisMenu  = document.createElement('div');
		thisMenu.id = menuId;
		thisMenu.className = 'subMenuItem';
		thisMenu.innerHTML = thisMenuHtml;

		document.body.appendChild(thisMenu);

		newLayer = new eds.webapp.layout.Layer(thisMenu);

		newLayer.hide();

		subMenuCounts[menuId] = subMenu.length;

		return menuId;
	}

	function setupTopLevel(menuItem) {

		var menuId = getNextMenuId();

		var subMenuId;

		var type = menuItem['value'].constructor.toString();

		if (type.indexOf("Array") == -1) {
			throw "top lovel must be an array of submenus";
		}

		subMenuId = setupSubMenu(menuItem['value']);

		mainMenu += '<div id="' + menuId + '" class="menuItem" ' +
			' style=" ' + getWidth(menuItem) + ' ' + getHeight() +
			'" onClick="' + selfReference + '.toggleMenu(\'' +
			subMenuId + '\', \'' + menuId + '\');"><a href=#dontgoanywhere>' +
			menuItem['name'] + '</a></div>';

	}

	function setupMenu() {

		mainMenu = '';

		for ( var index in menuItems ) {

			var menuItem = menuItems[index];

			setupTopLevel(menuItem);
		}

	}

	function showMenu(menuId, parentMenuId) {

		var parentMenu;
		var collapse; 
		var layer;
		var subMenuHeight;

		layer = new eds.webapp.layout.Layer(menuId);

		subMenuHeight = MENU_HEIGHT * ( subMenuCounts[menuId] - 1 );

		layer.showByOffset(parentMenuId, 0, subMenuHeight, MENU_HEIGHT, -1);

		parentMenu = that.getRtEl(parentMenuId);

		parentMenu.className += ' topMenuItemSelected ';

		collapse = new eds.webapp.layout.AutoCollapseLayer(menuId,
			function(ev) {
				var layer = new eds.webapp.layout.Layer(parentMenuId);
				if ( layer.contains(ev) ) {
					skipNextShow = true;
				}
				that.hideMenu(menuId, parentMenuId);
			});

		collapse.enableCollapseMode();

		currentSubMenu = menuId;
		currentParentMenu = parentMenuId;
	}

	this.toggleMenu = function(menuId, parentMenuId) {

		if ( !skipNextShow ) {
			showMenu(menuId, parentMenuId);
		}
		skipNextShow = false;
	}


	this.hideMenu = function(menuId, parentMenuId) {

		var parentMenu = that.getRtEl(parentMenuId);
		var layer = new eds.webapp.layout.Layer(menuId);

		layer.hide();

		parentMenu.className =
			parentMenu.className.replace('topMenuItemSelected', '');

	}

	this.toString = function() {
		return '[menu object]';
	}
}

eds.punt.client.widget.Menu.prototype = new eds.webapp.widget.Widget(null);