/*
 Tooltip script
 powered by jQuery (http://www.jquery.com)

 written by Alen Grakalic (http://cssglobe.com)
 for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

*/

 // 'tooltipObjFlag' can be defined outside the script. It makes the script load tooltip content
 // from object id contained in the title, e.g. title='###test1'... will load content from #test1
 if (typeof(tooltipObjFlag)=='undefined') { var tooltipObjFlag = '###' }

 // 'tooltipSpeed' sets the display speed of the tooltip
 if (typeof(tooltipSpeed)=='undefined') { var tooltipSpeed = 300 }
 
 // 'tooltipLocal' is a flag that tells the script to attach the tooltip locally if set to true. If
 // false the tooltip is added to the body
 if (typeof(tooltipLocal)=='undefined') { var tooltipLocal = false }

 var xOffset = 20; // Don't use negative values here
 var yOffset = 20;

 var tooltipCSS = 'position:absolute;z-index:1000;';

this.tooltip = function(){
// Tooltips
 $(".tooltip").mouseover(function(e){
  this.t = (this.title == '') ? this.t : this.title;
  var ttt = this.t;
  this.title = '';
  // Load tooltip content from an object
  var rx = new RegExp('^' + tooltipObjFlag);
  if (rx.test(ttt)) {
   tte = ttt.replace(rx,'#').split(' ')[0];
   if (tte.length < 1 || tte.length > 20) {
    ttt = this.t;
   } else {
    ttt = $(tte).html();
   }
  }
  
  // retrieves width and color information from the rel attribute
  // rel='250,#000000;color:#ffffff;' => tooltip width = 250, background color = #000000, text = #ffffff
  var tmp = (typeof($(this).attr('rel'))=='undefined') ? '' : $(this).attr('rel').split(',');
  this.w = (tmp[0] == '') ? $('#tooltip').width() : tmp[0];
  this.c = (typeof(tmp[1])=='undefined') ? '' : 'background-color:' + tmp[1];
  var tmp = "<div id='tooltip' style='" + tooltipCSS + "width:" + this.w + "px;" + this.c + "'>" + ttt + "</div>";
  if (tooltipLocal){
   $(this).before(tmp);
  } else {
   $('body').append(tmp);
  }
  ttrelocate(e,'#tooltip');
  $('#tooltip').fadeIn(tooltipSpeed);
 })
 $(".tooltip").mouseout(function(e){
  this.title = this.t;
  $('#tooltip').remove();
 });
 $(".tooltip").mousemove(function(e){
  ttrelocate(e,'#tooltip');
 });
 
// Image & URL screenshot preview
$("a.preview,a.screenshot").hover(function(e){
  this.t = this.title;
  this.title = '';
  var tmp = "<div id='preview' style='" + tooltipCSS + "'><img src='";
  var c = (this.t != '') ? '<br/>' + this.t : '';
  /* use websnapr.com to get website thumbnail preview if rel="#" */
  var ss = ($(this).hasClass('screenshot') && this.rel=="#") ? 'http://images.websnapr.com/?url=' + this.href : this.rel;
  if (this.rev.length) {
  	tmp += ($(this).hasClass('preview')) ? this.rev + "' alt='Image preview' />" : ss + "' alt='URL preview' />";
  }else{
  	tmp += ($(this).hasClass('preview')) ? this.href + "' alt='Image preview' />" : ss + "' alt='URL preview' />";
  }
  
  tmp += c +"</div>";
  if (tooltipLocal){
   $(this).before(tmp);
  } else {
   $('body').append(tmp);
  }
  ttrelocate(e,'#preview');
  $('#preview').fadeIn(tooltipSpeed);
 })
 $("a.preview,a.screenshot").mouseout(function(e){
  this.title = this.t;
  $('#preview').remove();
 }); 
 $("a.preview,a.screenshot").mousemove(function(e){
  ttrelocate(e,'#preview');
 });
}
function ttrelocate(e,ttid){
 var ttw = $(ttid).width();
 var tth = $(ttid).height();
 var wscrY = $(window).scrollTop();
 var wscrX = $(window).scrollLeft();
 var curX = (document.all) ? event.clientX + wscrX : e.pageX;
 var curY = (document.all) ? event.clientY + wscrY : e.pageY;
 var ttleft = ((curX - wscrX + xOffset*2 + ttw) > $(window).width()) ? curX - ttw - xOffset : curX + xOffset;
 if (ttleft < wscrX + xOffset) ttleft = wscrX + xOffset;
 var tttop = ((curY - wscrY + yOffset*2 + tth) > $(window).height()) ? curY - tth - yOffset : curY + yOffset;
 if (tttop < wscrY + yOffset) tttop = curY + yOffset;
 $(ttid).css('top', tttop + 'px').css('left', ttleft + 'px');
}

$(document).ready(function(){
 tooltip();
});