var fadeSpeed = 400;

jQuery(document).ready(function() {

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

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

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

		var currentmenu = jQuery('.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');
				jQuery(menubutton).addClass('active');
			});
		} else {
			hideMenus(null);
		}

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

});

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

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

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