$(document).ready(function(){
	initialize_31032011();
	$('#content_31032011 > *').not('#overblik').hide();
});

var myCircle20;
var myCircle30;

function initialize_31032011() {
    var latlng = new google.maps.LatLng(37.42450506407532, 140.68270225524907);
    var myOptions = {
      zoom: 9,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
        
    var map = new google.maps.Map(document.getElementById("map_canvas_31032011"), myOptions);
    
    var myCircleCenter = new google.maps.LatLng(37.422187491265866, 141.03392143249516);
    var myCircle20 = new google.maps.Circle({
    	center: myCircleCenter,
    	radius: 20000,
    	map: map,
    	fillColor: '#dd0000',
    	fillOpacity: 0.1,
    	strokeWeight: 1,
    	zIndex : 2
    });
    new google.maps.event.addListener(myCircle20, 'click', function() {
    	showThisContent(20, this);
    });
    
    var myCircle30 = new google.maps.Circle({
    	center: myCircleCenter,
    	radius: 30000,
    	map: map,
    	fillColor: '#dd0000',
    	fillOpacity: 0.1,
    	strokeWeight: 1,
    	zIndex: 1
    });
    
    new google.maps.event.addListener(myCircle30, 'click', function() {
    	showThisContent(30, this);
    });
    
    new google.maps.event.addDomListener(document.getElementById('overblikMenu'), 'click', function(){
    	showThatContent('overblik');
    });
    
    new google.maps.event.addDomListener(document.getElementById('20kmMenu'), 'click', function(){
    	showThatContent('20');
    });
    
    new google.maps.event.addDomListener(document.getElementById('30kmMenu'), 'click', function(){
    	showThatContent('30');
    });
    
    function showThisContent(e, i) {
    	selector = '#'+e;
    	$('#content_31032011 > *').hide();
    	$(selector).show();
    	myCircle30.setOptions({strokeWeight: 1});
    	myCircle20.setOptions({strokeWeight: 1});
    	i.setOptions({strokeWeight: 2});
//highlight the proper menu items
    	$('#menuList > li').removeClass('highlight');
    	$(selector + 'kmMenu').addClass('highlight');
    }
    
    function showThatContent(e) {
    	selector = '#'+e;
    	$('#content_31032011 > *').hide();
    	$(selector).show();
    	myCircle30.setOptions({strokeWeight: 1});
    	myCircle20.setOptions({strokeWeight: 1});
    		if (e=='20') {
    			myCircle20.setOptions({strokeWeight: 2});
    		} else if (e=='30') {
    			myCircle30.setOptions({strokeWeight: 2});
    			} 
    			
    		
    	// animate the list
    	$('#menuList > li').removeClass('highlight');
    	if (e=='overblik') {
    		$('#overblikMenu').addClass('highlight');
    	} else {
    		$('#'+ e + 'kmMenu').addClass('highlight');
    	}
    
    }
}