jQuery(document).ready(function(jQuery){  
/* CONFIG */		
// these 2 variables determine popup's gap from the cursor		
var	xGap = 10;
var	yGap = 10;
var	MainTitle ="";
	
var	maxTop = 0;
var	maxLeft =0;   
/* END CONFIG */	
jQuery("#theMainImage").mouseover(function(){
//  tooltip IMG title remove	 
	MainTitle = this.title;
	this.title =""; 
	});	
jQuery("#theMainImage").mouseout(function(){
//   tooltip IMG  title restaure	 
	this.title = MainTitle; 
	});	
		
jQuery("area,a").mouseover(function(e){	
	MainTitle = jQuery("#theMainImage").attr("title");
	jQuery("#theMainImage").attr("title",""); // for IE
	this.t = this.title;
 // llgbo conf
	var val = this.title.split("||",15);
	if (val[0].length<1) { return; }
	maxLeft =  jQuery(window).width();
	maxTop =  jQuery(window).height();
		//
	this.activate ='ok';
	this.title = "";
	this.tt = "<p id='title'>"+val[0]+"</p>";
	var pid = "dflt";
	if (this.className != "navThumb") // no picture for navthumb
		{for (var i=1; i<val.length; i++) { 
		if ( val[i].toLowerCase().indexOf("<img") == 0) 
			{ pid = "pict";}
			this.tt += "<p id="+pid+">"+ val[i]+"</p>";}
			}		
	jQuery("body").append("<div id='toolTip'>"+this.tt+"</div>"); 

	var MyTT = jQuery("#toolTip");
	if (this.id == "Rules")
			{ MyTT.css( {'border-color':'#c92'});}
	if (this.id == "RulesEx")
		{ MyTT.css( {'border-color':'#d3fed2'})
		jQuery("#toolTip #title").css({'color':'#d3fed2'});}

	updateXY(e);
	 MyTT.css("opacity", 0.25)
		.show; 
	 MyTT.fadeTo(1200,.95);
});			

jQuery("area,a").mouseout(function(e){	
	if (this.activate =='ok') // mouseout without mouseover we keep the right title
	{ this.title = this.t;	 
	jQuery("#toolTip")
	.fadeOut("slow")
	.remove();
	 jQuery("#theMainImage").attr("title",MainTitle); // for IE 
	 }
 });	
jQuery("area,a").mousemove(function(e){
	updateXY(e);
});	
var updateXY = function(e) {
	var xLeft,yCord,xCord;
	var MyTT = jQuery("#toolTip");
	var wT = MyTT.width() + 6 /* border */+ xGap;
	var hT = MyTT.height() + 6 /* border */+ yGap; 
	
	if ( e.pageX < (maxLeft/2) )  // piwigo left 
		{xCord = wT *-1;}
		else {
	 xCord =( maxLeft < (e.pageX + wT + xGap)) ?	xCord = wT * -1 : xCord = xGap;}	
	 xLeft = (e.pageX + xCord < 3 ) ? xLeft = e.pageX + xGap : xLeft = e.pageX + xCord;
	 yCord =( maxTop < (e.pageY + hT )) ?	yCord = hT * -1 : yCord = yGap;
	MyTT
		.css("top",(e.pageY + yCord) + "px")
		.css("left",(xLeft) + "px");
	}
});