<html>
<head>
<title>Country Languages Auto-completion Ajax Primer Tutorial</title>

<style>
body, #myCountrySearchField {
font: 1.2em verdana, arial, helvetica, sans-serif;
}

.mysuggestions {
background-color: #ffffff;
padding: 2px 6px;
border: 1px solid #000000;
}

.mysuggestions:hover {
background-color: #69F69F;
}

#mypopups {
position: absolute;
}

.myCountrySearchField.myerror {
background-color: #FFCFFC;
}

</style>

<script type="text/javascript">
window.onload = initAll;
var myxhr = false;
var myCountriesArray = new Array();
var myCodesArray = new Array();
var cis = "";
var xmlDoc=loadXMLDoc("languages.xml");
var myThisLanguageCode = "";
var myThisLanguage = "";

function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}

function initAll() {
document.getElementById("myCountrySearchField").onkeyup = searchHelpout;

if (window.XMLHttpRequest) {
myxhr = new window.XMLHttpRequest;
}
else {
try {
myxhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
myxhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
myxhr = false;
}
}
}

if (myxhr) {
//console.log("prehere");

myxhr.onreadystatechange = setCountriesArray;
myxhr.open("GET", "countries_attributed.xml", true);
myxhr.send(null);
} else {
alert("Not able to create XMLHttpRequest ... sadly.");
}
}

function setCountriesArray() {
if (myxhr.readyState == 4) {
if (myxhr.status == 200) {
//console.log("here");
if (myxhr.responseXML) {
var myAllCountries = myxhr.responseXML.getElementsByTagName("country");
for (var myi=0; myi<myAllCountries.length; myi++) {
//console.log("ahere");
//console.log("yeshere at " + myAllCountries[myi].getAttribute("name"));
if (1 == 1) {
myCountriesArray[myi] = myAllCountries[myi].getAttribute("name");
myCodesArray[myi] = myAllCountries[myi].getAttribute("code");
} else {
myCountriesArray[myi] = myAllCountries[myi].getElementsByTagName("name")[0].firstChild;
myCodesArray[myi] = myAllCountries[myi].getElementsByTagName("code")[0].firstChild;
}
}
}
} else {
//console.log("Problem: " + myxhr.status);
alert("Problem: " + myxhr.status);
}
}
}

function searchHelpout() {
var mystr = document.getElementById("myCountrySearchField").value;
var myThisCode = "";
myThisLanguageCode = "";
myThisLanguage = "";
var mySpareThisLanguageCode = "";
var mySpareThisLanguage = "";
document.getElementById("myCountrySearchField").className = "";
if (mystr != "") {
document.getElementById("mypopups").innerHTML = "";
for (var myi=0; myi<myCountriesArray.length; myi++) {
//console.log(myCountriesArray[myi]);
var myThisCountry = myCountriesArray[myi]; //.nodeValue;

if (myThisCountry.toLowerCase().indexOf(mystr.toLowerCase()) == 0) {
myThisCode = myCodesArray[myi];
var myTempDiv = document.createElement("div");
myTempDiv.title = myCodesArray[myi];
myTempDiv.innerHTML = myThisCountry;
myTempDiv.onclick = makeSelection;
myTempDiv.className = "mysuggestions";
document.getElementById("mypopups").appendChild(myTempDiv);
}

}
var myFoundCt = document.getElementById("mypopups").childNodes.length;
if (myFoundCt == 0) {
document.getElementById("myCountrySearchField").className = "myerror";
}
if (myFoundCt == 1) {
document.getElementById("myCountrySearchField").value = document.getElementById("mypopups").firstChild.innerHTML;
cis = document.getElementById("mypopups").firstChild.innerHTML;
//alert("cis=" + cis);
document.getElementById("mypopups").innerHTML = "";

//var xmlDoc=loadXMLDoc("languages.xml");

var myAllLanguages = xmlDoc.getElementsByTagName("language");
for (var myj=0; myj<myAllLanguages.length; myj++) {
//console.log(myAllLanguages[myj].getAttribute("code").toLowerCase() + " vs " + myThisCode.toLowerCase());
if (myAllLanguages[myj].getAttribute("code").toLowerCase().indexOf(myThisCode.toLowerCase()) == 0) {
myThisLanguageCode = myAllLanguages[myj].getAttribute("code");
myThisLanguage = myAllLanguages[myj].getAttribute("name");
}
if (myAllLanguages[myj].getAttribute("name").toLowerCase().indexOf(myThisCode.toLowerCase()) == 0) {
mySpareThisLanguageCode = myAllLanguages[myj].getAttribute("code");
mySpareThisLanguage = myAllLanguages[myj].getAttribute("name");
}
}

if (myThisLanguageCode == "" && mySpareThisLanguageCode != "") {
myThisLanguageCode = mySpareThisLanguageCode;
myThisLanguage = mySpareThisLanguage;
}

if (myThisLanguageCode != "" && 1 == 2) {
window.open("http://translate.google.com/#en|" + myThisLanguageCode + "|Hello%20from%20Sydney%20in%20Australia.", myThisLanguageCode, "left=500,top=10,width=800,height=380");
myThisLanguageCode = "";
myThisLanguage = "";
}

}
}
}

function makeSelection(evt) {
var myThisCode = "";
myThisLanguageCode = "";
myThisLanguage = "";
var mySpareThisLanguageCode = "";
var mySpareThisLanguage = "";
if (evt) {
var myThisDiv = evt.target;
} else {
var myThisDiv = window.event.srcElement;
}
document.getElementById("myCountrySearchField").value = myThisDiv.innerHTML;
myThisCode = myThisDiv.title;
cis = myThisDiv.innerHTML;
//alert("Cis=" + cis);
document.getElementById("mypopups").innerHTML = "";

//var xmlDoc=loadXMLDoc("languages.xml");

var myAllLanguages = xmlDoc.getElementsByTagName("language");
for (var myj=0; myj<myAllLanguages.length; myj++) {
//console.log("2: " + myAllLanguages[myj].getAttribute("code").toLowerCase() + " vs " + myThisCode.toLowerCase());
if (myAllLanguages[myj].getAttribute("code").toLowerCase().indexOf(myThisCode.toLowerCase()) == 0) {
myThisLanguageCode = myAllLanguages[myj].getAttribute("code");
myThisLanguage = myAllLanguages[myj].getAttribute("name");
}
if (myAllLanguages[myj].getAttribute("name").toLowerCase().indexOf(myThisCode.toLowerCase()) == 0) {
mySpareThisLanguageCode = myAllLanguages[myj].getAttribute("code");
mySpareThisLanguage = myAllLanguages[myj].getAttribute("name");
}
}
if (myThisLanguageCode == "" && mySpareThisLanguageCode != "") {
myThisLanguageCode = mySpareThisLanguageCode;
myThisLanguage = mySpareThisLanguage;
}

if (myThisLanguageCode != "" && 1 == 2) {
window.open("http://translate.google.com/#en|" + myThisLanguageCode + "|Hello%20from%20Sydney%20in%20Australia.", myThisLanguageCode, "left=500,top=10,width=800,height=360");
myThisLanguageCode = "";
myThisLanguage = "";
}

gbit();
}

function gbit() {
if (document.getElementById("myCountrySearchField").value != "" && cis != "") {
//document.getElementById("mygi").style.display = "block";
//alert("https://maps.google.com/maps?q=" + cis + '&hl=en&hnear=' + cis + '&t=m&z=5');
window.open("https://maps.google.com/maps?q=" + cis, cis, "left=10,top=210,width=1300,height=520"); //,'mygi');
cis = "";
if (myThisLanguageCode != "") {
window.open("http://translate.google.com/#en|" + myThisLanguageCode + "|Hello%20from%20Sydney%20in%20Australia.", myThisLanguageCode, "left=500,top=10,width=800,height=360");
myThisLanguageCode = "";
myThisLanguage = "";
}
} else {
document.getElementById("mygi").style.display = "none";
}
}

</script>

</head>
<body>
<form action="#">
Please enter your country name: <input type="text" name="myCountrySearchField" id="myCountrySearchField" autocomplete="off" onblur="gbit();" /><br>
<div id="mypopups"> </div>
<br><iframe id='mygi' src='javascript:false;' style='display:none;width:100%;height:550px;'></iframe>
</form>
</body>
</html>