function initialize(id) {
	var canvas = document.getElementById('trees_canvas');
	if (!canvas || !canvas.getContext) {
		return;
	}
	var context = canvas.getContext('2d');

	var TREE_IMAGE_DIR = "/images/trees/";
	var treeimagefile = TREE_IMAGE_DIR+id+".png";
	var rootimagefile = TREE_IMAGE_DIR+id+"_root.png";

	var treeimg = new Image();
	treeimg.onload = function(){
		var rootimg = new Image();
		rootimg.onload = function(){
			drawImages(treeimg, rootimg, canvas, context);
		}
		rootimg.src = rootimagefile;
	}
	treeimg.src = treeimagefile;
}

function drawImages(treeimg, rootimg, canvas, context) {
	var CANVAS_WIDTH = 200;
	var CANVAS_HEIGHT = 110;
	var CANVAS_BORDER_Y = 63;
	var IMAGE_CENTER = 30;
	var VERTICAL_OFFSET = 5;

	var hOfTreeCanvas = CANVAS_BORDER_Y-VERTICAL_OFFSET;
	var hOfRootCanvas = CANVAS_HEIGHT - CANVAS_BORDER_Y - VERTICAL_OFFSET;

	var rOfTree = 1.0;
	var rOfRoot = 1.0;
	if (hOfTreeCanvas < treeimg.height) {
		rOfTree = hOfTreeCanvas / treeimg.height;
	}
	if (hOfRootCanvas < rootimg.height) {
		rOfRoot = hOfRootCanvas / rootimg.height;
	}
	var hOfTree = treeimg.height;
	var wOfTree = treeimg.width;
	var hOfRoot = rootimg.height;
	var wOfRoot = rootimg.width;
	if (rOfTree == rOfRoot) {
		if (rOfTree == 1.0) {
		} else {
			hOfTree *= rOfTree;
			hOfRoot *= rOfTree;
			wOfTree *= rOfTree;
			wOfRoot *= rOfTree;
		}
	} else if (rOfTree < rOfRoot) {
		hOfTree *= rOfTree;
		hOfRoot *= rOfTree;
		wOfTree *= rOfTree;
		wOfRoot *= rOfTree;
	} else {
		hOfTree *= rOfRoot;
		hOfRoot *= rOfRoot;
		wOfTree *= rOfRoot;
		wOfRoot *= rOfRoot;
	}

	var callback = function() {
		context.drawImage(treeimg, IMAGE_CENTER-wOfTree/2, CANVAS_BORDER_Y-hOfTree, wOfTree, hOfTree);
		context.drawImage(rootimg, IMAGE_CENTER-wOfRoot/2, CANVAS_BORDER_Y, wOfRoot, hOfRoot);
	}
	drawGrasses(context, rOfTree, CANVAS_WIDTH, CANVAS_BORDER_Y, callback);
}

function drawGrasses(context, rOfTree, CANVAS_WIDTH, CANVAS_BORDER_Y, callback) {
	var rightfile = "/images/grass_right_110.png";
	var leftfile = "/images/grass_left_110.png";
	var leftimg = new Image();
	leftimg.onload = function(){
		var rightimg = new Image();
		rightimg.onload = function(){
			//load
			var wOfRight = rightimg.width;
			var hOfRight = rightimg.height * rOfTree * 2;
			context.drawImage(rightimg, CANVAS_WIDTH-wOfRight, CANVAS_BORDER_Y-hOfRight+2, wOfRight, hOfRight);
			var wOfLeft = leftimg.width / 2;
			var hOfLeft = leftimg.height * rOfTree * 2;
			context.drawImage(leftimg, 0, CANVAS_BORDER_Y-hOfLeft+3, wOfLeft, hOfLeft);
			callback();
		}
		rightimg.src = rightfile;
	}
	leftimg.src = leftfile;
}