// Load the Google Transliteration API
google.load("elements", "1", {
  packages: "transliteration"
});
var transliterationControl;
function onLoad() {
if ( google.elements.transliteration.isBrowserCompatible() ) {
  //alert ('Browser support translitration')
} else {
  //alert ('Browser does not support translitration')
}
  if ( lang_selected.toLowerCase() == 'hindi' ) {
    var enable_transliteration = true;
  } else {
    var enable_transliteration = false;
  }
  var options = {
      sourceLanguage:
        google.elements.transliteration.LanguageCode.ENGLISH,
      destinationLanguage:
        google.elements.transliteration.LanguageCode.HINDI,
      transliterationEnabled: enable_transliteration,
      shortcutKey: 'ctrl+g'
  };
  // Create an instance on TransliterationControl with the required
  // options.
  try	{
    transliterationControl =
      new google.elements.transliteration.TransliterationControl(options);	
  } catch (ex) {	}
  // Enable transliteration in the textfields with the given ids.
  var width_arr = new Object;
  var height_arr = new Object;
  var fontSize_arr = new Object;
  for ( var id_n in ids ) {
    try {
      if ( document.getElementById(ids[id_n]).style.width ) {
        width_arr[ids[id_n]] = document.getElementById(ids[id_n]).style.width;
      }
      if ( document.getElementById(ids[id_n]).style.height ) {
        height_arr[ids[id_n]] = document.getElementById(ids[id_n]).style.height;
      }
      if ( document.getElementById(ids[id_n]).style.fontSize ) {
        fontSize_arr[ids[id_n]] = document.getElementById(ids[id_n]).style.fontSize;
      }
    } catch(ex) { } 
  }
  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('trans_checkboxId').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);
  var language_drop_count = 0;
  for (var lang in supportedDestinationLanguages) {
    if ( supportedDestinationLanguages[lang] == 'hi' ) {
      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);
      }
      language_drop_count++;
    }
  }
  if ( language_drop_count ) {
    document.getElementById('translControl').style.display = 'block';
  }
  for ( var i = 0; i < ids.length; i++ ) {
    try {
      if ( fontSize_arr[ids[i]] ) {
        document.getElementById(ids[i]).style.fontSize = fontSize_arr[ids[i]];
      } else {
        document.getElementById(ids[i]).style.fontSize = '12px';
      }
      if ( document.getElementById(ids[i]).style.width == '0px' ) {
        if ( width_arr[ids[i]] ) {
         document.getElementById(ids[i]).style.width = width_arr[ids[i]];
        } else {
         document.getElementById(ids[i]).style.width = '185px';
        }
      }
      if ( document.getElementById(ids[i]).type == 'text' ) {
        if ( height_arr[ids[i]] ) {
          document.getElementById(ids[i]).style.height = height_arr[ids[i]];
        } else {
          document.getElementById(ids[i]).style.height = 'auto';
        }
      } else if ( document.getElementById(ids[i]).type == 'textarea' && document.getElementById(ids[i]).style.height == '28px' ) {
        if ( height_arr[ids[i]] ) {
          document.getElementById(ids[i]).style.height = height_arr[ids[i]];
        } else {
          document.getElementById(ids[i]).style.height = '100px';
        }
      }
    } catch(ex) { }
  }
}
// Handler for STATE_CHANGED event which makes sure checkbox status
// reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
  if ( e.transliterationEnabled ) {
    document.getElementById('languageDropDown').disabled = false;
  } else {
    document.getElementById('languageDropDown').disabled = true;
  }
  document.getElementById('trans_checkboxId').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');
//        dropdown.disabled = false;
  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 = "";
}