var opcionesMenu;// guardamos en un array todos los elementos li del menú
var bloquesContenido;// guardamos en un array todos los bloques de información
var claseSeleccionado = "elementoMenuSelecionado";// ver css/javascript.css
var id = 0;

function getId(opcionMenu){
	var l = opcionesMenu.length;
	
	for(var i = 0; i < l; i++){
		if(opcionMenu.html() == $(opcionesMenu[i]).html()){
			return i;
		}
	}
}

function actualizarContenido(id){
	var l = bloquesContenido.length;
	
	for(i = 0; i < l; i++){
		$(bloquesContenido[i]).hide();// ocultar todos los bloques de información
	}
	
	$(bloquesContenido[id]).fadeIn("fast");// mostrar aquel cuyo id se corresponde con el id del elemento li pulsado
}

function actualizarMenu(id){
	var l = opcionesMenu.length;
	
	for(i = 0; i < l; i++){
		$(opcionesMenu[i]).find("a").removeClass(claseSeleccionado);// eliminamos el estilo a todos los elementos del menú
	}
	
	$(opcionesMenu[id]).find("a").addClass(claseSeleccionado);// damos estilo a aquel cuyo id se corresponde con el id del nuevo bloque mostrado
}

function mostrarBloque(id){
	$(bloquesContenido[id]).show();// mostrar el primer bloque de información
	$(opcionesMenu[id]).find("a").addClass(claseSeleccionado);// representar como seleccionado el primer elemento del menú
}

$(document).ready(function(){

	if($("div#web").hasClass("articuloDetalle")){
		return;
	}

	opcionesMenu = $("ul.menuInterior li");
	bloquesContenido = $("#cuerpo div.bloqueInfoOcultable");
	
	var length = opcionesMenu.length;
	
	for(var i = 0; i < length; i++){
		var opcionMenu = $(opcionesMenu[i]);
		opcionMenu.find("a").click(function(event){
			
			if($(this).hasClass(claseSeleccionado)){
				event.preventDefault();// evitar el refresco de la página
				return;
			}
			
			id = getId($(this).parent());
			actualizarContenido(id);
			actualizarMenu(id);
			event.preventDefault();// evitar el refresco de la página
		});
	}
	
});