var Trans = new Class({
  initialize: function(elem1,elem2){
    this.slide1 = new Fx.Tween(elem1,{
        unit:'%'
    });
    this.slide2 = new Fx.Tween(elem2,{
        unit:'%'
    });
    this.addBodyListener();
    this.imageHTMLCache = {};
    this.loader = new Element('img',{
        'id':'loader',
        'src':'images/loader.gif'
    }); 
  },
  toWords: function(){
    var self = this;
    return function(){
      self.slide1.start('left','0%');
      self.slide2.start('right','-100%');
      $("toImagesButton").addClass("active");
      $("toWordsButton").removeClass("active");
    }.delay(500);
  },
  toImages: function(){
    var self = this;
    return function(){
      self.slide1.start('left','-100%');
      self.slide2.start('right','0%');
      $("toImagesButton").removeClass("active");
      $("toWordsButton").addClass("active");
    }.delay(500);
  },
  loadAllPhrases: function(){
    var self = this;
    var request = new Request({
      url: 'index.py/getPhrases',
      method: 'post',
      onComplete: function(response){
        $("words").innerHTML = response;
      }
    });
    request.send();
  },
  createPhraseElem: function(json){
    var phrase = "";
    phraseJSON = JSON.decode(json);
    phraseJSON.data.each(function(obj){
        phrase = phrase + " " +  obj['word'];
    });
    var li = new Element('li',{
        'html':'<a class="active" id=' + phraseJSON.date + '>' + phrase + '</a>'
    });
    return li
  },    
  addPhrase: function(json){
    var phraseElem = this.createPhraseElem(json);
    $$("a.active").each(function(el){
        el.removeClass("active");
    });
    $(phraseElem).inject($$("#words>ul")[0],"top");
    var currentId = $$("a.active")[0].id;
    this.loadImages(currentId);
  },
  loadImages: function(phraseDate){
    var self = this;
    if(!self.imageHTMLCache[phraseDate]){
      var request = new Request({
          url:'index.py/getImages?date=' + phraseDate,
          method:'post',
          onComplete: function(response){
            if(response != "null"){
              $("images").innerHTML = response;
              self.toImages();
              self.imageHTMLCache[phraseDate] = response;
            }
          }
      });
      request.send();
    }else{ /* if the image html is cached */
      $("images").innerHTML = self.imageHTMLCache[phraseDate];
    }
  },
  addBodyListener: function(){
    var bod = document.getElement("body");
    var self = this;
    bod.addEvent('click', function(evt){
        var tar = evt.target;
        if(tar.nodeName == "A"){
          evt.preventDefault();
          self.loadImages(tar.id);
          $$("a.active").each(function(el){
              el.removeClass("active");
          });
          tar.addClass("active");
          /*is ui currently hidden?*/
          if($("slideControl").hasClass("unactive")){
            $("slideControl").removeClass("unactive");
          }
          self.toImages();  
        }
    });
  },
  sendData: function(){
    var self = this;
    var data = $("transWords").value;
    var request = new Request({
        url:'index.py/submitPhrase?phrase=' + data,
        method:'post',
        onRequest: function(){
          //remove event from send button
          //reattach when complete or fail
          $(self.loader).inject($$("#words>ul")[0],'top');
        },
        onComplete: function(response){
          if(response != "null"){
            $('loader').dispose();
            self.addPhrase(response);
            $("slideControl").removeClass("unactive");
          }
        }
    });
    request.send();
  }      
});


window.addEvent('domready',function(){
  elem1 = $('words');
  elem2 = $('images');
  /*hide ui*/
  $("slideControl").addClass("unactive");
  var mySlider = new Trans(elem1,elem2);
  mySlider.loadAllPhrases();
  $('toImagesButton').addEvent('click',function(){
    mySlider.toImages();   
  });
  $('toWordsButton').addEvent('click',function(){
    mySlider.toWords();
  });
  $('transSubmit').addEvent('click',function(){
    mySlider.sendData();
  });
});