var close_bar_div = "<div class=\"close_bar\">CERRAR</div>";

$(document).ready(

	function(){
		
		//onInit, cerramos todas las listas
		$("#years ul.year").hide();
	
		
		//click on year
		$('ul#years h3').click(function(){
			
			//Buscamos la lista correspondiente al año
			var _ul = $(this).next();
			
			//Verificamos si tenemos que abrir o cerrar
			if(!_ul.is(":visible")){
				
				//Eliminamos el "close button" en todas las listas
				$("#years div.close_bar").remove();
				//Cierramos todas las listas
				$("#years ul.year").hide();
				
				//Abrimos la lista donde hemos hecho click
				open_year_ul( _ul );
				
				
			} else {
			
				//Cerramos la lista donde hemos hecho click
				close_year_ul( _ul );
			}
			
		});
	}
);

function open_year_ul( current_ul ){
	
	//Creamos un nodo con el botón cerrar
	var closeNode = $( close_bar_div );
	
	//Le asignamos un click event handler
	closeNode.click( on_click_on_close );
	
	//Lo agregamos al DOM
	var _next = current_ul.parent(); 
	_next.append(closeNode);
	
	//Abrimos la lista
	current_ul.slideDown();
	
}

function close_year_ul( current_ul ){
	
	//Recuperamos el item de la lista
	var _next = current_ul.parent();
	
	//Recuperamos y eliminamos el botón de "cerrar"
	var close_bar = $(".close_bar", _next);
	close_bar.remove();
	
	//Cerramos la lista
	current_ul.slideUp();

}

function on_click_on_close( event ){
	
	var cerrar_btn = $(event.currentTarget);
	close_year_ul( cerrar_btn.prev() );
		
}