/* tooltip ~ Sean Catchpole - Version 1.0 */

/*
Examples:
<a class="tooltip" href="http://www.jquery.com" title="jQuery Website"/>jQuery</a>
<p class="tooltip" title="#info">tooltips are really good</p>
<div id="#info">They can provide a vast amount of information</div>

Layout:
<div id="tooltip">[Content]</div>
  if title="#..." content=$("#...")[0]
  else content="<p>"+title+"</p>"

Options (over, out, event, title) (all optional):
  over (function) passed element
    returns "#..."  -> finds element for content
    returns string  -> uses string as content
    returns element -> uses element as content
    returns true    -> continues like normal
    returns false   -> stops execution
  out (function) passed element
    same as above (if returns false, doesn't hide tip)
  event ("click"|"mouse")
    binds event type to trigger functions
  title ("#..."|string)
    use string instead of element's title (same rules apply)
*/
//This code is mostly incomplete, feel free to finish it =P
//TODO: Consider sticky tips
//TODO: is removing the title the right thing to do?
//TODO: Challenge: Detect edges of browser and offset accordingly
(function($){ 
  $.fn.tooltip = function(){ 
    //Defaults 
    var s = { "over":null, 
              "out":null, 
              "event":"mouse",
              "title":null}; 
 
    //Loop Arguments matching options 
    var t=1;
    for(var i=0; i<arguments.length; ++i) { 
      var n = {}, a=arguments[i]; 
      switch(typeof a){ 
        case "object": $.extend(n,a); break; 
        case "string": if(a.toLowerCase()=="mouse") n.event="mouse";
                  else if(a.toLowerCase()=="click") n.event="click";
                  else n.title=a; break; 
        case "function": (t)?(over=a):(out=a); t=!t; break; 
      }; $.extend(s,n); 
    }

    //var self = this; //Save scope 
    var tip=$("#tooltip"); //Save tooltip
    if(!tip.length)
      tip = $('<div id="tooltip">').hide()
      .css("position","absolute").appendTo("body");

    //Over
    var over = function(){
      $(this).not('a').css("cursor","default");
      var e = (s.over)?s.over(this):s.title || this.title;
      if(!e) return false; //Nothing to display
      if(typeof e == "string")
        if(e[0] == '#') e=$(e); //Fetch element with id
        else e=$('<p>').html(e); //Create text element
      tip.html(e.clone().show()).show();
      //TODO: Consider fading tooltips option
      return false;
    };

    //Out
    var out = function(){
      var e = (s.out)?s.out(this):s.title || this.title;
      if(!e) return false; //Nothing to display
      if(typeof e == "string")
        if(e[0] == '#') e=$(e); //Fetch element with id
        else e=$('<p>').html(e); //Create text element
      tip.html(e).hide();
      //TODO: Consider fading tooltips option
      return false;
    };

    //Move
    var move = function(m){
      //TODO: Consider offset option (and over/out function able to extend settings)
      var x = ($.browser.msie)?document.body.scrollLeft:window.pageXOffset;
      var y = ($.browser.msie)?document.body.scrollTop:window.pageYOffset;
      tip.css({top:m.clientY+10+y,left:m.clientX+10+x});
      return false;
    };

    //Setup Tips 
    //TODO: how does this work with multiple elements? ($.each)
    this.mousemove(move);
         if(s.event=="mouse") this.hover(over,out);
    else if(s.event=="click") this.toggle(over,out);

    return this; //Chainable 
  }; 
  $(function(){ $(".tooltip").tooltip(); }); 
})(jQuery);