/********************************************************************************************************************
*********************************************************************************************************************

	GEOGRAPHICA STUDIO S.L.
	Tomás Sánchez Falcón

**********************************************************************************************************************
**********************************************************************************************************************

	To use a slideshow from pics tab some functions are needed. In this file they are all.

**********************************************************************************************************************
**********************************************************************************************************************/

// Here are some global variables.

var data3;
var ine2;
var nombreMunicipio2;
var myshow;
var pause;




/*
 	Given a page number such as 1,2,etc. , this procedure makes an ajax connection to a php file in server, using extjs, 
	and shows its result into the pic tab. it shows the first view.

*/
function nextAndBeforePicsPage(p)
{


	var connection = new Ext.data.Connection();
	var page = p;
	var furl = 'php/getTownList.php?pag=' + page;
	var browser = navigator.appName;

	var width = screenWidthGlobal;
	var height  = screenHeightGlobal;

	var connection = new Ext.data.Connection();


	//fotos = window.document.getElementById('fotosTabContent');
	//fotos.style.backgroundColor= "#FFFFFF";
	
	
	
	connection.request (
		{
			url: furl,
			method: 'POST',
    			params: {'pag': this.page, 'width': width, 'height': height},
    					
			success: function (responseObject) 
			{
        			showOthersStatePics (responseObject.responseText);
    			},
     			failure: function () 
			{
         			Ext.Msg.alert ('estado', 'Incapaz de mostrar fotografías. Intente por favor otra vez.');
     			}
		}
	);

}

function nextAndBeforePicsPage_shadowbox(p)
{


	var connection = new Ext.data.Connection();
	var page = p;
	var furl = 'php/getTownList_shadowbox.php?pag=' + page;
	var browser = navigator.appName;

	var width = screenWidthGlobal;
	var height  = screenHeightGlobal;

	var connection = new Ext.data.Connection();


	//fotos = window.document.getElementById('fotosTabContent');
	//fotos.style.backgroundColor= "#FFFFFF";



	connection.request (
		{
			url: furl,
			method: 'POST',
    			params: {'pag': this.page, 'width': width, 'height': height},

			success: function (responseObject)
			{
        			showOthersStatePics (responseObject.responseText);
    			},
     			failure: function ()
			{
         			Ext.Msg.alert ('estado', 'Incapaz de mostrar fotografías. Intente por favor otra vez.');
     			}
		}
	);

}

/**
	this function responses to the ajax connection needed in the function above
*/
function showOthersStatePics(t)
{
	Ext.get('fotosTabContent').update(t.toString());			
}


/**

	Given an ine number after having clicked in a town, this function shows its pics slideshow. 
	it makes an ajax connection to a php file.
*/
function goToTheTownPicsShow(ine,nombreMunicipio){

	//hacemos global el ine de la ciudad seleccionada	
	ine2 = ine;
	
	nombreMunicipio2 = nombreMunicipio;	

	var fullUrl = 'php/getTownPics2.php?ine=' + ine;
	
	var connection = new Ext.data.Connection();
		
	connection.request (
		{
			url: fullUrl,
			method: 'POST',
    			params: {'id': ine},
    					
			success: function (responseObject) 
			{
        			showTownArray(responseObject.responseText);
    			},
     			failure: function () 
			{
         			Ext.Msg.alert ('estado', 'Incapaz de mostrar fotografías para ese municipio. Intente por favor otra vez.');
     			}
		}
	);
	
}

/**

	Given an ine number after having clicked in a town, this function shows its pics slideshow with shadowbox.
	it makes an ajax connection to a php file.
*/
function goToTheTownPicsShow_shadowbox(ine,nombreMunicipio)
{
   //Call to
   townGallery = new TownGallery(ine,nombreMunicipio,anchura,fotosTabHeight);
   townGallery.loadGallery();
}



// función encargada de, una vez obtenida la respuesta ajax, colocar en el div con id = fotosTabContent, el nuevo slideshow con las
// fotografías de la ciudad que ha sido seleccionada.
function showTownArray(t)
{
	pause=1;
	var path = 'fotosMunicipios/' + ine2;
	var fotos;
	var browser = navigator.appName;	
	eval(t.toString());	
	
	Ext.get('fotosTabContent').update("<div id='slideShowDivContainer' class='slideShowDivContainer'><div id='slideShowHeader'><div id='slideShowHeaderText'>" + nombreMunicipio2  + " </div></div><div id='show'  class='slideshow' ></div><div class='slideShowDivAux' id='slideShowDivAux'><div id='auxy'></div></div><div class='div1' id='div1'><div id='div1a'></div><div id='div1c'></div><div id='div1b'></div><div id='div1d'></div></div></div>");
	
	if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("MSIE 8.0")==-1)
	{
		// it's a explorer less than explorer 8.0
		// check if we're displaying the slideshow or the town gallery
		var el = Ext.get('slideShowHeader');
		el.applyStyles("margin-top: 0px;");	
		el = Ext.get('slideShowHeaderText');
		el.applyStyles("margin-top: 0px;");
		
	}
	
	divWidth=document.getElementById('slideShowDivContainer').offsetWidth;

	widthValue = 0.63 * divWidth;

	myShow = new Slideshow('show', this.data3, { 
						thumbnails: true, 
						captions: true, 
						controller: false, 
						delay: 4000, 
						duration: 1000, 
						height: 332, /* antes 498,360 */
						hu: path, 
						width: widthValue,/* antes 70% */
						paused: true,
						resize:'width'
						}
	);


	var slideShowControlHtml;

	if (pause)
	{
		slideShowControlHtml = "<div id='auxy' class='auxy'>"+
											"<div id='subDiv1' align='center'>"+
											"<a href='#slideshow' onclick='myShow.first();'><img src='img/first.png'></a>&nbsp;&nbsp;&nbsp;"+
											"<a href='#slideshow' onclick='myShow.prev();'><img src='img/previous.png'></a>"+
										"</div>"+
										"<div id='subDiv2' align='center'>"+
											"<a href='#slideshow' onclick='myShow.next();'><img src='img/next.png'></a>&nbsp;&nbsp;&nbsp;"+
											"<a href='#slideshow' onclick='myShow.last();'><img src='img/last.png'></a>&nbsp;&nbsp;&nbsp;"+
											"<a href='#slideshow' onclick='changePlayPauseStatusForSlideShow();'><img src='img/play.png'></a>"+
										"</div>"+
										"</div>";
										Ext.get('auxy').update(slideShowControlHtml);
										
	}
	else
	{
		slideShowControlHtml = "<div id='auxy' class='auxy'>"+
											"<div id='subDiv1' align='center'>"+
											"<a href='#slideshow' onclick='myShow.first();'><img src='img/first.png'></a>&nbsp;&nbsp;&nbsp;"+
											"<a href='#slideshow' onclick='myShow.prev();'><img src='img/previous.png'></a>"+
										"</div>"+
										"<div id='subDiv2' align='center'>"+
											"<a href='#slideshow' onclick='myShow.next();'><img src='img/next.png'></a>&nbsp;&nbsp;&nbsp;"+
											"<a href='#slideshow' onclick='myShow.last();'><img src='img/last.png'></a>&nbsp;&nbsp;&nbsp;"+
											"<a href='#slideshow' onclick='changePlayPauseStatusForSlideShow();'><img src='img/pause.png'></a>"+
										"</div>"+
										"</div>";
										Ext.get('auxy').update(slideShowControlHtml);
	}

	

}

// función que lleva al listado general de fotos de los municipios
function goToTheTownList()
{
		
	//sólo hay que llamar a la función nextAndBeforePage(1) diciéndole que queremos la página 1
	nextAndBeforePicsPage(1);
	
}

// función que lleva al listado general de fotos de los municipios con shadowbox
function goToTheTownList_shadowbox()
{

	//sólo hay que llamar a la función nextAndBeforePage(1) diciéndole que queremos la página 1
	nextAndBeforePicsPage_shadowbox(1);

}

function townHasBeenChanged()
{
	var ine = window.document.getElementById("municipio").value;

	//we get the town name that is necesary for the next function using Ajax
	getTown(ine);

}

function getTown(ine){

	var connection = new Ext.data.Connection();
	var url = 'php/getTownName.php?ine=' + ine;
		
	connection.request (
		{
			url: 'php/getTownName.php?ine=',
			method: 'POST',
    			params: {'ine': ine},
    					
			success: function (responseObject) 
			{
        			processGetTown_shadowbox (responseObject.responseText,ine);
    		},
     			failure: function () 
			{
         			Ext.Msg.alert ('estado', 'Incapaz de mostrar el nombre de la ciudad para ese ine.');
     		}
		}
	);
	
}

function processGetTown(t,ine)
{
	var townName = t.toString();


	//a partir de este momento, 
	goToTheTownPicsShow(ine,townName);
	
}

function processGetTown_shadowbox(t,ine)
{
	var townName = t.toString();


	//a partir de este momento,
	goToTheTownPicsShow_shadowbox(ine,townName);

}

function changePlayPauseStatusForSlideShow()
{


	var slideShowControlHtml;

	if (pause)
	{
		
		myShow.pause(0);
		//Ext.get('subDiv2').update("Hola");
		Ext.get('subDiv2').update("<a href='#slideshow' onclick='myShow.next();'><img src='img/next.png'></a>&nbsp;&nbsp;&nbsp;<a href='#slideshow' onclick='myShow.last();'><img src='img/last.png'></a>&nbsp;&nbsp;&nbsp;<a href='#slideshow' onclick='changePlayPauseStatusForSlideShow();'><img src='img/pause.png'></a>");
		pause=0;
	}
	else
	{
		myShow.pause(1);
		Ext.get('subDiv2').update("<a href='#slideshow' onclick='myShow.next();'><img src='img/next.png'></a>&nbsp;&nbsp;&nbsp;<a href='#slideshow' onclick='myShow.last();'><img src='img/last.png'></a>&nbsp;&nbsp;&nbsp;<a href='#slideshow' onclick='changePlayPauseStatusForSlideShow();'><img src='img/play.png'></a>");
		pause=1;
	}

}