var fadeSpeed = 400;

$(document).ready(function() {

	// Hides the menu when a user clicks elsewhere
	$(document).click(function(e){
		hideMenus(null);
	});

	// Stops the menu from hiding when user clicks inside the element
	$('.sub-menu').click(function(e) {
		hideMenus(e.currentTarget);
		e.stopPropagation();
	});

	// Shows the menu
	$('.top-menu').click(function(e) {
		var obj = $(e.currentTarget);
		var submenu = $(obj).children('.sub-menu');
		var menubutton = $(obj).children('span.menu-button').get(0);
		var submenu_id = submenu.get(0).id;

		var currentmenu = $('.sub-menu.active');
		var currentmenu_id = null;
		if (currentmenu.length > 0) {
			currentmenu_id = currentmenu.get(0).id;
		}

		// If they clicked on a different menu, then show it
		if (currentmenu_id === null || (currentmenu_id != submenu_id)) {
			hideMenus(submenu, function(){
				submenu.css('display', 'none').addClass('active').fadeIn(fadeSpeed, 'swing');
				$(menubutton).addClass('active');
			});
		} else {
			hideMenus(null);
		}

		e.stopPropagation();
		e.preventDefault();
	});

});

function hideMenus(clickedMenu, f) {
	$('.sub-menu.active').each(function(index, obj) {
		var obj_id = $(obj).get(0).id;
		var clicked_id = null;
		if (clickedMenu != null) {
			clicked_id = $(clickedMenu).get(0).id;
		}

		if (obj_id != clicked_id) {
			hideMenu(obj);
		}
	});
	if (typeof f == "function") {
		f();
	}
}

function hideMenu(obj) {
	$(obj).fadeOut(fadeSpeed, function(){
		$(this).removeClass('active').css('display', 'block');
	});
	var menubutton = $(obj).siblings('span.menu-button');
	menubutton.removeClass('active');
}