/* ------ Para que aparezcan varias imagenes en pantalla -------*/

// Numero de iconos que tenemos
var num_iconos = 8;

// Indicala categoria de fotos seleccionada
var seleccion = "";

// Imagen en blanco
var imgBlanco = new Image();
imgBlanco.src = "../images/fondo_blanco.jpg";

//directorio o ruta donde están las imágenes
var direcueva1Ico = "../images/iconos/cueva1/";
var direcueva2Ico = "../images/iconos/cueva2/";
var direExteriorIco = "../images/iconos/exterior/";

var direcueva1Ima = "../images/fotos/cueva1/";
var direcueva2Ima = "../images/fotos/cueva2/";
var direExteriorIma = "../images/fotos/exterior/";

var imagenes_cueva1=new Array();
var imagenes_cueva2=new Array();
var imagenes_exterior=new Array();

var preImagenescueva1 = new Array();
var preImagenescueva2 = new Array();
var preImagenesExterior = new Array();

// Guarda la imagen seleccionada actualemente
var imagenSeleccionada = "icono1";

// Texto de las imágenes
var texto_cueva1 = new Array();
var texto_cueva2 = new Array();
var texto_exterior = new Array();

var texto_caracteristicas = "";

// Para el ALT de las imágenes, igual para todas
var alt = new Array();
alt[1] = "casas rurales en alquiler";
alt[2] = "rurales encanto";
alt[3] = "casas cuevas";
alt[4] = "casas jacuzzi";
alt[5] = "casas rurales jacuzzi"; 
alt[6] = "alquiler cuevas"; 
alt[7] = "cuevas granada";
alt[8] = "alojamientos encanto";
 
// Rellenamos los textos ---



texto_tablaIconos = '<table width="750" border="0" id="tablaIconos"><tr><td width="85" height="74" id="columnIcon1"><a href="#" title="cuevas guadix"><img src="." name="icono1" id="icono1" width="85" height="62" border="0" onClick="cambiaBordeSeleccion(\'icono1\'); cambiaImagen(\'1\'); cambiaTexto(\'1\')"></a><div id="icon1text"></div></td><td width="85"><a href="#" title="granada cueva"><img src="." name="icono2" id="icono2" width="85" height="62" border="0" onClick="cambiaBordeSeleccion(\'icono2\'); cambiaImagen(\'2\'); cambiaTexto(\'2\')"></a><div id="icon2text" align="center" class="Estilo32"></div></td><td width="85"><a href="#" title="alojamientos encanto"><img src="." name="icono3" id="icono3" width="85" height="62" border="0" onClick="cambiaBordeSeleccion(\'icono3\'); cambiaImagen(\'3\'); cambiaTexto(\'3\')"></a><div id="icon3text"></div></td><td width="60" align="left"><a href="#" title="encanto rural"><img src="." name="icono4" id="icono4" width="85" height="62" border="0" onClick="cambiaBordeSeleccion(\'icono4\'); cambiaImagen(\'4\'); cambiaTexto(\'4\')"></a><div id="icon4text" align="center" class="Estilo32"></div></td><td width="28"><a href="#" title="turismo encanto"><img src="." name="icono5" id="icono5" width="85" height="62" border="0" onClick="cambiaBordeSeleccion(\'icono5\'); cambiaImagen(\'5\'); cambiaTexto(\'5\')"></a><div id="icon5text"></div></td><td width="8"><a href="#" title="alquiler cuevas"><img src="." name="icono6" id="icono6" width="85" height="62" border="0" onClick="cambiaBordeSeleccion(\'icono6\'); cambiaImagen(\'6\'); cambiaTexto(\'6\')"></a><div id="icon6text" align="center" class="Estilo32"></div></td><td width="26"><a href="#" title="cueva guadix"><img src="." name="icono7" id="icono7" width="85" height="62" border="0" onClick="cambiaBordeSeleccion(\'icono7\'); cambiaImagen(\'7\'); cambiaTexto(\'7\')"></a><div id="icon7text"></div></td><td width="44"><a href="#" title="casas rurales en alquiler"><img src="." name="icono8" id="icono8" width="200" height="62" border="0" onClick="cambiaBordeSeleccion(\'icono8\'); cambiaImagen(\'8\'); cambiaTexto(\'8\')"></a><div id="icon8text" align="center" class="Estilo32">';

texto_caracteristicas = texto_caracteristicas+'Estas dos <strong>casas cuevas </strong> son una vivienda tradicional con mas de <strong>100 a&ntilde;os </strong>de antig&uuml;edad, recientemente restauradas.<strong> Excavadas </strong>&iacute;ntegramente <strong> en la monta&ntilde;a </strong>que delimita el casco urbano de un <strong>peque&ntilde;o pueblo </strong>de no mas de 300 habitantes.&#13;';
texto_caracteristicas = texto_caracteristicas + '<br>Ambas cuevas están dotadas de un acondicionamiento e instalaciones de auténtico <strong>lujo</strong>.</p>';
texto_caracteristicas = texto_caracteristicas + '<ul><li><strong>Jacuzzi privado</strong> en cada una de las cuevas.';
texto_caracteristicas = texto_caracteristicas + '<li>Alquiler integro de la cueva completa, Cada cueva dispone de <strong>6 plazas</strong> en tres dormitorios cada una, un <strong>sofá cama y dos camas plegables</strong>. <strong><u>Total hasta 10 plazas por cada cueva</u></strong>.</li>';
texto_caracteristicas = texto_caracteristicas + '<li>Cocinas totalmente equipadas con amplia <strong>chimenea</strong>.</li>';
texto_caracteristicas = texto_caracteristicas + '<li>Baño completo con singular <strong>ducha hidromasaje</strong>.</li>';
texto_caracteristicas = texto_caracteristicas + '<li>Salónes con televisión, DVD, colección de películas, juegos de mesa etc.</li>';
texto_caracteristicas = texto_caracteristicas + '<li>Amplia zona de <strong>barbacoas</strong>.</li>';
texto_caracteristicas = texto_caracteristicas + '<li><strong>Niños</strong>: cuna y sillón trona</li>';
texto_caracteristicas = texto_caracteristicas + '<li><strong>Calefacción</strong>.</li>';
texto_caracteristicas = texto_caracteristicas + '<li>Se admiten <strong>animales</strong>.</li>';
texto_caracteristicas = texto_caracteristicas + '<li>Documentación de la zona.</li>';
texto_caracteristicas = texto_caracteristicas + '<li>Restaurantes a 150 metros.</li>';
texto_caracteristicas = texto_caracteristicas + '<li><strong>Balneario</strong> a 300 metros.</li></ul>';

// Cueva cueva1
texto_cueva1[1] = "Esta primera <strong>casa cueva de lujo</strong> combina el ambiente tradicional con diseños y materiales modernos, dándole un toque renovador.<br><br> Nuestras <strong>casas cuevas</strong> están dotadas de una amplia <strong>chimenea</strong> preparada tanto para olvidar el transcurrir del tiempo junto al fuego, como para cocinar en sus brasas.";
texto_cueva1[2] = "La amplia cocina está unida al salón, formando una amplia estancia para acoger <strong>grupos numerosos de personas</strong>.<br><br>Está <strong>casa cueva</strong> equipada con vitrocerámica, microondas, frigorífico TV, DVD, tostadora, sandwichera … Amplio y variado menaje. Sus excelentes vistas y entrada de sol la convierten en una de las estancias mas acogedoras del conjunto de <strong>casas cuevas</strong>";
texto_cueva1[3] = "El espacio y distribución interior de nuestras <strong>casas cuevas</strong> nada tiene que envidiar a las casas actuales. Y sin embargo permite crear llamativos rincones integrados en la roca. Están dotadas de TV, TDT, DVD, colección de películas, juegos, guias turísticas de la comarca y provincia etc…";
texto_cueva1[4] = "Una muestra mas de la combinación de un diseño vanguardista de la piedra con la tradicional calidez de la madera.<br><br>Como se puede apreciar en esta fotografía esta <strong>casa cueva es muy soleada</strong> y por tanto muy <strong>luminosa</strong>.";
texto_cueva1[5] = "Estas <strong>casas rurales en alquiler</strong> disponen de un amplio Baño excavado caprichosamente en la roca y totalmente equipado.<br><br> Dispone de <strong>jacuzzi y ducha hidromasaje</strong> a los que se accede mediante un túnel desde el propio cuarto de baño";
texto_cueva1[6] = "El <strong>jacuzzi</strong>, es la estrella de estas <strong>casas cuevas</strong>. Mide 2 m por 1,90.<br><br> Está instalado en un cálido rincón del baño consiguiéndose un <strong>ambiente íntimo y relajante</strong>.";
texto_cueva1[7] = "La orientación de este dormitorio permite disfrutar, desde primera hora de la mañana, de la entrada del sol por su amplio ventanal.<br><br> La forma de su techo, picado a “4 aguas” ya desde su origen en tiempos inmemoriales, es singular en este tipo de <strong>casas cuevas</strong> donde la mayor parte son en forma de bóveda";
texto_cueva1[8] = "Para quien le guste <strong>dormir</strong> en el mas <strong>absoluto silencio</strong>, está destinado este dormitorio y un tercero mas profundo aún. <br><br>Aquí tiene asegurado un <strong>sosegado descanso</strong>.";

// Cueva de cueva2
texto_cueva2[1] = "<br>Esta otra <strong>casa cueva</strong>, también “<strong>de lujo</strong>” es ideal para quienes busquen mayores espacios comunes y, por qué no decirlo, mayor lujo, respetando siempre el <strong>encanto rural</strong> de las cuevas de la comarca.  Dispone de 3 dormitorios mas sofá cama y plegables para 4 personas más";
texto_cueva2[2] = "En el amplio salón en forma de L, de mas de 40 m2 de este tipo de <strong>casas cuevas</strong> con una impresionante chimenea, les permitirá reunir grandes grupos.<br> …y por ejemplo reunir en esta cueva a personas de su grupo que se alojan en las otras <strong>casas rurales en alquiler</strong>";
texto_cueva2[3] = "Al mismo nivel de calidad del resto de la <strong>casa cueva</strong>, dispone de la una amplia cocina de diseño tradicional, adherida al salón. Totalmente equipada: vitrocerámica, microondas, frigorífico, lavadora tostadora, sandwichera, batidora, amplio y variado menaje...";
texto_cueva2[4] = "El baño con <strong>Jacuzzi</strong> incorporado, es la estrella de estas <strong>casas cuevas</strong>. En su diseño se ha buscado la integración de la calidad y el lujo en el espacio cavado en la roca. Consiguiendo así de nuevo ofrecer el <strong>encanto rural</strong> que busca el visitante.<br><br>Mide 2 m por 1,90 m. ";
texto_cueva2[5] = "Merece la pena hacer una parada en el <strong>Jacuzzi</strong>, totalmente privado, con capacidad para 2 y 3 personas, que como se puede ver ofrece un <strong>ambiente íntimo y silencioso</strong>, donde poder relajarnos olvidando el tiempo y el mundo exterior.<br><br>Es sin duda lo mas buscado en el sector turístico de las <strong>casas rurales en alquiler</strong>";
texto_cueva2[6] = "En línea del resto de este tipo de <strong>casas cueva</strong> “de lujo”, el dormitorio está equipado con el máximo confort y acogedor ambiente.";
texto_cueva2[7] = "Finalizamos la visita fotográfica con el dormitorio mas profundo de la cueva. Donde está asegurado <strong>dormir en el silencio y oscuridad absolutos</strong>.";
texto_cueva2[8] = "";

// Exterior
texto_exterior[1] = "Desde tiempos inmemoriales los habitantes de la comarca han aprovechado la bondad de sus montes de arcilla para construir en su interior estas <strong>casas cuevas</strong> singulares, actualmente dotadas de todo cueva2 de detalles y servicios";
texto_exterior[2] = "Una amplia zona exterior permite aprovechar los numerosos días de sol haciendo vida al aire libre";
texto_exterior[3] = "<strong>Casas cuevas</strong> con una ubicación privilegiada:<br>• Por sus magnificas vistas de <strong>Sierra Nevada</strong>.<br>• Orientación <strong>este</strong>, lo que la hace muy soleada.<br>• <strong>Elevadas</strong> respecto al pueblo y justo en el límite de este, lo cual las aísla lo suficiente de molestias vecinales, pero permite estar en el centro en un paseo de no mas de 5 minutos. ";
texto_exterior[4] = "Por supuesto en las <strong>casas rurales en alquiler</strong> no pueden faltar las <strong>barbacoas</strong>, ubicadas en la gran explanada del recito que hace de aparcamiento y zona exterior de ocio.<br></br> Cada <strong>casa cueva</strong> dispone de sus barbacoas independientes.";
texto_exterior[5] = "Magnífica vista exterior desde uno de los dormitorios de las <strong>casas cueva</strong>.";
texto_exterior[6] = "Los amplios ventanales de nuestras <strong>casas cuevas</strong> permiten disfrutar del <strong>Encanto Rural</strong> de nuestro paisaje";
texto_exterior[7] = "Detalles que contribuyen a este <strong>encanto rural</strong> en el que nos sumergen las <strong>casas cuevas</strong>";

function imprimirSituacion() {
	if (window.print) {
		window.print();		
	} else {
		alert("Disculpe, su navegador no soporta esta opción.");
	}
}

// --------------------------------------------------------------------------------
// Imprime la pagina de incio de las fotos
function imprimirCaracteristicas() {
	
	var texto = "";
	var texto2 = "";
	
	resaltarOpcion("caracteristicas");
	
	seleccion = "caracteristicas";	
	// Quitamos los iconos para el inicio de las fotos
	for (i=1; i <= num_iconos; i++) {
		iconId = "icono"+i;
		iconIm = "Imagen"+i+".jpg";
		document.getElementById(iconId).width = 0;
		document.getElementById(iconId).height = 0;
	}	
	
	// Cambiamos la altura de la tabla de imagenes

	document.getElementById('tablaIco').innerHTML = "<table width=\"750\" height=\"0\" border=\"0\"></table>";
	
	document.getElementById('tablaIco').border = 1;
	document.getElementById('tablat').valign = "center";	
	
	// Quitamos la foto grande
	document.foto.width = 0;
	document.foto.height = 0;
	
	// Texto
	texto = texto_caracteristicas;
	texto2 = "";
	document.getElementById('texto').innerHTML = "<blockquote>"+texto+"</blockquote>";
	document.getElementById('texto2').innerHTML = texto2;
	document.getElementById('texto').align = "left";
	
	document.getElementById('tablat').style.width = "700px";
	document.getElementById('tablai').style.width = "0px";
	
}
		
// --------------------------------------------------------------------------------

// Funcion para imprimir las fotos de los iconos segun la opcion elegida
function imprimirIconos(opcion) {
	
	// Inicializamos la tabla para que se muestre bien
	document.getElementById('tablat').style.width = "700px";
	document.getElementById('tablai').style.width = "0px";
	
	document.getElementById('tablaIco').innerHTML = texto_tablaIconos;	
	
	resaltarOpcion(opcion);
		
	// Asignamos alto de la tabla de iconos
	document.getElementById('tablaIconos').height = 80;
	
	// Quitamos seleccion
	if (seleccion != "") {
		document.getElementById(imagenSeleccionada).border = 0;	
	}
	
	seleccion = opcion;
	
	if (opcion=="cueva2") {		
	
		for (i=1; i <= num_iconos; i++) {
			iconId = "icono"+i;
			iconIm = "Imagen"+i+".jpg";
			document.getElementById(iconId).src = direcueva2Ico+iconIm;	
			
			if (i==8) {
				document.getElementById(iconId).width = 0;
				document.getElementById(iconId).height = 0;
			} else if (i == 5)  {
				document.getElementById(iconId).width = 50;
				document.getElementById(iconId).height = 62;
			} else if (i == 1)  {
				document.getElementById(iconId).width = 100;
				document.getElementById(iconId).height = 50;
			} else {			
				document.getElementById(iconId).width = 85;
				document.getElementById(iconId).height = 62;
			}
		}
		
		// Seleccionamos la primera imagen
		imagenSeleccionada = "icono1";
		document.getElementById(imagenSeleccionada).border = 2;

	} else if (opcion=="cueva1") {
		
		for (i=1; i <= num_iconos; i++) {
			iconId = "icono"+i;
			iconIm = "Imagen"+i+".jpg";
			document.getElementById(iconId).src = direcueva1Ico+iconIm;	
			document.getElementById(iconId).width = 85;
			document.getElementById(iconId).height = 62;			
		}
		
		// Seleccionamos la primera imagen
		imagenSeleccionada = "icono1";
		document.getElementById(imagenSeleccionada).border = 2;		
		
	} else if (opcion=="exterior") {
	
		for (i=1; i <= num_iconos; i++) {
			iconId = "icono"+i;
			iconIm = "Imagen"+i+".jpg";
			document.getElementById(iconId).src = direExteriorIco+iconIm;
			
			// Imagenes verticales
			if (i==8) {
				document.getElementById(iconId).width = 0;
				document.getElementById(iconId).height = 0;
			} else if ((i == 5) || (i==6)) {
				document.getElementById(iconId).width = 50;
				document.getElementById(iconId).height = 62;
			} else {	// Imagenes horizontales
				document.getElementById(iconId).width = 85;
				document.getElementById(iconId).height = 62;	
			}			
		
		}
		
		// Seleccionamos la primera imagen
		imagenSeleccionada = "icono1";
		document.getElementById(imagenSeleccionada).border = 2;
		

	
	}
	
	cambiaImagen('1');
	cambiaTexto('1');
	
		
}

// Cambia el borde de la imagen seleccionada
function cambiaBordeSeleccion(foto) {
	// Quito la selección a la imagen actual
	document.getElementById(imagenSeleccionada).border = 0;		
	// Selecciono la nueva imagen
	document.getElementById(foto).border = 2;

	imagenSeleccionada = foto;
}

// Cambia la imagen seleccionada
function cambiaImagen(foto) {
	
	// Ponemos imagen en blanco mientras cargamos
	document.foto.src = imgBlanco.src;
	
	// Inicializaos la vista de la foto
	
	var ruta = "../images/fotos/"+seleccion+"/Imagen"+foto+".jpg";
		
	// La foto de cueva2 del salon la pintamos de manera distinta
	if ( (seleccion == "cueva2") && (foto == 1) ) {
	//	document.foto.src = ruta;
		document.foto.width = 740;
		document.foto.height = 331;		
		document.foto.alt = alt[foto];			

	// Comprobamos las imageges verticales
	} else if ( ((seleccion == "exterior") && ( (foto==6) || (foto == 5) ) ) 
				|| ( (seleccion == "cueva2") && (foto == 5)  )	){
		
	//	document.foto.src = ruta;
		document.foto.width = 333;
		document.foto.height = 499;		
		document.foto.alt = alt[foto];			
	
	// Las demas son imagenes horizontales
	} else {
		//document.foto.src = ruta;
		document.foto.width = 502;
		document.foto.height = 333;
		document.foto.alt = alt[foto];
	}
	
	document.foto.src = ruta;
			
}


function hideDiv(id) {
	document.getElementById(id).style.visibility = "hidden"; 
	document.getElementById(id).style.display = "none";
}

// Funcion para cambiar el texto de las imagenes
function cambiaTexto(foto) {
	
	document.getElementById('texto').align = "center";
	
	if (seleccion!="caracteristicas") {
		// Vemos la seleccion
		var texto = "";	
		var texto2 = "";
		
		if (seleccion == "cueva2") {
			if (foto == 1) {
				texto = "";
				texto2 = texto_cueva2[1];
			} else {
				texto ="<blockquote>"+texto_cueva2[foto]+"</blockquote>";
				texto2 = "";
			}
		} else if (seleccion == "cueva1") {
			texto = "<blockquote>"+texto_cueva1[foto]+"</blockquote>";
			texto2 = "";
		} else if (seleccion == "exterior") {
			texto = "<blockquote>"+texto_exterior[foto]+"</blockquote>";
			texto2 = "";
		} 
	
		// Asignamos texto a la imagen mas grande
	
		document.getElementById('texto').innerHTML = texto;
		document.getElementById('texto2').innerHTML = texto2;
		document.getElementById('texto2').align = "center";
				
	}

}

// funcion que resalta la seleccion de la categoria de fotos

function resaltarOpcion(opcion) {
	
	var url_imagen = "../images/fondos/seleccionado.jpg";	
	var url_imagen_normal = "../images/fondos/sin_seleccionar.jpg";	
	
	if (seleccion=="")
		seleccion = "caracteristicas";
	
	// Quitamos la seleccion actual
	document.getElementById(seleccion+'MenuI').style.backgroundImage = "url("+url_imagen_normal+")";
	
	if (seleccion=="caracteristicas") {
		document.getElementById(seleccion+'MenuT').innerHTML = '<div align="center" id="caracteristicasMenuT"><a href="#" onclick="imprimirCaracteristicas();"><span class="Estilo60">Características</span> </a></div>';
		
	} else if (seleccion=="cueva1") {
		document.getElementById(seleccion+'MenuT').innerHTML = '<div align="center" id="cueva1MenuT"><a href="#" onclick="imprimirIconos(\'cueva1\');"><span class="Estilo60">Cueva 1 </span></a></div>';
	} else if (seleccion=="cueva2") {
		document.getElementById(seleccion+'MenuT').innerHTML = '<div align="center" id="cueva2MenuT"><a href="#" onclick="imprimirIconos(\'cueva2\');"><span class="Estilo60">Cueva 2 </span></a></div>';
		
	} else if (seleccion=="exterior") {
		document.getElementById(seleccion+'MenuT').innerHTML = '<div align="center" id="exteriorMenuT"><a href="#" onclick="imprimirIconos(\'exterior\');"><span class="Estilo60">Exterior </span></a></div>';
	}
	
	// Selecionamos la opcion
	if (opcion=="caracteristicas") {
		document.getElementById('caracteristicasMenuI').style.backgroundImage = "url("+url_imagen+")";
		document.getElementById('caracteristicasMenuT').innerHTML = '<div class="Estilo59">Características </div>';	
	} else if (opcion=="cueva2") {
		document.getElementById('cueva2MenuI').style.backgroundImage = "url("+url_imagen+")";		
		document.getElementById('cueva2MenuT').innerHTML = '<div class="Estilo59">Cueva 2 </div>';	
	} else if (opcion=="cueva1") {
		document.getElementById('cueva1MenuI').style.backgroundImage = "url("+url_imagen+")";
		document.getElementById('cueva1MenuT').innerHTML = '<div class="Estilo59">Cueva 1 </div>';	
	} else if (opcion=="exterior") {
		document.getElementById('exteriorMenuI').style.backgroundImage = "url("+url_imagen+")";
		document.getElementById('exteriorMenuT').innerHTML = '<div class="Estilo59">Exterior </div>';	
	}
	
}