var oval = {
	"draw" : function(oval, context) {
		p0 = oval.magnets[0];
		p1 = oval.magnets[1];
		p2 = oval.magnets[2];
		p3 = oval.magnets[3];
		p4 = oval.magnets[4];
		var radius = (p4.x-p1.x)/2;
		context.beginPath();
		//context.arc(p1.x+radius, p1.y+radius, radius, 0, 2*Math.PI, false);
		context.moveTo(p1.x+radius,p1.y);
		context.quadraticCurveTo(p2.x,p2.y,p2.x,p1.y+radius);
		context.quadraticCurveTo(p4.x,p4.y,p1.x+radius,p4.y);
		context.quadraticCurveTo(p3.x,p3.y,p1.x,p1.y+radius);
		context.quadraticCurveTo(p1.x,p1.y,p1.x+radius,p1.y);
		context.closePath();
		context.fillStyle=oval.color;
		context.fill();
	},

	"containsPoint" : function(oval, point) {
		p0 = oval.magnets[0];
		p1 = oval.magnets[1];
		p2 = oval.magnets[2];
		p3 = oval.magnets[3];
		p4 = oval.magnets[4];
		var radius = (p4.x-p1.x)/2.0;
		var xdist = point.x - (p1.x+radius);
		var ydist = point.y - (p1.y+radius);
		var dist = Math.sqrt(xdist*xdist+ydist*ydist);
		if (dist < radius) {
			return true;
		}
		return false;
	},

	"drawSelected" : rectangle.drawSelected,
	"moveMagnet" : rectangle.moveMagnet,

	"showEditorPanel" : function(oval, panel) {
		var update = function() {
			oval.color = colorInput.value;
			redraw();
		};

		var colorLabel = document.createElement("span");
		colorLabel.appendChild(document.createTextNode("color: "));
		var colorInput = document.createElement("input");
		colorInput.value = oval.color;
		colorInput.onchange = update;
		panel.appendChild(colorLabel);
		panel.appendChild(colorInput);
	},

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