function CreateMenu(p)
{
	if ($('#menuContainer'))
		$('#menuContainer').remove();
		
	var parent = (typeof(p) == 'object' ? $(p) : $('#' + p));
	
	var menuContainer = CreateContainer(parent);
	menuContainer.css('left', parent.offset().left - 1);
	menuContainer.css('top', parent.offset().top + parent.height());
	
	$('body').append(menuContainer);
	
	/*
	 * dynamically adjusting dimensions.
	 */
	UpdateMenuItems();
	
	// -2, same as above 
	$('#shadowBottom').width($('#menuMain').width() - $('#shadowBottomLeft').width() - 2); 
	
	// +1 because there is only bottom border set to 1px
	$('#shadowRight').height($('#menuMain').height() - $('#shadowRightTop').height() + 1); 
	
	$('#menuTopBorder').width($('#menuMain').width() - parent.width());
	 
	// +2 because there are left and right borders, both set to 1px so 1 + 1 = 2
	menuContainer.width($('#menuMain').width() + $('#menuRight').width() + 2); 
	 
	menuContainer.css('visibility', 'visible');
	
	menuContainer.mouseout(DestroyMenu);
	parent.mouseout(DestroyMenu);
}

function DestroyMenu(e)
{
	var x = e.pageX;
	var y = e.pageY;
	
	var left 	= $('#menuContainer').position().left;
	var top 	= $('#menuContainer').position().top;
	var bottom 	= top + $('#menuContent').height();
	var right 	= left + $('#menuContent').width();	
	
	if (!((x > left) && (x < right) && (y >= top) && (y < bottom)))
		$('#menuContainer').remove();
}

function CreateContainer(parent)
{
	var menuContainer = $('<div id="menuContainer" style="visibility: hidden;"></div>');
	
	var menuMain = CreateMainMenu(parent);

	/*
	 * right shadow
	 */
	var menuRight = $('<div id="menuRight"></div>');
	menuRight.append('<div id="shadowRightTop"></div>');
	menuRight.append('<div id="shadowRight"></div>');
	
	/*
	 * bottom shadow
	 */
	var menuBottom = $('<div id="menuBottom"></div>');
	menuBottom.append('<div id="shadowBottomLeft"></div>');
	menuBottom.append('<div id="shadowBottom"></div>');
	menuBottom.append('<div id="shadowBottomRight"></div>');

	return menuContainer.append(menuMain).append(menuRight).append(menuBottom);
}

function CreateMainMenu(parent)
{
	var mainMenu = $('<div id="menuMain"></div>');
	
	mainMenu.append('<div id="menuTopBorder"></div>');
	mainMenu.append(CreateMenuItems(parent));
	
	return mainMenu;
}

function CreateMenuItems(parent)
{
	var id = parent.attr('id');
	var menuContent = $('<div id="menuContent"></div>');
	
	if (menu[id]) 
	{
		for (i = 0; i < menu[id].length; i++)
			menuContent.append(CreateMenuItem(menu[id][i]['text'], menu[id][i]['link']));
	}
	
	return menuContent;
}

function CreateMenuItem(text, href)
{
	var menuItem = $('<div class="menuItem" onmouseover="ActivateMenuItem(this);" onmouseout="DeactivateMenuItem(this);" onclick="document.location=\'' + href + '\'"></div>');
	
	menuItem.append('<div class="left">&nbsp;</div>');
	menuItem.append('<div class="middle"><a href="' + href + '">' + text + '</a></div>');
	menuItem.append('<div class="right">&nbsp;</div>');
	
	return menuItem;
}

function UpdateMenuItems()
{
	var items = $('#menuContent').children('.menuItem').children('.middle');
	var maxWidth = 0;
	for (i = 0; i < items.length; i++) 
	{
		var width = $(items[i]).width();
		if (width > maxWidth)
			maxWidth = width;
	}
	$('#menuContent').children('.menuItem').children('.middle').width(maxWidth);
	$('#menuMain').width(maxWidth + 20); // 2*10 - powinno byc zgarniete z ".menuItem .right" i ".menuItem .left"
}

function ActivateMenuItem(menuItem)
{
	children = $(menuItem).children();
	for (i = 0; i < children.length; i++) 
	{
		className = $(children[i]).attr('class');
		$(children[i]).attr('class', className + '_on');
	}
}

function DeactivateMenuItem(menuItem)
{
	children = $(menuItem).children();
	for (i = 0; i < children.length; i++) 
	{
		className = $(children[i]).attr('class');
		className = className.substr(0, className.length - 3);
		$(children[i]).attr('class', className);
	}
}