// Load the Google Transliteration API
google.load("elements", "1", {
	  packages: "transliteration"
	});
var contentboxname;
var transliterationControl;
function onLoad() {
  var options = { sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
				  destinationLanguage: google.elements.transliteration.LanguageCode.HINDI,
				  transliterationEnabled: false,shortcutKey: 'ctrl+g'
  };
  // Create an instance on TransliterationControl with the required options.
  transliterationControl = new google.elements.transliteration.TransliterationControl(options);

  // Enable transliteration in the textfields with the given ids.
  var ids = [contentboxname];
  transliterationControl.makeTransliteratable(ids);

  // Add the STATE_CHANGED event handler to correcly maintain the state of the checkbox.
  transliterationControl.addEventListener(
	google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED, transliterateStateChangeHandler);

  // Add the SERVER_UNREACHABLE event handler to display an error message if unable to reach the server.
  transliterationControl.addEventListener(
	  google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE, serverUnreachableHandler);

  // Add the SERVER_REACHABLE event handler to remove the error message once the server becomes reachable.
  transliterationControl.addEventListener(
	google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE, serverReachableHandler);

  // Set the checkbox to the correct state.document.getElementById('languageCheck').checked = transliterationControl.isTransliterationEnabled();

  // Populate the language dropdown
  var destinationLanguage = transliterationControl.getLanguagePair().destinationLanguage;
  var languageSelect = document.getElementById('languageDropDown');
  var supportedDestinationLanguages = google.elements.transliteration.getDestinationLanguages(
									  google.elements.transliteration.LanguageCode.ENGLISH);
  for (var lang in supportedDestinationLanguages) {
	var opt = document.createElement('option');
	opt.text = lang;
	opt.value = supportedDestinationLanguages[lang];
	if (destinationLanguage == opt.value) {
	  opt.selected = true;
	}
	try {
	  languageSelect.add(opt, null);
	} catch (ex) {
	  languageSelect.add(opt);
	}
  }
}

// Handler for STATE_CHANGED event which makes sure checkbox status reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
  document.getElementById('languageCheck').checked = e.transliterationEnabled;
}

// Handler for checkbox's click event.  Calls toggleTransliteration to toggle the transliteration state.
function checkboxClickHandler() {
  transliterationControl.toggleTransliteration();
}

// Handler for dropdown option change event.  Calls setLanguagePair to set the new language.
function languageChangeHandler() {
  var dropdown = document.getElementById('languageDropDown');
  transliterationControl.setLanguagePair(google.elements.transliteration.LanguageCode.ENGLISH,
										 dropdown.options[dropdown.selectedIndex].value);
}

// SERVER_UNREACHABLE event handler which displays the error message.
function serverUnreachableHandler(e) {  document.getElementById("errorDiv").innerHTML =
	  "Transliteration Server unreachable";
}

// SERVER_UNREACHABLE event handler which clears the error message.
function serverReachableHandler(e) { document.getElementById("errorDiv").innerHTML = "";
}
google.setOnLoadCallback(onLoad);