$(document).ready(function() {
	/* Hide the content box */
	$('.popup').hide();
	
	/* Start the tooltip function for the countys */
	tooltip();
	
	/* Position the countys by the attribute "rel". And create a nifty effect */
	$('#map-container').children('a.county').each(function() {
		var coords = $(this).attr('rel').split('-');
		$(this).css({left: coords[0] + 'px', top: coords[1] + 'px'})
		.hide()
		.fadeIn()
		.click(function(e){showPopup($(this).attr('id'), e)});
	});
	
	/* Hover gesture for the county images */
	$('a.county').hover(function() {
		$(this).fadeTo(300, 0.30);
	},
	function() {
		$(this).fadeTo(300, 10);
	});
});

/* For showing the popup box */
function showPopup(id, e) {
	/* Fade the current popup box out */
	$('.popup').fadeOut();
	
	xOffset = 40;
	yOffset = 20;
	
	/* Match the content box from the id that are passed inntoo this function */
	var contentId = '#' + id + '-content';
	
	/* Make the popup appear where the county are */
	$(contentId)
		.css("top",(e.pageY - xOffset) + "px")
		.css("left",(e.pageX + yOffset) + "px")
		.fadeIn();
	
	/* For closing the current content box */
	$('a.close').click(function() {
		$(this).parent().fadeOut();
	});
}

/* Tooltip for the countys */
this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.county").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.county").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};