$(document).ready(function () {
	draw_canvas_shapes_from_map_coords();	
	refresh_page(6000);
});

function refresh_page(time) {
	//refresh page, and resize to fit window size
	setInterval(function() {
		var w = $(window).width()
		var h = $(window).height()
		w = w - w * 0.03
		h = h - 25 - h * 0.03
	
		$(".canvas_housing").load(location.assign("?w="+w+"&h="+h).href+" .canvas_housing>*","", function() {
			draw_canvas_shapes_from_map_coords();
		});
	}, time);
}


function draw_canvas_shapes_from_map_coords() {
	var colors = new Array("rgb(200,0,0)", "rgb(150,0,0)", "rgb(100,0,0)", "rgb(50,0,0)");
	var canvas = document.getElementById('default');  
	if (canvas != null && canvas.getContext){  
		var ctx = canvas.getContext('2d');  
	}
	var tiles = $('map area');
	for (var i = 0; i < tiles.length; i++) {
		var tile_coords = $(tiles[i]).attr('coords').split(',')
		ctx.beginPath();		
		for (var j = 0; j < tile_coords.length; j = j + 2) {
			ctx.lineTo(tile_coords[j],tile_coords[j+1]);
		}
	ctx.fillStyle = colors[i];
	ctx.fill();
	ctx.closePath();
	}
}