// Declaro un array en el cual los indices son los ID's de los DIVS que funcionan como pestaña y los valores son los identificadores de las secciones a cargar
var tabsId=new Array();
tabsId['tab1']='Noticias';
tabsId['tab2']='Deportes';
tabsId['tab3']='Entretenimiento';
// Declaro el ID del DIV que actuará como contenedor de los datos recibidos
var contenedor='tabContent';

function nuevoAjax()
{ 
	/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
	lo que se puede copiar tal como esta aqui */
	var xmlhttp=false; 
	try 
	{ 
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
	}
	catch(e)
	{ 
		try
		{ 
			// Creacion del objeto AJAX para IE 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
		catch(E) { xmlhttp=false; }
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); } 

	return xmlhttp; 
}

function cargaContenido()
{	
	for(key in tabsId)
	{		
		elemento=document.getElementById(key);
		
		if(elemento.className=='tabOn')
		{	
			elemento.className='tabOff';
		}
	}
	
	this.className='tabOn';			
	
	seccion=tabsId[this.id];
	
	
	tabContenedor.innerHTML='<img src="images/loading2.gif"> Cargando, por favor espere...';
	
	
	var ajax=nuevoAjax();
	ajax.open("POST", "core/get_tab_content.php", true);       
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	ajax.send('seccion='+seccion);
	
	ajax.onreadystatechange=function()
	{
		if(ajax.readyState==4)
		{
			// Al recibir la respuesta coloco directamente el HTML en la capa contenedora
			tabContenedor.innerHTML=ajax.responseText;
		}
	}
}

function mouseSobre()
{
	// Si el evento no se produjo en la pesta&#241;a seleccionada...
	if(this.className!='tabOn')
	{
		// Cambio el color de fondo de la pesta&#241;a
		this.className='tabHover';
	}
}

function mouseFuera()
{
	// Si el evento no se produjo en la pesta&#241;a seleccionada...
	if(this.className!='tabOn')
	{
		// Cambio el color de fondo de la pesta&#241;a
		this.className='tabOff';
	}
}

onload=function()
{
	for(key in tabsId)
	{
		// Voy obteniendo los ID's de los elementos declarados en el array que representan a las pesta&#241;as
		elemento=document.getElementById(key);
		// Asigno que al hacer click en una pesta&#241;a se llame a la funcion cargaContenido
		elemento.onclick=cargaContenido;
		/* El cambio de estilo es en 2 funciones diferentes debido a la incompatibilidad del string de backgroundColor devuelto por Mozilla e IE.
		Se podr&#237;a pasar de rgb(xxx, xxx, xxx) a formato #xxxxxx pero complicar&#237;a innecesariamente el ejemplo */
		elemento.onmouseover=mouseSobre;
		elemento.onmouseout=mouseFuera;
	}
	// Obtengo la capa contenedora de datos
	tabContenedor=document.getElementById(contenedor);
}