/*
	Mapa con puntos de inter‚s:
	
		javascript + dhtml
	
	Version:
	0.1     Primera versi¢n, funcionalidad muy b sica y poco optimizada.

   
*/

/*

	Clase punto
	Atributos:
		nombre: nombre del punto
		x: en pixeles
		y: en pixeles
		estilos: beta { piscina pto }
	
	Metodos:
		constructor
		punto ( nombre, x, y, tipo) 


*/

	function punto (nombre, x, y ,tipo ) {
			 // Atributos
			 this.nombre = nombre;
			 this.x = x;
			 this.y = y;
			 this.estilo = null;
			 this.estilo = puntoPinta( nombre , tipo);
			 this.estilo.top =  (y - 10) +"px";
			 this.estilo.left = (x - 10)  +"px";
			 		 
			 
	}
	
	function puntoPinta ( nombre, tipo ) 
	{
			 if(tipo=="pto")
			 	document.write("<div id='"+nombre+"' class='"+tipo+"'  onclick=\"return enlarge('galeria/pueblo"+nombre+".png','','',5,5)\">&nbsp;</div>");
			 else 	
			 	document.write("<div id='"+nombre+"' class='"+tipo+"'>&nbsp;</div>");
			 return document.getElementById(nombre).style;
	}




/*

	Clase mapa
	Atributos:
	Metodos:


*/


	function Mapa (nombreImagen) {
	
			this.imagen = new Image();
			this.imagen.src = nombreImagen;
			this.nombreImagen = nombreImagen
			this.puntos = new Array;
			this.nPuntos = 0;
			
			this.ponPunto = mapaPonPunto;
			this.pinta = mapaPinta;
			this.zoom = mapaZoom;
			this.inicia = mapaInicia;
	}
	
	
	
	function mapaPinta ()
	{
		document.write("<table height='"+(this.imagen.height + 20) +"' width='"+(this.imagen.width + 20)+"' border=0>");
		document.write("<tr><td valign='top'>");
		document.write("<table border=0>");	
		document.write("<tr><td><div id='lienzo' class='mapa'  ><img id=mapa src="+this.nombreImagen+" border=0 >");
		document.write("<div id='nav' class='navegador'><img id=mapa src='img/navegador.gif'  border=0 usemap=#nav />");
		for(var i = 0; i < this.nPuntos; i++) 
		{
			eval("var pto1 = new punto("+this.puntos[i]+");");
			eval("this.puntos["+i+"]= pto1;");
		}
		document.write("</div></td></tr></table>");
		document.write("</td></tr></table>");
	}
	
	
	function mapaPonPunto( defPunto)
	{
	    this.puntos[this.nPuntos]= defPunto;
	    this.nPuntos++;
	}
	
	
	function mapaZoom ( x1, y1, x2 , y2 )
	{
		document.getElementById("nav").style.visibility="visible";
		
		for(var i = 0; i < this.nPuntos; i++) 
		{
			var nombre = this.puntos[i].nombre;
			var ptoX = this.puntos[i].x;
			var ptoY = this.puntos[i].y;	
			
			
			var estilo = document.getElementById(nombre).style;
			var dentro = ((x1 <= ptoX) && (ptoX <= x2) && (y1 <= ptoY) && (ptoY <= y2))
					
			if ( ! dentro )
			{
				estilo.visibility = "hidden";
			} else {
				
				nuevaX = (ptoX - x1) * 4;
				nuevaY = (ptoY - y1) * 4;
			 	estilo.left = (nuevaX - 10)  +"px";
				estilo.top = (nuevaY - 10)+ "px";  
				estilo.visibility = "visible";
			}	
		}
		
	}
	
	
	function mapaInicia(  )
	{
		document.getElementById("nav").style.visibility="hidden";
			
		for(var i = 0; i < this.nPuntos; i++) 
		{
			var nombre = this.puntos[i].nombre;
			var ptoX = this.puntos[i].x;
			var ptoY = this.puntos[i].y;	
			
			
			var estilo = document.getElementById(nombre).style;
					
			nuevaX = ptoX ;
			nuevaY = ptoY ;
		 	estilo.left = (nuevaX - 5)  +"px";
			estilo.top = nuevaY + "px";  
			estilo.visibility = "visible";
		}
	
		activo = 1;
	}


	function inicio () {
		d = document.getElementById("mapa");
		d.src = "callejero/base.png";

		map1.inicia();
	}

										
	function rotaImagen( n ) {
			var d = document.getElementById("mapa");
			d.src = "callejero/callejero_" + n +".png";
			globPos = n;
			map1.zoom(zonas[globPos][0] / 4, zonas[globPos][1] / 4, zonas[globPos][2] / 4, zonas[globPos][3] / 4);
					
	}
		
		
	function mueve ( dir ) {
			
		if ( dir.indexOf("u") != - 1 )
			globPos = parseInt(globPos) - 100;
		if ( dir.indexOf("d") != - 1 )
			globPos = parseInt(globPos) + 100;

		if ( dir.indexOf("l") != - 1 )
			globPos = parseInt(globPos) - 1;
		if ( dir.indexOf("r") != - 1 )
			globPos = parseInt(globPos) + 1;
			
		rotaImagen (globPos);
			
	}
		
		
	
	
		
		function estaDentro ( ptoX, ptoY , id)
			
		{
			
			var zona = zonas[id];
			var x1 = zona['0']/4;
			var y1 = zona['1']/4;
			var x2 = zona['2']/4;
			var y2 = zona['3']/4;
			
			
			return (x1 <= ptoX) && (ptoX <= x2) && (y1 <= ptoY) && (ptoY <= y2);
		
		}
		
		
		function acciona ( evnt , obj ) 
		{
			
			if (activo)
			{
				var nx = obj.offsetLeft; 
				var ny = obj.offsetTop; 
				
				var ptoX = evnt.clientX - nx;
				var ptoY = evnt.clientY - ny;
				
				//alert(ptoX);
				
				 if ( estaDentro(ptoX,ptoY,102)) rotaImagen("102");
				 if ( estaDentro(ptoX,ptoY,104)) rotaImagen("104");
	 			 if ( estaDentro(ptoX,ptoY,106)) rotaImagen("106");
				 if ( estaDentro(ptoX,ptoY,108)) rotaImagen("108");
	
				 if ( estaDentro(ptoX,ptoY,302)) rotaImagen("302");
				 if ( estaDentro(ptoX,ptoY,304)) rotaImagen("304");
	 			 if ( estaDentro(ptoX,ptoY,306)) rotaImagen("306");
				 if ( estaDentro(ptoX,ptoY,308)) rotaImagen("308");
	
				 if ( estaDentro(ptoX,ptoY,502)) rotaImagen("502");
				 if ( estaDentro(ptoX,ptoY,504)) rotaImagen("504");
	 			 if ( estaDentro(ptoX,ptoY,506)) rotaImagen("506");
				 if ( estaDentro(ptoX,ptoY,508)) rotaImagen("508");
	
				 if ( estaDentro(ptoX,ptoY,702)) rotaImagen("702");
				 if ( estaDentro(ptoX,ptoY,704)) rotaImagen("704");
	 			 if ( estaDentro(ptoX,ptoY,706)) rotaImagen("706");
				 if ( estaDentro(ptoX,ptoY,708)) rotaImagen("708");
				
				activo = 0;
			}
		
		}