Viên ngọc phương Đông

$(function()
{
	var mobileMenuElement = $("<div id='mobileMenu'><h1><a href='#'>Menu</a></h1><ul></ul></div>");
	
	$(".header").after(mobileMenuElement);
	var mobileMenuItems = getMobileMenuArray();
	mobileMenu(mobileMenuItems);
});

function getMobileMenuArray()
{
	var items = {};
	
	/*$("#superHeader > .container > li > a").each(function()
	{
		items[$(this).text()] = $(this).attr("href");
	});*/
	
	$(".main-navigation > ul > li").each(function()
	{
		var submenu = $(this).find("ul");
		var link = $(this).children("a");
	
		if(submenu.length > 0)
		{
			items[link.text()] = {};
			items[link.text()][link.text()] = link.attr("href");
			
			submenu.find("a").each(function()
			{
				items[link.text()][$(this).text()] = $(this).attr("href");
			});
		}
		else
		{
			items[link.text()] = link.attr("href");
		}
	});
	
	return items;
}

function menuPagePrevious()
{
	var current = $("#mobileMenu").find("ul").last();
	var previous = current.prev();
	
	current.slideUp(400, function()
	{
		current.remove();
	});
	
	previous.slideDown();
	
	return false;
}

function menuPageNext(menuArray)
{
	var current = $("#mobileMenu").find("ul").last();
	var newMenu = $("<ul></ul>");
	
	newMenu.append(makeMenu(menuArray, true));
	newMenu.hide();
	
	current.after(newMenu);
	current.slideUp();
	
	newMenu.slideDown();
	
	return false;
}

function makeMenu(menuArray, addBack)
{
	var menuItems = [];
	var menuItem = null;
	
	if(addBack)
	{
		menuItem = $("<li class='back'><a href='#'>Back</a></li>");
		menuItem.find("a").click(menuPagePrevious);
		menuItems.push(menuItem);
	}
	
	$.each(menuArray, function(label, content)
	{
		if($.isPlainObject(content))
		{
			menuItem = $("<li class='submenu'><a href='#'>" + label + "</a></li>");
			
			menuItem.find("a").click(function()
			{
				menuPageNext(content);
				return false;
			});
		}
		else
		{
			menuItem = $("<li><a href='" + content + "'>" + label + "</a></li>");
		}
		
		menuItems.push(menuItem);
	});
	
	return menuItems;
}

function mobileMenu(menuArray)
{
	items = $("#mobileMenu").find("ul").first();
	var heading = $("#mobileMenu h1 a");
	
	items.hide();
	var shown = false;
	
	heading.click(function()
	{
		if(shown)
		{
			$("#mobileMenu").find("ul:visible").slideUp(400, function()
			{
				$("#mobileMenu").find("ul").not(items).remove();
			});
			
			heading.removeClass("active");
			shown = false;
		}
		else
		{
			items.slideDown();
			heading.addClass("active");
			shown = true;
		}
		
		return false;
	});
	
	var list = makeMenu(menuArray, false);
	items.append(list);
}