$(function() {
	$("area").bind('mouseover', function(){
		ShowTip(this);
	});
	$("area").bind('mouseout',function(){
		$('#tip').remove();
	});
});
//width of the tooltip
var width = 250;
var gridImageID = '#gridimg';

function ShowTip(obj){
	var name = $(obj).attr('title');
	var reason = $(obj).attr('alt');
	var userImage = $(obj).attr('userimage');
	var why = '';
	var coords = $(obj).attr('coords').split(',');
	if (reason!='' || userImage !='') {
		if(coords[2] < 400)
			why="<tr><td width='11'>&nbsp;</td><td width='*' class='tipinner ptr_left'>";
		else
			why="<tr><td width='*' class='tipinner ptr_right'>";
		
		var style='';
		if (reason!='')
			style="class='notalone'";
		
		if (userImage != '')
			why += "<img "+style+" src='userimages/"+userImage+"' />";
		if (reason != '')
			why += "<p>"+reason+"</p>";
		
		if(coords[2] < 400)
			why+="</td></tr>";
		else
			why+="</td><td width='11'>&nbsp;</td></tr>";
	}
	
	if(name == "")
		name="Anonymous";
	//grid image coords
	var gic = $(gridImageID).offset({scroll:false, border:true, padding:true});
	//area coords
	
	var ypos = parseInt(gic.top) + parseInt(coords[1]);
	var tableWidth = (reason=='')?'':"width='250'";
					  
					  
	/*
	if(coords[2] < 400){
		//show tooltip on the right of the area
		$("body").append("<div id='tip'><img src='images/arrow_left.gif' style='float:left;' /><div class='tipinner ptr_left'><div class='tiph'>"+name+"</div>"+why+"</div></div>");//right side
		var xpos = parseInt(gic.left) + parseInt(coords[2]);
	} else {
		$("body").append("<div id='tip'><img src='images/arrow_right.gif' style='float:right;' /><div class='tipinner ptr_right'><div class='tiph'>"+name+"</div>"+why+"</div></div>");
		var xpos = parseInt(gic.left) + parseInt(coords[0]) - parseInt(width);
	}
	*/
	
		
	if(coords[2] < 400){
		//show tooltip on the right of the area
		$("body").append("<table cellspacing='0' border='0' cellpadding='0' id='tip' "+tableWidth+"><tbody><tr><td width='11'><img src='images/arrow_left.gif' /></td><td class='tipname' nowrap='nowrap'>"+name+"</td></tr>"+why+"</tbody></table>");//right side
		var xpos = parseInt(gic.left) + parseInt(coords[2]);
	} else {
		var style='';
		if (reason!='')
			style="style='margin:0 0 10px 10px;'";
		$("body").append("<table cellspacing='0' cellpadding='0' border='0' id='tip' "+tableWidth+"><tbody><tr><td class='tipname' nowrap='nowrap'>"+name+"</td><td width='11'><img src='images/arrow_right.gif' /></td></tr>"+why+"</tbody></table>");
		var xpos = parseInt(gic.left) + parseInt(coords[0]) - $('#tip').width();
	}
	
	$('#tip').css({left: xpos+"px",top: ypos+"px"});
	$('#tip').fadeIn('fast');
	
}