$(document).ready(function() {

	//// check jquery
	//alert('fire');
	
	//// the pop up
	$('.map').popupWindow({ 
		height: 600,
		width: 1000,
		centerBrowser: 1
	});
	
	//// when clicking on an area
	$('area').hover(function() {
		var b = $(this).attr('href');
		//alert(b);
		
		// change the image
		changeTo(b);
		return false;
	});
	
	//// when clicking on an area
	/*$('area').bind("click", function() {
		var b = $(this).attr('href');
		//alert(b);
		
		//// take the targeted building and display the box
		$('#list').hide();
		$('.b').hide();
		$('#' + b).show();
		
		// change the image
		changeTo(b);
		return false;
	});*/
	
	$('area').hover(function() {
		var b = $(this).attr('href');
		//alert(b);
		
		//// take the targeted building and display the box
		$('#list').hide();
		$('.b').hide();
		$('#' + b).show();
		
		// change the image
		changeTo(b);
		return false;
	});
	
	//// protect from clicking on area
	$('area').bind("click", function() {
		return false;
	});
	
	//// when hovering on list
	$('#list a').hover(function() {
		var b = $(this).attr('href');
		//alert(b);
				
		// change the image
		changeTo(b);
		return false;
	});
	
	//// when clicking on list
	$('#list a').bind("click", function() {
		var b = $(this).attr('href');
		//alert(b);
		
		//// take the targeted building and display the box
		$('#list').hide();
		$('.b').hide();
		$('#' + b).show();
		
		// change the image
		changeTo(b);
		return false;
	});
	
	//// when clicking on the close button
	$('.close').bind('click', function() {
		$('#list').show();
		$('.b').hide();
		
		// change the image
		changeTo('map');
		return false;
	});
	
	//// change the map building to pink
	function changeTo(src) {
		var img = 'interactive-map/map/' + src + '.png';
		$('#map').attr('src', img);
	}

});