window.onDomReady(function()
{
  var myHovers = {
    observed: [],
    hovered: [],
    opened: [],
    inProcess: false,
    over: function(el) {
        var i = this.observed.indexOf(el);
        if(this.hovered[i] && !this.opened[i]){
            this.inProcess = true;
            getUserDetails(el);
                this.opened[i] = true;
                this.inProcess = false;
        }
    },
    out: function(el) {
        var i = this.observed.indexOf(el);
        if(!this.hovered[i] && !this.inProcess && this.opened[i]){
          this.opened[i] = false;
          el.getNext().remove();
        }
    },
    observe: function(element, i) {
        element.addEvent('mouseover', function(){
            this.hovered[i] = true;
            this.over.delay(500, this, element);
        }.bind(this));
        element.addEvent('mouseout', function(){
            this.hovered[i] = false;
            this.out.delay(300, this, element);
        }.bind(this));
        this.observed.push(element);
        this.opened.push(false);
        this.hovered.push(false);
    }
  };
  $$('a.user').each(function(lnk, i){myHovers.observe(lnk, i);});
})


function getUserDetails(el)
{
  var id = el.getProperty('uid')
  new Ajax('/ajax/',{postBody:'action=getperson&id=' + id, onComplete: function(response){displayUserDetails(response, el);}}).request();
}

function displayUserDetails(response, el)
{
  //Insert div to display details
  //Get Location of element
  var online ="";
  var left = el.offsetLeft;
  var top = el.offsetTop +20;
  var dtlArr = Json.evaluate(response);
  //Build & Inject Container
  var dtlWrap = new Element('div');
  //dtlWrap.setStyles({'position':'absolute', 'left':left+'px', 'top': top+'px', 'width': '150px', 'height': '150px'});
  dtlWrap.setStyles({'position':'absolute', 'left':left+'px', 'top': top+'px', 'width': '90px', 'height': 'auto'});
  dtlWrap.injectAfter(el);
  //Build details
  var divdetail = new Element('div');
  divdetail.setProperty('class', 'detail_mouseover');
  divdetail.setProperty('id', 'detail');
  if (dtlArr['person_online'] == 1)
  {
	 online = "online";
  }else{
	 online = "offline";
  }
  if (dtlArr['person_image']==0)
  {
		var html = "<img src='profile_images/Anonymous.jpg' width='90px'>";
  }else{
	    var html = "<img src='profile_images/" + dtlArr['person_ID'] + "/profile_pic_sm.jpg' width='90px'>";


  }

  html += "<div style='padding-left:5px;'>" + dtlArr['person_username'] + "<br><span style='color:#c80000'>" + online + "</span></div>";
 // html += dtlArr['person_firstname'] + " " + dtlArr['person_lastname'];
  divdetail.setHTML(html);
  divdetail.injectInside(dtlWrap)
  //var detail = new Fx.Slide('detail', {mode: 'horizontal'}).hide();
  //detail.toggle();
}