var columnWidth = 185;
var rowHeight = 26;

function showMenu(opcion) {
	opcion = opcion.replace(/\s{2,}/, ' ');
	var clases = opcion.split(" ").join(".");
	$("."+clases).children("ul").show();
}

function configureMenu() {
	$(".AspNet-Menu a").each(function() {
		$(this).removeAttr("title");																
	});		
		
	$(".AspNet-Menu li.AspNet-Menu-WithChildren.AspNet-Menu-Depth-0").each(function() {
		// Obtenemos los títulos de primer nivel
		var titulos = $(this).find("li.AspNet-Menu-WithChildren.AspNet-Menu-Depth-1");	
		// Obtenemos las opciones de primer nivel sin título
		var opciones = $(this).find("li.AspNet-Menu-Leaf.AspNet-Menu-Depth-1");
		
		// Cada título de primer nivel estará en una nueva columna, por tanto, el contenedor global tendrá tantas columnas como títulos más una si hay opciones de primer nivel sin titulo
		var addColumns = (opciones.size() > 0)?1:0;
		var alto = 0;

		// Posicionamos cada título de primer nivel en una nueva columna y le quitamos el enlace
		titulos.each(function(index) { 
			var izq = (index+addColumns)*columnWidth;
			$(this).css("left",izq);
			/*var enlace = $(this).children("a.AspNet-Menu-Link");
			var titulo = "<span class=\"AspNet-Menu-Title\">"+enlace.text()+"</span>";
			enlace.replaceWith(titulo);*/
			
			// Le añadimos una clase a los títulos
			$(this).addClass("AspNet-Menu-Title");
			
			// Calculamos el alto de la columna, si es mayor que el alto del contenedor, actualizamos el alto (Le sumamos 45 por el alto del título)
			var height = ($(this).find("li.AspNet-Menu-Depth-2").size() * rowHeight) + 45; 
			if (height > alto) alto = height;
		});
		
		// Establecemos el ancho del contendor global como el número de columnas por el ancho de cada columna (definido en la variable columnWidth)
		// Establecemos el alto del contenedor global calculado según el alto de fila (definido en la variable rowHeight)
		var ancho = (titulos.size()+addColumns)*columnWidth;
		var opcionesHeight = opciones.size()*rowHeight;
		if (opcionesHeight > alto) alto = opcionesHeight;
		$(this).find("ul").eq(0).css("width",ancho+"px").css("height",alto+"px");
		
		// Asociamos el efecto de apareción y ocultado del submenú
		$(this).hover(function() {
			reloj = setTimeout("showMenu(\""+ $(this).attr("class") +"\")",100);
			//$(this).children("ul").fadeIn();
		},function() {
			clearTimeout(reloj);
			$(this).children("ul").hide();			
		});
	});
}

$(document).ready( function() {
	configureMenu();
	/*menuStyling();*/
})