// global variable that keeps track of all the setTimeout variables so we can clear them whenever and wherever we want to
var timeoutTrack = [];
timeoutTrack['translation'] = true;
timeoutTrack['detection'] = true;

/**
 * since the google api is accessed through AJAX calls, the user might have to wait a while for the result
 * this function makes displaying a 'processing ...' kinda message possible in a sort animated way
 *
 * @param text
 * @param inc
 * @param el
 */
function showProgress(text, inc, el)
{
	elId = el.id;
	if (inc > 3)
		inc = 0;
	var dots = '';
	for (i=0; i<inc; i++)
		dots += '.';
	if (el.tagName.match(/input|textarea/i))
		el.value = text+' '+dots;
	else
		el.innerHTML = text+' '+dots;

	if (timeoutTrack[elId])
		timeoutTrack[elId] = setTimeout(function() { showProgress(text, (inc+1), el) }, 200);
	else
		alert('no');
}
/**
 * when the 'translate'-button is hit this function will be called and it will initiate the translation
 *
 */
function translate()
{
	// input element
	var inputEl = document.getElementById("text");
	// output element
	var transEl = document.getElementById("translation");

	// input language (empty means auto-detect)
	var langIn  = document.getElementById('inputLang').value;
	// output language
	var langOut = document.getElementById('outputLang').value;

	// start animation to show the user we are processing the request
	showProgress('translating', 0, transEl);
	// if we've done a previous request with auto-detection, we clear it here
	document.getElementById("detection").innerHTML = '';

	// input text
	var text = inputEl.value;

	// calling the google api and passing a function that will deal with the result in a proper way
	google.language.translate(text, langIn, langOut, function(result) {
		// element where we want to show the translation
		var container = document.getElementById("translation");
		// stopping the animation
		clearTimeout(timeoutTrack['translation']);
		// displaying the result
		if (!result.error) {
			container.value = result.translation;
		}
		else {
			container.value = 'error :(';
			for (i in result.error)
				alert(i+':'+result.error[i]);
		}
	});

	// translation has been done

	// if empty, it means google will auto-detect the language
	if (langIn == '')
	{
		// it has auto-detected the language, so we do an extra call to see what this language is

		// start animation to show the user we are processing this request
		showProgress('detecting', 0, document.getElementById("detection"));

		// detecting the language
		google.language.detect(text, function(result) {
			// stopping the animation
			clearTimeout(timeoutTrack['detection']);
			// display the result
			if (!result.error) {
				var language = 'unknown';
				for (l in google.language.Languages) {
					if (google.language.Languages[l] == result.language) {
						language = l;
						break;
					}
				}
				var container = document.getElementById("detection");
//				container.innerHTML = text + " is: " + language + "";
				container.innerHTML = "input language is: " + language + "";
			}
			else {
				container.innerHTML = error.message;
			}
		});
	}
}

// initiate google translation API
google.load("language", "1");