image = {
	"draw" : function(image, context) {
		if (image.magnets && image.data.complete) {
			var p0 = image.magnets[0];
			var p1 = image.magnets[1];
			var p2 = image.magnets[2];
			var p3 = image.magnets[3];
			var p4 = image.magnets[4];
			var x = p1.x;
			var y = p1.y;
			var width = p4.x - p1.x;
			var height = p4.y - p1.y;
			context.drawImage(image.data, x, y, width, height);
		}
	},
	"containsPoint" : rectangle.containsPoint,
	"moveMagnet" : rectangle.moveMagnet,
	"drawSelected" : rectangle.drawSelected,

	"showEditorPanel" : function(image, panel) {
		var update = function() {
			image.source = sourceInput.value;
			updateImage(image);
		};

		var sourceLabel = document.createElement("span");
		sourceLabel.appendChild(document.createTextNode("source: "));
		var sourceInput = document.createElement("input");
		sourceInput.value = image.source;
		sourceInput.onchange = update;
		panel.appendChild(sourceLabel);
		panel.appendChild(sourceInput);
	},

	"toSource" : function(image) {
		var s = "  updateImage({\n    type:\"image\",\n    source:\"";
		s += image.source;
		s += "\",\n    magnets:"+magnetListToSource(image.magnets)+"\n  })";
		return s;
	}
}

function loadImage(image, x, y) {
	image.data = new Image();
	image.data.onload = function() {
		var width = image.data.width;
		var height = image.data.height;
		var p0 = makeMagnet(x+width/2, y+height/2);
		var p1 = makeMagnet(x,y);
		var p2 = makeMagnet(x+width,y);
		var p3 = makeMagnet(x,y+height);
		var p4 = makeMagnet(x+width,y+height);	
		image.magnets = [p0, p1, p2, p3, p4];
		redraw();
	}
	image.data.src = image.source;
  return image;
}

function updateImage(image) {
	var p1 = image.magnets[1];
	return loadImage(image, p1.x, p1.y);
}