var options = {
  enabled: true,
  UserID: -1,
  TextInputID: 'filterFriends',
  SelectorID: 'friendSelector',
  elementOpacity: '1',
  searchURL: '/meet/browse.html?do_search=1&inpDisplayname={SEARCH_STRING}',
  maxFriends: 10
};

var friendSelector = Class.create();
friendSelector.prototype = {
  version: '0.1',
  Friends: new Array(),
  filteredFriends: new Array(),
  selectedFriendID: -1,
  initialize: function(options) {
		this.options = {
      enabled: true 
		};
		Object.extend(this.options, options);
		
		if(!this.options.enabled) return;
		
    new Ajax.Request(GJ_WEBSITE_URL + 'friendSelector/handler.html', {
      method: 'get',
      parameters: 'AJAX=true',
      onCreate: function(){}.bind(this),
      onSuccess: function(transport) { this.Friends = transport.responseText.evalJSON(); }.bind(this),
      onFailure: function(){ alert('003: An unexpected error occured...'); }.bind(this),
      onComplete: function(transport){this.initInputField();}.bind(this)
    });
  },
  
  initInputField: function() {
    if(!$(this.options.TextInputID)) return false;
    $(this.options.TextInputID).observe('keyup', function(event) {
      if(event.keyCode === Event.KEY_UP || event.keyCode === Event.KEY_DOWN) {
        this.changeSelectionByKey(event);
      }
      else if(event.keyCode === Event.KEY_RETURN) {
        this.openUrlByKey(event);
      } else {
        this.filterFriends(event); 
      }
    }.bindAsEventListener(this));

    $(this.options.TextInputID).observe('focus', function(event) { 
      event.stop(); 
      this.showSelector();
    }.bindAsEventListener(this));
    
    $(this.options.TextInputID).observe('blur', function(event) { 
      this.hideSelector.bind(this).delay(0.3);
    }.bindAsEventListener(this));
  },
  
  filterFriends: function(event) {
    this.selectedFriendID = -1;
    this.filteredFriends.clear();
    if($(this.options.TextInputID).value.length > 0) {
      var regex = new RegExp($(this.options.TextInputID).value, 'i');
      var mycount = 0;
      for (var i = 0; i < this.Friends.length; i++) {
        if(this.Friends[i]['displayname'].match(regex)) {
          this.filteredFriends[mycount] = this.Friends[i];
          mycount++;
          if(mycount >= this.options.maxFriends) break;
        }
      }
    }
    this.refreshSelector();
  },
  
  refreshSelector: function() {
    if($(this.options.SelectorID)) $(this.options.SelectorID).remove();
    if(this.filteredFriends.length > 0) {
      var cumulativeOffset = $(this.options.TextInputID).cumulativeOffset();
      var dimensions = $(this.options.TextInputID).getDimensions();
      var objBody = $$('body')[0];
      var a = new Element('div',{'id':this.options.SelectorID, 'style':'position:absolute; left:' + cumulativeOffset[0] + 'px; top:' + (cumulativeOffset[1] + dimensions.height) + 'px; display:block;'});
      for(var i = 0; i < this.filteredFriends.length; i++) {
        var b = new Element('div', {'id': 'fsFriend-' + i, 'class':'unselected'});        
        b.insert(new Element('div', {'class': 'avatar'}).insert(new Element('img', {'src':this.filteredFriends[i]['url_avatar']})));
        b.insert(new Element('div', {'class': 'name'}).insert(new Element('span').insert(this.filteredFriends[i]['displayname'])));
        b.insert(new Element('div', {'style': 'clear:left;'}));
        a.insert(b);
      }
      a.setOpacity(this.options.elementOpacity);
      a.observe('mouseover', function(event) {
        var eid = event.element().identify();
        if(eid.slice(0, 8) === 'fsFriend') {
          this.changeSelectionFromTo(parseInt(eid.slice(9, eid.length)));
        } else {
          var ancestors = event.element().ancestors();
          if(ancestors[1].identify().slice(0, 8) === 'fsFriend') {
            this.changeSelectionFromTo(parseInt(ancestors[1].identify().slice(9, ancestors[1].identify().length)));
          } else if(ancestors[0].identify().slice(0, 8) === 'fsFriend') {
            this.changeSelectionFromTo(parseInt(ancestors[0].identify().slice(9, ancestors[0].identify().length)));
          }          
        }
      }.bindAsEventListener(this));

      a.observe('click', function(event) {
        var eid = event.element().identify();
        if(eid.slice(0, 8) === 'fsFriend') {
          window.location = this.filteredFriends[parseInt(eid.slice(9, eid.length))]['link_profile'];
        } else {
          var ancestors = event.element().ancestors();
          if(ancestors[1].identify().slice(0, 8) === 'fsFriend') {
            window.location = this.filteredFriends[parseInt(ancestors[1].identify().slice(9, ancestors[1].identify().length))]['link_profile'];
          } else if(ancestors[0].identify().slice(0, 8) === 'fsFriend') {
            window.location = this.filteredFriends[parseInt(ancestors[0].identify().slice(9, ancestors[0].identify().length))]['link_profile'];
          }       
        }
      }.bindAsEventListener(this));
      objBody.insert(a);
    }
  },
  
  openUrlByKey: function(event) {
    if(this.selectedFriendID < 0 || this.selectedFriendID > this.filteredFriends.length - 1) {
      window.location = this.options.searchURL.replace('{SEARCH_STRING}', $(this.options.TextInputID).value);
    } else {
      window.location = this.filteredFriends[this.selectedFriendID]['link_profile'];
      this.hideSelector();
      return true;
    }
  },
  
  changeSelectionByKey: function(event) {
    if(event.keyCode == Event.KEY_UP) {
      this.changeSelectionFromTo(this.selectedFriendID-1);
    } else {
      this.changeSelectionFromTo(this.selectedFriendID+1);
    }
  },
  
  changeSelectionFromTo: function(to) {
    if(to > (this.filteredFriends.length - 1) || to < -1 || to === this.selectedFriendID) return false;
    if(this.selectedFriendID > -1) {
      $('fsFriend-' + this.selectedFriendID).removeAttribute('class');
      $('fsFriend-' + this.selectedFriendID).writeAttribute('class', 'unselected');
     } 
    if(to!==-1 && $('fsFriend-' + to)) {
      $('fsFriend-' + to).removeAttribute('class');
      $('fsFriend-' + to).writeAttribute('class', 'selected');
     }    
    this.selectedFriendID = to;
  },
  
  showSelector: function() {
    if($(this.options.SelectorID) && !$(this.options.SelectorID).visible()) $(this.options.SelectorID).show(); 
  },
  
  hideSelector: function() {
    if($(this.options.SelectorID) && $(this.options.SelectorID).visible()) $(this.options.SelectorID).hide();
  }
}
document.observe('dom:loaded', function () { new friendSelector(options); });