$(document).ready(function(){
	
	//this function hides each <div class="counties-container"> and is called onload and when the user selects a region
	function hideall(){ 
		$('.counties-container').css("display","none");
	}

	//ONLOAD - these several lines are used to help with graceful degradation (when the user doesn't have JavaScript enabled)
	hideall(); //initiate the hideall function
	$('#st-c').css("display","block"); //show the start up div with the explanation of how to start using the form
	$('.select').css("display","block"); //shows the select all/deselect all links (that only work with JavaScript enabled)
	$('#regions').css("display","block"); //show the list of selectable regions

		


	//HOVER EFFECTS
	$('area, #regions li').hover( //hover listener
	
		function() { //if the user hovers over an <area> element or a <li> in <ul class="regions">...
			var area = ($(this).attr("class")); //get the class of the element the mouse is hovering over
			$('#map').attr("src","/images/dco-"+ area +"-mo.gif");  //change the image of the <area> to the mouseover version
			$('.'+area).css("background-color","#e5e5e5") //change the background color of the corresponding area in the list
		;},
		
		function() { //if the mouse leaves an <area> element or a <li> in <ul class="regions">...
			var area = ($(this).attr("class")); //get the class of the element the mouse is leaving
			$('#map').attr("src","/images/dco.gif"); //change the image of the <area> back to default
			$('.'+area).css("background-color","#f3f3f3"); //change the background color of the corresponding area in the list back to default
			}
	)


	//SHOW/HIDE AREA PANELS
	$('area, #regions li').click(  //click listener
		function() {
			var area = ($(this).attr("class")); //get the class of the element that has been clicked
			hideall(); //initate the hideall function (hide all area panels)
			$('#' + area).css("display","block"); //show the area panel for the area that has been clicked	
		}
	)
	
	
	

});