
jQuery.noConflict();

jQuery(document).ready(function(){

  var $ = jQuery, mouse_x, mouse_y, midpoint, timeout;

  $().mousemove(function(e){mouse_x = e.pageX;mouse_y = e.pageY});

  // determine #profiles midpoint
  var getmidpoint = function(){
    var offset = $('#profiles').offset();
    midpoint = offset.left + 480;
  };
  
  getmidpoint();

  // set handlers to recalculate midpoint on browser resize
  if ($.browser.opera) {
    window.attachEvent('resize', function(){
      getmidpoint();
    });
  } else {
    $(window).resize(function(){
      getmidpoint();
    });
  }
  
  $(document.body).append('<div class="tooltip" id="tooltip-left"><h3/><p/></div><div class="tooltip" id="tooltip-right"><h3/><p/></div>');
  
  // preload tooltip graphics
  $('<img/>').attr('src','../style/images/tooltip-right.png');
  $('<img/>').attr('src','../style/images/tooltip-left.png');
    
  $('#profiles .profile a').bind('focus mouseover', function(){
    
    clearTimeout(timeout);
    $('.tooltip').hide();
    $('.hover').removeClass('hover');
     
    var offset = $(this).offset();
    
    if (offset.left > midpoint) {
      $('#tooltip-right h3').html($(this).siblings('h3').html());
      $('#tooltip-right p').html($(this).siblings('p').html());
      $('#tooltip-right').css({'top':offset.top - 88,'left':offset.left - 299}).show();
    }
    else {
      $('#tooltip-left h3').html($(this).siblings('h3').html());
      $('#tooltip-left p').html($(this).siblings('p').html());
      $('#tooltip-left').css({'top':offset.top - 88,'left':offset.left - 1}).show();
    }
    
    $('span', this).addClass('hover');
        
  }).bind('blur mouseout', function(){
    
    var el = $(this);
    var offset = el.offset();
    
    x1 = offset.left; x2 = x1 + 70;
    y1 = offset.top;  y2 = y1 + 70;
        
    if (mouse_y > y1 && mouse_y < y2 && mouse_x > x1 && mouse_x < x2) {
      timeout = setTimeout(function(){el.trigger('mouseout')}, 100);
    }
    else {
      $('.tooltip').hide();
      $('span', this).removeClass('hover');
    }
        
  });
          	        
});