var aLanden = [];
var aLandenVlaggen = [];
var aPlaatsTalen = [];


function PlaatsTaal()
{
	this.landid = -1;
	this.landcode = -1;
	this.plaatsid = -1;
	this.plaatsnaam = "";
};


// -------------------------------------------------------------------
// function wordt uitgevoerd bij startup
// -> laad dropdown met plaatstalen
// -------------------------------------------------------------------
function pageLoad()
{
	// set array with landen
	Go2Gay.WsGeo.GetLanden(setLandenInList);

	// set dropdown with plaatsen
	Go2Gay.WsGeo.GetPlaatsenByTaal(iTaalId, setPlaatsTalenInList);
}


// -------------------------------------------------------------------
// function sets landen in array
// -------------------------------------------------------------------
function setLandenInList(oGeo)
{
	aLanden = [];
	aLandenVlaggen = [];

	for (i = 0; i < oGeo.length; i++)
	{
		// add land to array
		aLanden[oGeo[i].landid] = oGeo[i].landnaam;
		aLandenVlaggen[oGeo[i].landid] = 'Images/Ico/flags/' + oGeo[i].landcode + '.png';
	}
}



// -------------------------------------------------------------------
// function sets plaatsen in list
// -------------------------------------------------------------------
function setPlaatsTalenInList(oPlaatsen)
{
	aPlaatsTalen = [];

	// add objects to list
	for (i = 0; i < oPlaatsen.length; i++)
	{
		aPlaatsTalen.push(oPlaatsen[i]);
	}

	// filter plaats talen
	if (filterPlaatsTalenInList())
	{
		// hide list
		showHidePlaatsTalenList();
	}	
}



// -------------------------------------------------------------------
// function filters plaatsen in list
// -------------------------------------------------------------------
function filterPlaatsTalenInList()
{
	var selCitySearchResults = document.getElementById("selCitySearchResults");
	var txtCitySearchTextBox = document.getElementById("txtCitySearchTextBox");
	sCitySearchText = txtCitySearchTextBox.value.toLowerCase();

	// Alleen gegevens tonen indien meer dan 2 karkaters ingevoerd
	if (sCitySearchText.length <= 2)
	{
		document.getElementById("divCitySearchResults").style.display = 'none';
		return false;
	}	

	// verwijderen oude plaatsen
	while (selCitySearchResults.children.length > 0)
	{
		selCitySearchResults.removeChild(selCitySearchResults.lastChild);
	}

	var previousPlaatsId = -1;

	iPlaatsTalenCounter = 0;
	for (i = 0; i < aPlaatsTalen.length; i++)
	{
		// initialize boolean
		bShowPlaats = false;
	
		// check if zoek string is not empty
		if (sCitySearchText == "")
		{
			// set boolean
			bShowPlaats = true;
		}
		else
		{
			// check if zoek string in plaatsnaam voor komt
			sPlaatsNaam = aPlaatsTalen[i].naam.toLowerCase();
			sPlaatsNaam = replaceDiacritics(sPlaatsNaam);
			if (sPlaatsNaam.startsWith(sCitySearchText))
			{
				// set plaats
				bShowPlaats = true
			}
		}

		// set list item
		if ((bShowPlaats == true) && (aPlaatsTalen[i].plaatsid != previousPlaatsId))
		{
			sPlaatsNaam = aPlaatsTalen[i].naam;
			if (aPlaatsTalen[i].taalid != -1)
			{
				sPlaatsNaam = sPlaatsNaam + " / " + aPlaatsTalen[i].naamorg;
			}
			sPlaatsNaam = sPlaatsNaam + " (" + aLanden[aPlaatsTalen[i].landid] + ")";

			var oNewLi = document.createElement("li");
			oNewLi.id = "liplaatsid" + aPlaatsTalen[i].plaatsid;
			oNewLi.tabIndex = 1000 + iPlaatsTalenCounter;
			oNewLi.innerHTML = '<a href="javascript:plaatsNaamClicked(' + aPlaatsTalen[i].plaatsid + ');"><img class="ico" src="' + aLandenVlaggen[aPlaatsTalen[i].landid] + '" />' + sPlaatsNaam + '</a>';
			selCitySearchResults.appendChild(oNewLi);
		}

		// remember previous plaats
		previousPlaatsId = aPlaatsTalen[i].plaatsid;

		// increment plaatstalencounter
		iPlaatsTalenCounter++;
	}

	// show plaatstalen list
	document.getElementById("divCitySearchResults").style.display = 'block';

	// select first item in dropdown list
	selectFirstItemInPlaatsenDropdown();

	return true;
}



// -------------------------------------------------------------------
// function shows/hides plaatstalen list
// -------------------------------------------------------------------
function showHidePlaatsTalenList()
{
	if (document.getElementById("divCitySearchResults").style.display == 'block')
	{
		document.getElementById("divCitySearchResults").style.display = 'none';
	}
	else
	{
		document.getElementById("divCitySearchResults").style.display = 'block';
	}
}


// -------------------------------------------------------------------
// function selects first item in plaatsen dropdown list
// -------------------------------------------------------------------
function selectFirstItemInPlaatsenDropdown()
{
	var selCitySearchResults = document.getElementById("selCitySearchResults");
	var objPlaatsen = selCitySearchResults.getElementsByTagName("li");

	// check if there are items
	if (objPlaatsen.length > 0)
	{
		// select first item
		objPlaatsen[0].className = 'selected';
		objPlaatsen[0].focus();
	}

	// focus on text box
	document.getElementById("txtCitySearchTextBox").focus();
}



// -------------------------------------------------------------------
// function wordt uitgevoerd als in de user input voor het zoeken naar plaatsen op de ENTER key is gedrukt
// -> toon dropdown met plaatsen, go to selected item in dropdown list
// -------------------------------------------------------------------
function searchPlaatsenInputEnterKeyPressed()
{
	var oDivCitySearchResults = document.getElementById("divCitySearchResults");

	if (oDivCitySearchResults.style.display == 'none')
	{
		oDivCitySearchResults.style.display = 'block';
	}
	else
	{
		// go to selected
		var selCitySearchResults = document.getElementById("selCitySearchResults");
		var objPlaatsen = selCitySearchResults.getElementsByTagName("li");

		for (i = 0; i < objPlaatsen.length; i++)
		{
			if (objPlaatsen[i].className == 'selected')
			{
				plaatsId = objPlaatsen[i].id.substr(10);
				plaatsNaamClicked(plaatsId);
				break;
			}
		}
	}
}


// -------------------------------------------------------------------
// function wordt uitgevoerd als in de user input voor het zoeken naar plaatsen op de ARROW UP key is gedrukt
// -> toon dropdown met plaatsen, go to previous item in dropdown list
// -------------------------------------------------------------------
function searchPlaatsenInputArrowUpKeyPressed()
{
	var oDivCitySearchResults = document.getElementById("divCitySearchResults");

	if (oDivCitySearchResults.style.display == 'none')
	{
		oDivCitySearchResults.style.display = 'block';
	}
	else
	{
		var selCitySearchResults = document.getElementById("selCitySearchResults");
		var objPlaatsen = selCitySearchResults.getElementsByTagName("li");

		for (i = 0; i < objPlaatsen.length; i++)
		{
			if (objPlaatsen[i].className == 'selected')
			{
				if (i != 0)
				{
					objPlaatsen[i].className = '';
					objPlaatsen[i - 1].className = 'selected';
					objPlaatsen[i - 1].focus();
					document.getElementById("txtCitySearchTextBox").focus();
				}

				break;
			}
		}
	}
}


// -------------------------------------------------------------------
// function wordt uitgevoerd als in de user input voor het zoeken naar plaatsen op de ARROW DOWN key is gedrukt
// -> toon dropdown met plaatsen, go to next item in dropdown list
// -------------------------------------------------------------------
function searchPlaatsenInputArrowDownKeyPressed()
{
	var oDivCitySearchResults = document.getElementById("divCitySearchResults");

	if (oDivCitySearchResults.style.display == 'none')
	{
		oDivCitySearchResults.style.display = 'block';
	}
	else
	{
		var selCitySearchResults = document.getElementById("selCitySearchResults");
		var objPlaatsen = selCitySearchResults.getElementsByTagName("li");

		for (i = 0; i < objPlaatsen.length; i++)
		{
			if (objPlaatsen[i].className == 'selected')
			{
				if (i != (objPlaatsen.length-1))
				{
					objPlaatsen[i].className = '';
					objPlaatsen[i + 1].className = 'selected';
					objPlaatsen[i + 1].focus();
					document.getElementById("txtCitySearchTextBox").focus();
				}

				break;
			}
		}
	}
}






// -------------------------------------------------------------------
// function called when on plaatsnaam clicked
// -------------------------------------------------------------------
function plaatsNaamClicked(iPlaatsId)
{
	// disable website
	disableWebsite();

	// get filter
	var sFilter = getFilter();

	// set parameters in session
	PageMethods.SetPlaatsSession(iPlaatsId, sFilter, plaatsNaamClickedFinished);
}


// -------------------------------------------------------------------
// function called when on plaatsnaam clicked is finished
// -------------------------------------------------------------------
function plaatsNaamClickedFinished()
{	
	// redirect to go2gay.aspx
	window.location = sGo2GayWebsiteUrl +  "/Go2Gay.aspx";
}


// -------------------------------------------------------------------
// function called to get selected filter
// -------------------------------------------------------------------
function getFilter()
{
	var aAllFilterOptions = [1, 2, 7, 5, 4, 8];
	var aFilter = [];
	var sFilter = "";
	var sElementName = "";

	// verzamel alle geselecteerde filter opties in array
	for (i = 0; i < aAllFilterOptions.length; i++)
	{
		sElementName = "chkHc" + aAllFilterOptions[i];
		if (document.getElementById(sElementName).checked == true)
		{
			aFilter.push(aAllFilterOptions[i]);
		}
	}

	// maak een string van filter array
	for (j = 0; j < aFilter.length; j++)
	{
		if (sFilter == "")
		{
			sFilter = aFilter[j];
		}
		else
		{
			sFilter = sFilter + ";" + aFilter[j];
		}

	}

	// return result
	return sFilter;
}


// -------------------------------------------------------------------
// function shows/hides plaatstalen list
// -------------------------------------------------------------------
function replaceDiacritics(s)
{
	var s;

	var diacritics = [
        /[\300-\306]/g, /[\340-\346]/g,  // A, a 
        /[\310-\313]/g, /[\350-\353]/g,  // E, e 
        /[\314-\317]/g, /[\354-\357]/g,  // I, i 
        /[\322-\330]/g, /[\362-\370]/g,  // O, o 
        /[\331-\334]/g, /[\371-\374]/g,  // U, u 
        /[\321]/g, /[\361]/g, // N, n 
        /[\307]/g, /[\347]/g, // C, c 
    ];

	var chars = ['A', 'a', 'E', 'e', 'I', 'i', 'O', 'o', 'U', 'u', 'N', 'n', 'C', 'c'];

	for (var i = 0; i < diacritics.length; i++)
	{
		s = s.replace(diacritics[i], chars[i]);
	}

	return s;
}


// -------------------------------------------------------------------
// function disables the website
// -------------------------------------------------------------------
function disableWebsite()
{
	document.getElementById("pnlDisableWebsite").style.display = 'block';
	document.getElementById("pnlLoadingWebsite").style.display = 'block';
}

// -------------------------------------------------------------------
// User clicked on search / explore button
// -------------------------------------------------------------------
function searchButtonClicked()
{
	// Get elements from windwo
	var oDivCitySearchResults = document.getElementById("divCitySearchResults");
	var selCitySearchResults = document.getElementById("selCitySearchResults");
	var objPlaatsen = selCitySearchResults.getElementsByTagName("li");

	// init
	plaatsId = -1;

	// Is de lijst met plaatsen uitgeklapt
	if (oDivCitySearchResults.style.display == 'block')
	{
		// Ga naar de geselecteerde
		for (i = 0; i < objPlaatsen.length; i++)
		{
			if (objPlaatsen[i].className == 'selected')
			{
				// bepaal plaatsid
				plaatsId = objPlaatsen[i].id.substr(10);
				break;
			}
		}
	}
	else
	{
		// Lijst gesloten maar slehts 1 in de lijst
		if (objPlaatsen.length == 1)
		{
			// Zet id
			plaatsId = objPlaatsen[0].id.substr(10);
		}
	}

	plaatsNaamClicked(plaatsId);

}