$(document).ready(function() {

	var selected = null;
	var previouslySelected = null;

	// when the drop down is changed
	$('#Area').change(
		function()
		{
			previouslySelected = savePreviouslySelected = selected;	
			selected = saveSelected =  $('#Area option:selected').val();
			update();
		}
	);
	
	// when an imagemap area is clicked
	$('area').click(
		function()
		{
			previouslySelected = savePreviouslySelected = selected;	
			selected = saveSelected = $(this).attr('id');
			update();
		}
	);
	
	function replaceCharacters(str) {
		var rtn = str.split("&").join("");
		rtn = rtn.split("  ").join("-");
		rtn = rtn.split(" ").join("-");
		rtn = rtn.toLowerCase();

		return rtn;
	}
	
	function update()
	{ 
		//var rpl = selected; //save original state
		//var prpl = previouslySelected; //save original state
		if(previouslySelected!=null)
		{
			
			//alert(replaceCharacters(previouslySelected));
			// remove previously selected overlay image
			$('#region-' + replaceCharacters(previouslySelected)).css('visibility', 'hidden');	
		}
		
		// show the region that is selected
		$('#region-' + replaceCharacters(selected)).css('visibility', 'visible');
		//alert(replaceCharacters(selected));
		//alert(saveSelected + ' - ' + savePreviouslySelected);
		// change drop down
		var back_reference = $('#Area option#' + selected).val();
		$('#Area').val(back_reference);
	}
	
	
	
});