String.prototype.template = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
}; 

jQuery(function()
		{
    	  	  	  
		  var hideDelay = 500;  
		  var currentID;
		  var hideTimer = null;

		// One instance that's reused to show info for the current player
		  var container = jQuery('<div id="balloonPopupContainer">'
		      + '<table border="0" cellspacing="0" cellpadding="0" align="center" class="balloonPopup">'
		      + '<tr>'
		      + '   <td class="corner topLeft"></td>'
		      + '   <td class="top">&nbsp;</td>'
		      + '   <td class="corner topRight"></td>'
		      + '</tr>'
		      + '<tr>'
		      + '   <td class="left">&nbsp;</td>'
		      + '   <td><div id="playerPopupContent"></div></td>'
		      + '   <td class="right">&nbsp;</td>'
		      + '</tr>'
		      + '<tr>'
		      + '   <td class="corner bottomLeft">&nbsp;</td>'
		      + '	<td class="bottom">&nbsp;</td>'
		      + '   <td class="corner bottomRight">&nbsp;</td>'
		      + '</tr>'
		      + '</table>'
		      + '</div>');

		  jQuery('body').append(container);

		  jQuery('.playerPopupTrigger').live('mouseover', function()
		  {
		      var info = jQuery(this).attr('rel').split(":");
		      
		      var team = info[0];
		      var id = info[1];

		      var default_thumbnail = "<img height='123' width='92' src='images/balloon/UK.jpg' />";
		      var player_thumbnail = "<img height='123' width='92' src='images/balloon/" + team + "/" + id + ".jpg' />";
		     
		      if (hideTimer)
		          clearTimeout(hideTimer);

		      var pos = jQuery(this).offset();
		      var width = jQuery(this).width();
		      container.css({
		          left: (pos.left + width) - 1 + 'px',
		          top: pos.top - 160 + 'px'
		      });

		      var imgsrc = "images/balloon/" + team + "/" + id + ".jpg";
		      var img = new Image();

		      img.onerror = function (evt){
			     jQuery('#playerPopupContent').html(default_thumbnail);
			     container.css('display', 'block');
		      }

		      img.onload = function (evt){
			      jQuery('#playerPopupContent').html(player_thumbnail);
			      container.css('display', 'block');
		    	}
		    	 
		      img.src = imgsrc;
		      		      
		  });

		  jQuery('.playerPopupTrigger').live('mouseout', function()
		  {
		      if (hideTimer)
		          clearTimeout(hideTimer);
		      hideTimer = setTimeout(function()
		      {
		          container.css('display', 'none');
		      }, hideDelay);
		  });

		  // Allow mouse over of details without hiding details
		  jQuery('#playerPopupContainer').mouseover(function()
		  {
		      if (hideTimer)
		          clearTimeout(hideTimer);
		  });

		  // Hide after mouseout
		  jQuery('#playerPopupContainer').mouseout(function()
		  {
		      if (hideTimer)
		          clearTimeout(hideTimer);
		      hideTimer = setTimeout(function()
		      {
		          container.css('display', 'none');
		      }, hideDelay);
		  });
		});