jQuery.fn.extend({
   findPos : function() {
       obj = jQuery(this).get(0);
       var curleft = obj.offsetLeft || 0;
       var curtop = obj.offsetTop || 0;
       while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
       }
       return {x:curleft,y:curtop};
   }
});

$(document).ready(function(e) {
	var saveClick = {
		x : 0,
		y : 0
	}
	var pos = $("#carte").findPos();
	$(window).resize(function(){
		pos = $("#carte").findPos();
	});
	var flag = 0;
	$('area[title]').tooltip({
		track: true,
		delay: 0,
		top: -30,
		showURL: false
	});
	$('#Map area').each(function(){
		$(this).mouseover(function(){
			var id=$(this).attr('id');
			$('#region').attr('src', '_oubouger/static/images/mini_regions/mini_'+id+'.png');
		});
		$(this).mouseout(function(){
			$('#region').attr('src', '_oubouger/static/images/spacer.gif');
		});
		$(this).click(function(e){
			$('#big_region').attr('src', '_oubouger/static/images/regions/'+$(this).attr('id')+'.png');
			$('#big_region').css("left", e.pageX - pos.x);
			$('#big_region').css("top", e.pageY - pos.y);
			var name = $(this).attr('id');
			saveClick.x = e.pageX - pos.x;
			saveClick.y = e.pageY - pos.y;
			$("#big_region").animate(
				{
					width: 320+"px",
					height: 314+"px",
					left:0+"px",
					top:0+"px"
				}, 1000, function(){
				$(this).css("width", "320px");
				$(this).css("height", "314px");
				$(this).attr("usemap", "#Map_"+name);
				flag = 1;
			});
		});
	});
	$(document).click(function(e){
		if (flag == 1){
			$("#big_region").animate(
				{
					width: 0+"px",
					height: 0+"px",
					left: (saveClick.x)+"px",
					top: (saveClick.y)+"px"
				}, 1000, function(){
					$(this).css("width", "0px");
					$(this).css("height", "0px");
					$(this).attr("src", "_oubouger/static/images/spacer.gif");
					flag = 0;
			});
		}
	});
});