/*
*  How to translate text.
*/

google.load("language", "1");
google.load("jquery", "1.3.2");

var colors = {};
var steps = [];
var text;  // current text in the original language
var i = 0; // step count
var cursor = 0;

function initialize() {
  var qs = new Querystring();
  var langs = qs.get('l', 'en,ja,zh').replace(new RegExp(',$'), '');
  var phrase = qs.get('q', '');
  $('#text').val(phrase);
  langs = langs.split(',');
  set_language_options(langs);
}

function set_language_options(langs) {
  var languages = google.language.Languages;
  var inverted_map = {};
  var opts = [];
  var initial_langs = [];
  for (var i in languages) {
    if (i && i != 'UNKNOWN' && google.language.isTranslatable(languages[i])) {
      opts[opts.length]={name: i, id: languages[i]};
      inverted_map[languages[i]] = i;
    }
  }
  var defaultSteps = [];
  for (var i in langs) {
    defaultSteps.push({id:langs[i], name:inverted_map[langs[i]]});
  }
  // [{id:'en',name:'ENGLISH'},{id:'ja',name:'JAPANESE'},{id:'zh',name:'CHINESE'}];
  $("#languages").tokenInput('', {local:true, localList: opts, hintText: 'Type in a language', prePopulate: defaultSteps});
  $("#text").keydown(function (event) {
      if(event.keyCode == 13) { // return/enter key
        go();
      }
  });
}

function go() {
  // grab the text to translate
  text = $("#text").val();
  if(!text) return;
  
  // get the steps
  steps = $('#languages').val().split(',');
  i = 0;
  l1 = 0;
  l2 = 1;
  $('#translation').html("<div class='line'><span class='label' style='background-color:"+colors[steps[l1]]+";'>"+ steps[l1] + "</span><span class='text'>" + text +"</span></div>");
  translate(text);
}

function handle_translation(result) {
   var translated = document.getElementById("translation");
   if (result.translation) {
     translated.innerHTML += "<div class='line' id='"+i+"'><span class='label' style='background-color:"+colors[steps[l2]]+";'>"+ steps[l2] + "</span><span class='text'>" + result.translation +"</span></div>";
     if(l2 == 0 && result.translation == text) {
        translated.innerHTML += "<br /><div class='line' style='color:green'>Drift complete in "+ (i+1) + " steps.</div>";
        finish();
     } else if (i >= 49) {
       translated.innerHTML += "<br /><div class='line' style='color:red'>Drifted too far after " + (i+1) + " steps.</div>";
       finish();
     } else {
       i++;
       if(l2 == 0) {
         text = result.translation; 
       }
       l1 = l2
       l2 = (i+1) % (steps.length-1)
       translate(result.translation);
     }
   }
}

function translate(value) {
  google.language.translate(value, steps[l1], steps[l2], handle_translation);
}

function finish() {
  // generate link
  var link = $("#link");
  var href = document.location.href.split('?')[0] + '?l=' + encodeURIComponent($('#languages').val()) + '&q='+encodeURIComponent($('#text').val());
  link.attr('href', href);
  link.html(href);
  $('#link-here').show();
}

google.setOnLoadCallback(initialize);