// JavaScript Document

/*------------------------------------------------------------------------------------
Iconos de Google Maps
------------------------------------------------------------------------------------*/
var customIcons = [];

		var iconEjec = new GIcon(); 
		iconEjec.image = 'img/ejec.png';	
		iconEjec.shadow = 'img/shadow.png';
		iconEjec.iconSize = new GSize(35, 35);
		iconEjec.shadowSize = new GSize(53, 35);
		iconEjec.iconAnchor = new GPoint(17, 17);
		iconEjec.infoWindowAnchor = new GPoint(17,17);
		
		var iconFina = new GIcon(); 
		iconFina.image = 'img/fina.png';
		iconFina.shadow = 'img/shadow.png';
		iconFina.iconSize = new GSize(35, 35);
		iconFina.shadowSize = new GSize(53, 35);
		iconFina.iconAnchor = new GPoint(17, 17);
		iconFina.infoWindowAnchor = new GPoint(17,17);

customIcons[0] = iconFina;
customIcons[1] = iconEjec;	

var map;
var INICIO=true;
var imgLoading;
var imgNoImage;

/*------------------------------------------------------------------------------------
Inicializacion
------------------------------------------------------------------------------------*/
function initialize(){//inicializa el mapa
	INICIO=true;
	printObrasDelDistrito();
	preloadImagen();
	//Por alguna extraña razon no existe hidden
	hidePhoto();
	INICIO=false;
	//Redondear Imagenes
	roundBorder();
}//initialize
function roundBorder()
{
	Nifty("div#header0","big");
	Nifty("div#footer","big fixed-height");
	Nifty("div.mapcnt","big");
	Nifty("legend","small");
}
function preloadImagen(){
	imgLoading = document.createElement('img');
	imgLoading.setAttribute('src','img/loading.gif');
	
	imgNoImage = document.createElement('img');
	imgNoImage.setAttribute('src','img/noimage.gif');
}

/*------------------------------------------------------------------------------------
Funciones de Google Maps
------------------------------------------------------------------------------------*/
function createMarker(point, name, idobra,dscr,fini,fter,moda,mont,ubic,stat){
		var marker = new GMarker(point,customIcons[stat])		
		//var marker = new GMarker(point,customIcons[parseInt(stat)]);}
      //var marker = new GMarker(point,iconFina);
   	  GEvent.addListener(marker, 'click', function() { MarkerListener(name,dscr,idobra,fini,fter,moda,mont,ubic)});
	  return marker;
}//createMarker

function MarkerListener(name,dscr,idobra,fini,fter,moda,mont,ubic){
	printMarkerInfo(name,dscr,fini,fter,moda,mont,ubic);
	printMarkerPhoto(idobra);
}//MarkerListener

function printMarkerInfo(name,dscr,fini,fter,moda,mont,ubic){
	var iobra = document.getElementById("iobra");
	iobra.innerHTML='<h3>'+name+'</h3><h4>Descripcion:</h4>'+dscr+'<ul><li><h5>Inicio:</h5>'+fini+'</li><li><h5>Termino:</h5>'+fter+'</li><li><h5>Modalidad:</h5>'+moda+'</li><li><h5>Monto S./:</h5>'+mont+'</li><li><h5>Ubicacion:</h5>'+ubic+'</li></ul>';
}//printMarkerInfo

function printMarkerPhoto(idobra){
	var fobra = document.getElementById("fobra");
	if(fobra!=null)
	{
		emptyTag(fobra);
		for (i=0; i<4; i++){
			createSmallPhoto(fobra,idobra,i+1);
		}
	}
	else
	{
		debugme("(function printFoto)No se encuentra <div>fobra"); 
	}
}
function createSmallPhoto(div,idobra,i){
	//Creamos el div class=thumbnails
	var divPhoto = document.createElement('div');			
	divPhoto.setAttribute("id","thumbnail");
	//divPhoto.setAttribute("class","thumbnail");
	
	
	//Creamos la imagen
	var imgPhoto = document.createElement('img');
	/*imgPhoto.setAttribute('src','img/obr/'+idobra+'/s'+i+'.jpg');*/
	imgPhoto.setAttribute('src','img/obr/'+idobra+'/'+i+'.jpg');
	imgPhoto.setAttribute("class","thumbnail2");
	/*imgPhoto.height="100%";*/
	imgPhoto.onclick= function(){showPhotoClick(idobra,i)};
	imgPhoto.onerror=function(){onError(imgPhoto,divPhoto,div)};
	//Insertamos la imagen dentro del div
	loadDinamicImg(imgPhoto,divPhoto,div);
}
function onError(imgPhoto,divPhoto,div)
{/*
	divNoImg=document.createElement('div');
	divNoImg.setAttribute('id','SinImagen');
	divNoImg.innerHTML('Recuperando el Tiempo Perdido');
	divNoImg=divPhoto.appendChild(divNoImg);
	divPhoto=div.appendChild(divPhoto);
	*/
	imgPhoto.src=imgNoImage.src;
	if(navigator.appName=="Microsoft Internet Explorer"){
	imgPhoto.height="100%";}
	imgPhoto.onclick="";
}
function loadDinamicImg(imgPhoto,divPhoto,div)
{
	if(imgPhoto.complete)
	{
		imgPhoto=divPhoto.appendChild(imgPhoto);
		divPhoto= div.appendChild(divPhoto);
	}
	else
	{
		imgPhoto=divPhoto.appendChild(imgPhoto);
		divPhoto=div.appendChild(divPhoto);
		function foo()
		{
			setTimeout("loadDinamicImg(imgPhoto,divPhoto,div)",1000); 
		}
	}
}

function showPhotoClick(idobra,idphoto)
{
	hidePhoto();
	showPhoto(idobra,idphoto);
}
function showPhoto(idobra,idphoto){
		var fg = document.getElementById("fotogrande");
		if(fg.style.visibility=="hidden"){
			//Si existe una imagen previa entonces la eliminamos
			var imgbig = document.getElementById("imgbig");
			var abig = document.getElementById("abig");
				if(imgbig!=null)
				{
					imgbig.parentNode.removeChild(imgbig);
					/*abig.parentNode.removeChild(abig);*/
					
				}
			//Creamos la cadena de direccion de la foto a mostrar			
			var servdir='img/obr/'+idobra+'/'+idphoto+'.jpg';
			//Concatenamos el numero con la direccion
	
			//Creacion de la variable imagen
			var newImg= document.createElement("img");	
			newImg.setAttribute("id","imgbig");
			newImg.setAttribute("src",servdir);
			newImg.setAttribute("width","640");
			newImg.setAttribute("height","480");
			//Append como hijo del div fg a la foto
			var fg = document.getElementById("fotogrande");
			fg.appendChild(newImg);

			//Crear Hipervinculo de Ocultar
			/*
			var ocult = document.createElement("a");
			ocult.setAttribute("id","abig");
			ocult.setAttribute("class","fototitulo");
			ocult.setAttribute("href","#");
			ocult.setAttribute("onclick","hidePhoto()");
			ocult.appendChild(document.createTextNode("ocultar"));
			fg.appendChild(ocult);
			*/
			fg.style.visibility="visible";

		}
}

function hidePhoto(){
		var fg = document.getElementById("fotogrande");
		fg.style.visibility="hidden";
}

function debugme($error){
	var debugme=document.getElementById("debug");
	if(debugme)
	{
		var text=document.createTextNode($error);
		debugme.appendChild(text);
	}//if
}//debugme

/*------------------------------------------------------------------------------------
Click a un Distrito
------------------------------------------------------------------------------------*/
function selectdistrito(e){
	/*Taken From W3C-School and Tweaked to work on my page*/
	var dist = document.getElementById('varDist');
	var targ;
	if (!e){
  		var e=window.event;}
	if (e.target){
	  targ=e.target;}
	else if (e.srcElement){
	  targ=e.srcElement;}
	if (targ.nodeType==3){ // defeat Safari bug
	  targ = targ.parentNode;}
	var tname;
	tname=targ.id;
	dist.value = tname;
}
function hacerpost()
{
	map.clearOverlays();
	printObrasDelDistrito();
	ocultarMapa1();
	ocultarMapa2();
	//Ocultar Mapa
}
/*-----------------------------------------------
Imprimir las obras del distrito
------------------------------------------------*/
function printObrasDelDistrito()
{
	var varDist=document.getElementById('varDist').value;
	doSyncGET("./xml/"+varDist+".xml");
	if(xmlHttp.responseXML){
		var xmlData = xmlHttp.responseXML; 
		//Sacar Informacion del Distrito
		var distrito = xmlData.getElementsByTagName("distrito");
		var dname=distrito[0].getAttribute("name");
		var dlat=distrito[0].getAttribute("dlat");
		var dlng=distrito[0].getAttribute("dlng");
		var zoom=distrito[0].getAttribute("zoom");
		changeDistritoName(dname);

			if((INICIO)||(GBrowserIsCompatible())){
					map = new GMap2(document.getElementById("mapa"));			  
					map.setCenter(new GLatLng(dlat,dlng),parseInt(zoom));
					map.setMapType(G_SATELLITE_MAP);
					map.addControl(new GLargeMapControl());
				}//if(INICIO)
				
			else{
				if((dlat=="")||(dlng=="")||(zoom==""))
				{
					//Panear a Arequipa
					dlat=-16.39936551511126;
					dlng=-71.53661727905273;
					zoom=13;
				}//if
				map.panTo(new GLatLng(dlat,dlng));
				map.setZoom(parseInt(zoom));
			}//else
		//Imprimir las Obras
	    var obras = xmlData.getElementsByTagName("obra");
		for(var i=0;i<obras.length;i++){
			var name = obras[i].getAttribute("name");
			var idobra = obras[i].getAttribute("idobra");
			var dscr = obras[i].getAttribute("dscr");
			var fini = obras[i].getAttribute("fini");
			var fter = obras[i].getAttribute("fter");
			var moda = obras[i].getAttribute("moda");
			var mont = obras[i].getAttribute("mont");
			var ubic = obras[i].getAttribute("ubic");
			var stat = obras[i].getAttribute("idstat");
			var point = new GLatLng(parseFloat(obras[i].getAttribute("lat")),
										parseFloat(obras[i].getAttribute("lng")));
			var marker = createMarker(point, name, idobra, dscr,fini,fter,moda,mont,ubic,stat);
			map.addOverlay(marker);
		}//for
	}//if(xmlHttp.responseXML)
	else
	{
		alert('Su navegador no soporta Google Maps. El Visor de Obras de la Municipalidad Provincial de Arequipa es compatible con los siguientes navegadores: Opera 8.0, IE 6.0, Firefox 2.0. Por favor instale uno de ellos si quiere visualizar la pagina web o active javascript en su navegador.')
	}//else
}//printObrasdelDistrito





/*------------------------------------------------------------------------------------
Mostar y Ocultar Mapas
------------------------------------------------------------------------------------*/
function mostrarMapa1(){
	var DivMapa1 = document.getElementById("aqp1");
	DivMapa1.style.visibility='visible';
}
function ocultarMapa1(){
	var DivMapa1 = document.getElementById("aqp1");
	DivMapa1.style.visibility='hidden';
}

function mostrarMapa2(){
	ocultarMapa1();
	var DivMapa1 = document.getElementById("aqp2");
	DivMapa1.style.visibility='visible';
}
function ocultarMapa2(){
	var DivMapa1 = document.getElementById("aqp2");
	DivMapa1.style.visibility='hidden';
}
function mostrarMapa3(){
	ocultarMapa1();
	ocultarMapa2();
	var DivMapa1 = document.getElementById("modouso");
	DivMapa1.style.visibility='visible';
}
function ocultarMapa3(){
	var DivMapa1 = document.getElementById("modouso");
	DivMapa1.style.visibility='hidden';
}

function changeDistritoName(strName){
	nameDist=document.getElementById('spanDist');
	nameDist.innerHTML=strName;
}

/*------------------------------------------------------------------------------------
Funciones Propias de Texto
------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------
Funciones Comunes de Texto
------------------------------------------------------------------------------------*/
function insertTextInTagName(tagName,strText)
{
	tag= document.gebi(tagName);
	emptyTag(tag);
	span.appendChild(document.createTextNode(strText));
}

function emptyTag(tag)
{
	tag.innerHTML="";
}