// 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']='galeria_rafting.html';
tabsId['tab2']='galeria_canopy.html';
tabsId['tab3']='galeria_horses.html';
tabsId['tab4']='galeria_rappel.html';
tabsId['tab5']='galeria_hiking.html';
tabsId['tab6']='galeria_bikes.html';
// Declaro el ID del DIV que actuará como contenedor de los datos recibidos
var contenedor='galeria';

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()
{
	/* Recorro las pestañas para dejar en estado "apagado" a todas menos la que se ha clickeado. Teniendo en cuenta que solo puede haber una pestaña "encendida"
	a la vez resultaría mas óptimo hacer un while hasta encontrar a esa pestaña, cambiarle el estilo y luego salir, pero, creanme, se complicaría un poco el
	ejemplo y no es mi intención complicarlos */
	for(key in tabsId)
	{
		// Obtengo el elemento
		elemento=document.getElementById(key);
		// Si es la pestaña activa
		if(elemento.className=='tabactivo')
		{
			// Cambio el estado de la pestaña a inactivo 
			elemento.className='tabinactivo';
		}
	}
	// Cambio el estado de la pestaña que se ha clickeado a activo
	this.className='tabactivo';
	
	/* De aqui hacia abajo se tratatan la petición y recepción de datos */
	
	// Obtengo el identificador vinculado con el ID del elemento HTML que referencia a la sección a cargar
	seccion=tabsId[this.id];
	
	// Coloco un mensaje mientras se reciben los datos
	tabContenedor.innerHTML='Cargando, por favor espere...';
	
	// Creo el objeto AJAX y envio la petición por POST (para evitar cacheos de datos)
	var ajax=nuevoAjax();
	ajax.open("POST",seccion, true);
	ajax.setRequestHeader("content-Type", "application/x-www-form-urlencoded");
	ajax.send(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ña seleccionada...
	if(this.className!='tabactivo')
	{
		// Cambio el color de fondo de la pestaña
		this.className='tabinactivo';
	}
}

function mouseFuera()
{
	// Si el evento no se produjo en la pestaña seleccionada...
	if(this.className!='tabactivo')
	{
		// Cambio el color de fondo de la pestaña
		this.className='tabinactivo';
	}
}



div='foto';
if(navigator.userAgent.indexOf("MSIE")>=0) 
{navegador=0;}
else if(navigator.userAgent.indexOf("Firefox")>=0)
{navegador=1;}
else if(navigator.userAgent.indexOf("Opera")>=0)
{navegador=2;}

function cargafoto()
{
//obtenemos todas las etiquetas img
	
	d = document.getElementsByTagName('img');
	
	for(i=0;i<d.length;i++)
	{
		if(d[i].className == 'imagen')
		{
			if (navegador==0)
			{
				var path_img=d[i].src;
				d[i].onmouseover=function asigna()
								{
									var path_img=this.src.substr(this.src.indexOf("images"),this.src.length);
									loadFoto(event,path_img);	
								}
			}
			else if(navegador==1 || navegador==2)
			{
				var path_img=d[i].src.substr(d[i].src.indexOf("images"),d[i].src.length);
				d[i].setAttribute("onmouseover","loadFoto(event,'"+path_img+"');");
			}
		}
	}
}


onload=function()
{
	
	cargafoto();
	
	for(key in tabsId)
	{
		// Voy obteniendo los ID's de los elementos declarados en el array que representan a las pestañas
		elemento=document.getElementById(key);
		// Asigno que al hacer click en una pestaña se llame a la funcion cargaContenido
		if(elemento){
			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ía pasar de rgb(xxx, xxx, xxx) a formato #xxxxxx pero complicaría innecesariamente el ejemplo */
			elemento.onmouseover=mouseSobre;
			elemento.onmouseout=mouseFuera;
		}
	}
	// Obtengo la capa contenedora de datos
	tabContenedor=document.getElementById(contenedor);
}


/////////////////////////////////////foto///////////////////////////////////////////


function posFoto(event,ancho,alto)
{
	var divFoto=document.getElementById(div);
	if(navegador==0)
	{
		var corX=window.event.clientX+document.documentElement.scrollLeft;
		var corY=window.event.clientY+document.documentElement.scrollTop;
	}
	else if(navegador==1)
	{
		var corX=event.clientX+window.scrollX;
		var corY=event.clientY+window.scrollY;
	}
	else if(navegador==2)
	{
		var corX=event.clientX + document.body.scrollLeft;
		var corY=event.clientY + document.body.scrollTop;
	}
	divFoto.style.top=corY+5+"px";
	divFoto.style.left=corX-200+"px";
}


function hideFoto()
{
	var divFoto=document.getElementById(div);
	divFoto.style.display="none";
}

function showFoto(event, foto)
{
	var divFoto=document.getElementById(div);
	divFoto.background="#FFFFFF";
	posFoto(event);
	if(navegador==0) 
	{ 
		document.attachEvent("onmousemove", posFoto); 
		document.attachEvent("onmouseout", hideFoto); 
	}
	else 
	{
		document.addEventListener("mousemove", posFoto, true);
		document.addEventListener("mouseout", hideFoto, true);
	}
	divFoto.innerHTML='<img src="imagen.php?imagen=images/galeria/'+foto+'&ancho=360&calidad=1" alt="Foto" />';
	divFoto.style.display="block";
	divFoto.style.width="auto";
	divFoto.style.height="auto";
}


function loadFoto(event, foto)
{
	var divFoto=document.getElementById(div);
	divFoto.background="#FFFFFF";
	posFoto(event);
	if(navegador==0) 
	{ 
		document.attachEvent("onmousemove", posFoto); 
		document.attachEvent("onmouseout", hideFoto); 
	}
	else 
	{
		document.addEventListener("mousemove", posFoto, true);
		document.addEventListener("mouseout", hideFoto, true);
	}
	
	divFoto.innerHTML='<img src="imagen.php?imagen='+foto+'&ancho=200&calidad=1" alt="Foto" />';
	divFoto.style.display="block";
	divFoto.style.width="auto";
	divFoto.style.height="auto";
}