$(document).ready(function(){

	var $map = $('#map');
	
	var $north = $('#north');
	var $northHotspots = $('#map_north area');
	var northXoffset = 165;
	
	$northHotspots.each(function(){
		// tooltips are using a modified version of the tipsy plugin.
		// values used by plugin should be added as 'rel' attribute on image map areas.
		// values to pass in are { options: gravity, x location for tip, y location for tip, image container id }
		$(this).tipsy({ fade: true, options: $(this).attr('rel')+',#north' });
	});
	
	$northHotspots.each(function(index){
		$(this).hover(
			function(){
				var offset = northXoffset*(index+1);
				$north.css({ backgroundPosition: '-'+offset+'px 0' });
			},
			function(){
				$north.css({ backgroundPosition: '0 0' });
			}
		);
	});
	
	var $south = $('#south');
	var $southHotspots = $('#map_south area');
	var southXoffset = 200;
	
	$southHotspots.each(function(){
		$(this).tipsy({ fade: true, options: $(this).attr('rel')+',#south' });
	});
	
	$southHotspots.each(function(index){
		$(this).hover(
			function(){
				var offset = southXoffset*(index+1);
				$south.css({ backgroundPosition: '-'+offset+'px 0' });
			},
			function(){
				$south.css({ backgroundPosition: '0 0' });
			}
		);
	});
	
});