/********************************************************************************
*
* ge.tooltips - a sweet tootltip object
*
* TODO: load jquery
*
* At first I tried several jQuery toolkit plugins (tootlip,qtip,cluetip) but didnt
* like any of them so I wrote my own tooltip code.
* 
* Usage: 
* 
*  ge.tooltips.get_tooltip_content=function(element) { return "hello world"; };
*  ge.tooltips.start("a");
*   
*  -or-
* 
*  ge.tooltips.get_tooltip_html=function(element) { return "<div class=myTooltipClass>hello world</div>"; };
*  ge.tooltips.start("a");
*
********************************************************************************/

if (typeof(ge)=="undefined") ge=new function() {};

ge.tooltips=new function()
{
 this.border_x=30;
 this.border_y=30;
 this.mouse_offset_x=30;
 this.mouse_offset_y=30;

 this.get_tooltip_content=function(element)
 {
  return element;
 }

 this.get_tooltip_html=function(element)
 {
  return '<div class=tip>'+ge.tooltips.get_tooltip_content(element)+'</div>';
 }

 this.tip_over=function()
 {
  clearTimeout(timerID);
 }

 this.tip_out=function()
 {
  this.startFadeout();
 }

 this.handle_mouseover=function(event,element)
 {
  if (typeof(timerID)!="undefined") clearTimeout(timerID);
  if (typeof(tooltip)!="undefined")
  {
   old_stuff=tooltip.html();
   new_stuff=$(ge.tooltips.get_tooltip_html(element)).html();
   if ((old_stuff==new_stuff) && (tooltip.status=="active")) return;
   tooltip.remove();
  }

  tooltip=$(ge.tooltips.get_tooltip_html(element));

  tooltip.appendTo(document.body);
  tooltip.status="active";

  var x=event.pageX+this.mouse_offset_x;

  if (x+tooltip.outerWidth()+this.border_x > $(window).width())
   x=event.pageX-this.mouse_offset_x-tooltip.outerWidth();

  var y=event.pageY+this.mouse_offset_y;
  if (y+tooltip.outerHeight()+this.border_y > $(window).height())
   y=event.pageY-this.mouse_offset_y-tooltip.outerHeight();

  x=Math.max(0, x);
  y=Math.max(0, y);

  tooltip.css({left: x, top: y});

  tooltip.hover(function(event) {ge.tooltips.tip_over(event,this)},function(event) {ge.tooltips.tip_out(event,this)});
 }

 this.startFadeout=function()
 {
  timerID=setTimeout(function () { tooltip.status="fading_out";tooltip.fadeOut("slow"); },500);
 }

 this.handle_mouseout=function(e)
 {
  ge.tooltips.startFadeout();
 }

 this.addSelector=function(selector)
 {
  $(selector).hover(function(event) {ge.tooltips.handle_mouseover(event,this)},ge.tooltips.handle_mouseout);
 }

 this.start=function(selector,no_styles)
 {
  s='<style>                       \
     .tip                          \
     {                             \
      position: absolute;          \
      z-index: 3000;               \
      border: 1px solid #808080;   \
      background-color: #f1f1f1;   \
      padding: 10px;               \
      -moz-border-radius: 20px;    \
      -webkit-border-radius: 20px; \
      border-radius: 20px;         \
     }                             \
                                   \
     .tip iframe                   \
     {                             \
      border: 0;                   \
      overflow: hidden;            \
      margin: 0;                   \
      width: 292px;                \
      height: 180px;               \
      background-color: #ffffff    \
     }                             \
     </style>                      \
     <!--[if IE]>                  \
     <style>                       \
      .tip { padding:0; border-radius: 0 }           \
     </style>                      \
     <![endif]-->                  \
    ';

  if (!no_styles) $("head").append(s);
  this.addSelector(selector);
 }
}