$(function() {
//	console.log("entered!")
	var map = $('.map', this);
	var popup = $('.popup', this);
	var popup_text = $('.popup > h2');
	var yoffset = -70;
	var xoffset = -50;

	show_popup = function(area) {
		var itop = 0, ileft = 0, id = $(area).attr('id'), str_class = $(area).attr('class');
		
		// calculate position of the popup based on the area being hovered on.

		// get the first coordinates of the area
		var coords = area.getAttribute('coords').split(',');
		ileft = parseFloat(coords[0]) + xoffset;
		itop = parseFloat(coords[1]) + yoffset;
	
		popup_text.text(area.getAttribute('id'));
		//popup.css({ display:'block',top:itop,left:ileft,opacity:1})
		popup.removeClass();
		popup.addClass(str_class).animate({opacity:1});
	}
	
	hide_popup = function(){
		//popup.css({ display:'none', top:0, left:0, opacity:1 })		
		popup.removeClass();
		popup.addClass('popup');
	}
	
	$('area').each( function() {
		$(this).mouseover( function() {
			show_popup(this);
		}).mouseout( function () {
			hide_popup();
		});
	});
//	console.log("end!")
	
}); // end opening function