var pathToMadness = [
  'en|zh', 'zh|en', 'en|es', 'es|en', 'en|ru', 'ru|en',
  'en|ko', 'ko|en', 'en|sv', 'sv|en', 'en|de', 'de|en',
  'en|ar', 'ar|en', 'en|iw', 'iw|en'
];

window.addEvent('domready', function(){
  
  var form = $$('form')[0], input = $$('input')[0], ul = $$('ul')[0];
  
  function looseTranslation(text){
    ul.empty();
    var index = 0, translation = text;
    function next(){
      var lang = pathToMadness[index].split('|');
      var from = lang[0], to = lang[1];
      var li = new Element('li', {'class': 'loading'}).inject(ul);
      var trans = new Element('span', {
        'class': 'trans',
        'html': 'Translating..'
      });
      li.adopt([new Element('span', {
        'class': 'lang',
        'html': from + ' → ' + to + ' '
      }), trans]);
      new Translator({
        onSuccess: function(data){
          translation = data.translatedText;
          li.removeClass('loading');
          trans.set('html', translation);
          if (pathToMadness.length > index) next();
        }
      }).translate(from, to, translation);
      index++;
    }
    next();
  }
  
  input.addEvents({
    'focus': function(){ form.addClass('focus'); },
    'blur': function(){ form.removeClass('focus'); }
  });
  
  form.addEvents({
    'submit': function(event){
      event.stop();
      var text = input.get('value');
      if (text.length > 0)
        looseTranslation(text);
    }
  });
  
  input.focus();
});