diff --git a/canvas.js b/canvas.js
index f07444ba..3cb0b919 100644
--- a/canvas.js
+++ b/canvas.js
@@ -1,495 +1,445 @@
 var canvas = null;
 
 function svgCanvasInit(event) {
-    canvas = new svgCanvas(event.target.ownerDocument);
-    top.svgCanvas = canvas;
+	canvas = new SvgCanvas(event.target.ownerDocument);
+	canvas.setup(event);
+	top.SvgCanvas = canvas;
 }
 
-function svgCanvas(doc) {
-
-// functions
-
-    this.assignAttributes = function(node, attrs) {
-        for (i in attrs) {
-            node.setAttributeNS(null, i, attrs[i]);
-        }
-    }
-
-this.create_svg_element_by_json = function(data) {
-    var shape = this.svgdoc.createElementNS(this.svgns, data.element);
-    this.assignAttributes(shape, data.Attr);
-    this.svgdoc.documentElement.appendChild(shape);
-}
-
-this.svgToString = function(elem , indent)
-{
-    var out = "" ;
-   if (elem)
-   {
-      var attrs = elem.attributes;
-      var attr;
-      var i;
-      var childs = elem.childNodes;
-
-      // don't include scripts in output svg
-      if (elem.nodeName == "script") return "";
-
-      for (i=0; i<indent; i++) out += "  ";
-      out += "<" + elem.nodeName;
-      for (i=attrs.length-1; i>=0; i--)
-      {
-         attr = attrs.item(i);
-         // don't include events in output svg
-         if (attr.nodeName == "onload" ||
-             attr.nodeName == "onmousedown" ||
-             attr.nodeName == "onmousemove" ||
-             attr.nodeName == "onmouseup") continue;
-         out += " " + attr.nodeName + "=\"" + attr.nodeValue+ "\"";
-      }
-
-      if (elem.hasChildNodes())
-      {
-         out += ">\n";
-         indent++;
-         for (i=0; i<childs.length; i++)
-         {
-            if (childs.item(i).nodeType == 1) // element node
-               out = out + this.svgToString(childs.item(i) ,indent);
-            else if (childs.item(i).nodeType == 3) // text node
-            {
-               for (j=0; j<indent; j++) out += "  ";
-               out += childs.item(i).nodeValue + "\n";
-            }
-         }
-         indent--;
-         for (i=0; i<indent; i++) out += "  ";
-         out += "</" + elem.nodeName + ">\n";
-      }
-      else
-      {
-         out += " />\n";
-      }
-
-   }
-   return out;
-}
-
-
-
-// constructor
-    this.svgdoc = doc;
-    this.svgroot = this.svgdoc.documentElement;
-    this.svgns = "http://www.w3.org/2000/svg";
-    this.d_attr = "" ;
-    this.signature_started = 0 ;
-    this.obj_num = 1 ;
-    this.rect_x = null ;
-    this.rect_y = null ;
-    this.current_draw_element = "path" ;
-    this.current_draw_element_fill = "none" ;
-    this.current_draw_element_stroke_width = "1px" ;
-    this.current_draw_element_stroke = "black" ;
-    this.freehand_min_x = null ;
-    this.freehand_max_x = null ;
-    this.freehand_min_y = null ;
-    this.freehand_max_y = null ;
-
-    this.assignAttributes(this.svgroot, {
-        "onmouseup":   "canvas.mouseUp(evt)",
-        "onmousedown": "canvas.mouseDown(evt)",
-        "onmousemove": "canvas.mouseMove(evt)"
-    });
-
-    this.serialize = function(handler) {
-        var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
-        str = str + this.svgToString(this.svgroot, 0);
-        handler(str);
-    }
-
-this.clear = function() {
-    var Nodes = SVGRoot.childNodes ;
-    var Length = SVGRoot.childNodes.length ;
-    var i = 0 ;
-    for(var Rep=0; Rep< Length; Rep++){
-        if(Nodes[i].nodeType == 1){
-            Nodes[i].parentNode.removeChild(Nodes[i]);
-        }
-        else{
-            i++;
-        }
-    }
-}
-
-this.setMode = function(name) {
-    this.current_draw_element = name;
-}
-
-
-this.setStrokeColor = function(color) {
-    this.current_draw_element_stroke = color;
-}
-
-this.setFillColor = function(color) {
-    this.current_draw_element_fill = color;
-}
-
-this.setStrokeColor = function(val) {
-    this.current_draw_element_stroke_width = val;
-}
-
-this.mouseUp = function(evt)
+function SvgCanvas(doc)
 {
 
-   if (this.signature_started == 1 )
-   {
-    this.signature_started = 0 ;
+// private members
 
-    switch (this.current_draw_element)
-    {
-    case "select":
-        var element = this.svgdoc.getElementById("rect_" + this.obj_num);
-        element.parentNode.removeChild(element);
-        break;
-    case "path":
-        this.d_attr = 0 ;
-        var element = this.svgdoc.getElementById("path_" + this.obj_num);
-        element.setAttribute("stroke-opacity", 1.0);
-        this.obj_num++;
-        break;
-    case "line":
-        var element = this.svgdoc.getElementById("line_" + this.obj_num);
-        element.setAttribute("stroke-opacity", 1.0);
-        this.obj_num++;
-        break;
-    case "square":
-    case "rect":
-        var element = this.svgdoc.getElementById("rect_" + this.obj_num);
-        element.setAttribute("fill-opacity", 1.0);
-        element.setAttribute("stroke-opacity", 1.0);
-        this.obj_num++;
-        break;
-    case "circle":
-    case "ellipse":
-        var element = this.svgdoc.getElementById("ellipse_" + this.obj_num);
-        element.setAttribute("fill-opacity", 1.0);
-        element.setAttribute("stroke-opacity", 1.0);
-        this.obj_num++;
-        break;
-    case "fhellipse":
-        this.d_attr = 0 ;
+	var svgdoc = doc;
+	var svgroot = svgdoc.documentElement;
+	var svgns = "http://www.w3.org/2000/svg";
+	var d_attr = "";
+	var signature_started = 0;
+	var obj_num = 1;
+	var rect_x = null;
+	var rect_y = null;
+	var current_draw_element = "path";
+	var current_draw_element_fill = "none";
+	var current_draw_element_stroke_width = "1px";
+	var current_draw_element_stroke = "black";
+	var freehand_min_x = null;
+	var freehand_max_x = null;
+	var freehand_min_y = null;
+	var freehand_max_y = null;
 
-        var element = this.svgdoc.getElementById("path_" + this.obj_num);
-        element.parentNode.removeChild(element);
+// private functions
 
-        this.create_svg_element_by_json({
-            "element": "ellipse",
-            "Attr": {
-                "cx": (this.freehand_min_x + this.freehand_max_x ) / 2,
-                "cy": (this.freehand_min_y + this.freehand_max_y ) / 2,
-                "rx": (this.freehand_max_x - this.freehand_min_x ) / 2 + "px",
-                "ry": (this.freehand_max_y - this.freehand_min_y ) / 2 + "px",
-                "id": "ellipse_" + this.obj_num,
-                "fill": this.current_draw_element_fill,
-                "stroke": this.current_draw_element_stroke,
-                "stroke-width": this.current_draw_element_stroke_width
-                }
-        });
-        this.obj_num++;
-        break;
-    case "fhrect":
-        this.d_attr = 0 ;
+	var assignAttributes = function(node, attrs) {
+		for (i in attrs) {
+			node.setAttributeNS(null, i, attrs[i]);
+		}
+	}
 
-        var element = this.svgdoc.getElementById("path_" + this.obj_num);
-        element.parentNode.removeChild(element);
+	var createSvgElementFromJson = function(data) {
+		var shape = svgdoc.createElementNS(svgns, data.element);
+		assignAttributes(shape, data.attr);
+		svgdoc.documentElement.appendChild(shape);
+	}
 
-        this.create_svg_element_by_json({
-            "element": "rect",
-            "Attr": {
-                "x": this.freehand_min_x,
-                "y": this.freehand_min_y,
-                "width": (this.freehand_max_x - this.freehand_min_x ) + "px",
-                "height": (this.freehand_max_y - this.freehand_min_y ) + "px",
-                "id": "rect_" + this.obj_num,
-                "fill": this.current_draw_element_fill,
-                "stroke": this.current_draw_element_stroke,
-                "stroke-width": this.current_draw_element_stroke_width
-                }
-        });
-        this.obj_num = obj_num + 1 ;
-        break;
-    }
+	var svgToString = function(elem, indent) {
+		var out = "";
+		if (elem) {
+			var attrs = elem.attributes;
+			var attr;
+			var i;
+			var childs = elem.childNodes;
+			// don't include scripts in output svg
+			if (elem.nodeName == "script") return "";
+			for (i=0; i<indent; i++) out += "  ";
+			out += "<" + elem.nodeName;
+			for (i=attrs.length-1; i>=0; i--) {
+				attr = attrs.item(i);
+				// don't include events in output svg
+				if (attr.nodeName == "onload" ||
+					attr.nodeName == "onmousedown" ||
+					attr.nodeName == "onmousemove" ||
+					attr.nodeName == "onmouseup") continue;
+				out += " " + attr.nodeName + "=\"" + attr.nodeValue+ "\"";
+			}
+			if (elem.hasChildNodes()) {
+				out += ">\n";
+				indent++;
+				for (i=0; i<childs.length; i++)
+				{
+					if (childs.item(i).nodeType == 1) // element node
+					out = out + svgToString(childs.item(i), indent);
+					else if (childs.item(i).nodeType == 3) // text node
+					{
+					for (j=0; j<indent; j++) out += "  ";
+					out += childs.item(i).nodeValue + "\n";
+					}
+				}
+				indent--;
+				for (i=0; i<indent; i++) out += "  ";
+				out += "</" + elem.nodeName + ">\n";
+			} else {
+				out += " />\n";
+			}
+		}
+		return out;
+	}
 
-    }
-
-}
-
-
-this.mouseDown = function(evt)
-{
-
-    var x = evt.pageX;
-    var y = evt.pageY;
-
-    switch (this.current_draw_element)
-    {
-    case "select":
-        this.signature_started = 1 ;
-        this.rect_x = x ;
-        this.rect_y = y ;
-        this.create_svg_element_by_json({
-            "element": "rect",
-            "Attr": {
-                "x": x,
-                "y": y,
-                "width": "1px",
-                "height": "1px",
-                "id": "rect_" + this.obj_num,
-                "fill": 'none',
-                "stroke": 'black',
-                "stroke-width": '1px',
-                "stroke-dasharray": "2,2"
-                }
-        });
-        break;
-    case "fhellipse":
-        this.d_attr = "M" + x + " " + y + " ";
-        this.signature_started = 1 ;
-
-        this.create_svg_element_by_json({
-            "element": "path",
-            "Attr": {
-                "d": this.d_attr,
-                "id": "path_" + this.obj_num,
-                "fill": "none",
-                "stroke": this.current_draw_element_stroke,
-                "stroke-width": this.current_draw_element_stroke_width,
-                "stroke-opacity": 0.5
-                }
-
-        });
-
-        this.freehand_min_x = x ;
-        this.freehand_max_x = x ;
-        this.freehand_min_y = y ;
-        this.freehand_max_y = y ;
-
-    break;
-    case "fhrect":
-        this.d_attr = "M" + x + " " + y + " ";
-        this.signature_started = 1 ;
-
-        this.create_svg_element_by_json({
-            "element": "path",
-            "Attr": {
-                "d": this.d_attr,
-                "id": "path_" + this.obj_num,
-                "fill": "none",
-                "stroke": this.current_draw_element_stroke,
-                "stroke-width": this.current_draw_element_stroke_width,
-                "stroke-opacity": 0.5
-                }
-
-        });
-
-        this.freehand_min_x = x ;
-        this.freehand_max_x = x ;
-        this.freehand_min_y = y ;
-        this.freehand_max_y = y ;
-
-    break;
-    case "path":
-        this.d_attr = "M" + x + " " + y + " ";
-        this.signature_started = 1 ;
-
-        this.create_svg_element_by_json({
-            "element": "path",
-            "Attr": {
-                "d": this.d_attr,
-                "id": "path_" + this.obj_num,
-                "fill": "none",
-                "stroke": this.current_draw_element_stroke,
-                "stroke-width": this.current_draw_element_stroke_width,
-                "stroke-opacity": 0.5
-                }
-
-        });
-
-    break;
-    case "square":
-    case "rect":
-        this.signature_started = 1 ;
-        this.rect_x = x ;
-        this.rect_y = y ;
-        create_svg_element_by_json({
-            "element": "rect",
-            "Attr": {
-                "x": x,
-                "y": y,
-                "width": "1px",
-                "height": "1px",
-                "id": "rect_" + this.obj_num,
-                "fill": this.current_draw_element_fill,
-                "stroke": this.current_draw_element_stroke,
-                "stroke-width": this.current_draw_element_stroke_width,
-                "fill-opacity": 0.5,
-                "stroke-opacity": 0.5
-                }
-
-        });
-        break;
-    case "line":
-        this.signature_started = 1 ;
-
-        this.create_svg_element_by_json({
-            "element": "line",
-            "Attr":    {
-                "x1": this.x,
-                "y1": this.y,
-                "x2": this.x + 1 + "px",
-                "y2": this.y + 1 + "px",
-                "id": "line_" + this.obj_num,
-                "stroke": this.current_draw_element_stroke,
-                "stroke-width": this.current_draw_element_stroke_width,
-                "stroke-opacity": 0.5
-                }
-
-        });
-        break;
-    case "circle":
-    case "ellipse":
-        this.signature_started = 1 ;
-        this.create_svg_element_by_json({
-            "element": "ellipse",
-            "Attr": {
-                "cx": x,
-                "cy": y,
-                "rx": 1 + "px",
-                "ry": 1 + "px",
-                "id": "ellipse_" + this.obj_num,
-                "fill": this.current_draw_element_fill,
-                "stroke": this.current_draw_element_stroke,
-                "stroke-width": this.current_draw_element_stroke_width,
-                "fill-opacity": 0.5,
-                "stroke-opacity": 0.5
-                }
-        });
-    break;
-    case "delete":
-        var T=evt.target
-        if(this.svgroot == evt.target ) return ;
-        T.parentNode.removeChild(T);
-    break;
-    }
-
-
-}
-
-this.mouseMove = function(evt)
-{
-    if (this.signature_started == 1 )
-    {
-    var x = evt.pageX;
-    var y = evt.pageY;
-
-
-    switch (this.current_draw_element)
-    {
-    case "path":
-
-        this.d_attr = this.d_attr + "L" + x + " " + y + " ";
-        var shape = this.svgdoc.getElementById("path_" + this.obj_num);
-        shape.setAttributeNS(null, "d", this.d_attr);
-        break;
-
-    case "line":
-        var shape = this.svgdoc.getElementById("line_" + this.obj_num);
-        shape.setAttributeNS(null, "x2", x);
-        shape.setAttributeNS(null, "y2", y);
-    break;
-
-    case "square":
-
-        var shape = this.svgdoc.getElementById("rect_" + this.obj_num);
-        var size = Math.max( Math.abs(x-this.rect_x) , Math.abs(y-this.rect_y) );
-
-        shape.setAttributeNS(null, "width", this.size);
-        shape.setAttributeNS(null, "height", this.size);
-        if(rect_x < x ){
-            shape.setAttributeNS(null, "x", this.rect_x);
-        }else{
-            shape.setAttributeNS(null, "x", this.rect_x - size);
-        }
-        if(rect_y < y ){
-            shape.setAttributeNS(null, "y", this.rect_y);
-        }else{
-            shape.setAttributeNS(null, "y", this.rect_y - size);
-        }
-
-    break;
-    case "select":
-    case "rect":
-
-        var shape = this.svgdoc.getElementById("rect_" + this.obj_num);
-
-        if(rect_x < x ){
-            shape.setAttributeNS(null, "x", this.rect_x);
-            shape.setAttributeNS(null, "width", x - this.rect_x);
-        }else{
-            shape.setAttributeNS(null, "x", x);
-            shape.setAttributeNS(null, "width", this.rect_x - x);
-        }
-        if(rect_y < y ){
-            shape.setAttributeNS(null, "y", this.rect_y);
-            shape.setAttributeNS(null, "height", y - this.rect_y);
-        }else{
-            shape.setAttributeNS(null, "y", y);
-            shape.setAttributeNS(null, "height", this.rect_y - y);
-        }
-
-    break;
-    case "circle":
-        var shape = this.svgdoc.getElementById("ellipse_" + this.obj_num);
-        var cx = shape.getAttributeNS(null, "cx");
-        var cy = shape.getAttributeNS(null, "cy");
-        var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
-
-        shape.setAttributeNS(null, "rx", rad);
-        shape.setAttributeNS(null, "ry", rad);
-    break;
-    case "ellipse":
-        var shape = this.svgdoc.getElementById("ellipse_" + this.obj_num);
-        var cx = shape.getAttributeNS(null, "cx");
-        var cy = shape.getAttributeNS(null, "cy");
-
-        shape.setAttributeNS(null, "rx", Math.abs(x-cx));
-        shape.setAttributeNS(null, "ry", Math.abs(y-cy));
-    break;
-
-    case "fhellipse":
-        this.d_attr = this.d_attr + "L" + x + " " + y + " ";
-        var shape = this.svgdoc.getElementById("path_" + this.obj_num);
-        shape.setAttributeNS(null, "d", this.d_attr);
-
-        this.freehand_min_x = Math.min(x , this.freehand_min_x ) ;
-        this.freehand_max_x = Math.max(x , this.freehand_max_x ) ;
-        this.freehand_min_y = Math.min(y , this.freehand_min_y ) ;
-        this.freehand_max_y = Math.max(y , this.freehand_max_y ) ;
-    break;
-
-    case "fhrect":
-        this.d_attr = this.d_attr + "L" + x + " " + y + " ";
-        var shape = this.svgdoc.getElementById("path_" + this.obj_num);
-        shape.setAttributeNS(null, "d", this.d_attr);
-
-        this.freehand_min_x = Math.min(x , this.freehand_min_x ) ;
-        this.freehand_max_x = Math.max(x , this.freehand_max_x ) ;
-        this.freehand_min_y = Math.min(y , this.freehand_min_y ) ;
-        this.freehand_max_y = Math.max(y , this.freehand_max_y ) ;
-    break;
-
-    }
-
-    }
-}
+// private events
+
+	this.mouseDown = function(evt)
+	{
+		var x = evt.pageX;
+		var y = evt.pageY;
+		switch (current_draw_element)
+		{
+		case "select":
+			signature_started = 1;
+			rect_x = x;
+			rect_y = y;
+			createSvgElementFromJson({
+				"element": "rect",
+				"attr": {
+					"x": x,
+					"y": y,
+					"width": "1px",
+					"height": "1px",
+					"id": "rect_" + obj_num,
+					"fill": 'none',
+					"stroke": 'black',
+					"stroke-width": '1px',
+					"stroke-dasharray": "2,2"
+				}
+			});
+			break;
+		case "fhellipse":
+			d_attr = "M" + x + " " + y + " ";
+			signature_started = 1;
+			createSvgElementFromJson({
+				"element": "path",
+				"attr": {
+					"d": d_attr,
+					"id": "path_" + obj_num,
+					"fill": "none",
+					"stroke": current_draw_element_stroke,
+					"stroke-width": current_draw_element_stroke_width,
+					"stroke-opacity": 0.5
+				}
+			});
+			freehand_min_x = x;
+			freehand_max_x = x;
+			freehand_min_y = y;
+			freehand_max_y = y;
+		break;
+		case "fhrect":
+			d_attr = "M" + x + " " + y + " ";
+			signature_started = 1;
+			createSvgElementFromJson({
+				"element": "path",
+				"attr": {
+					"d": d_attr,
+					"id": "path_" + obj_num,
+					"fill": "none",
+					"stroke": current_draw_element_stroke,
+					"stroke-width": current_draw_element_stroke_width,
+					"stroke-opacity": 0.5
+				}
+			});
+			freehand_min_x = x;
+			freehand_max_x = x;
+			freehand_min_y = y;
+			freehand_max_y = y;
+		break;
+		case "path":
+			d_attr = "M" + x + " " + y + " ";
+			signature_started = 1;
+			createSvgElementFromJson({
+				"element": "path",
+				"attr": {
+					"d": d_attr,
+					"id": "path_" + obj_num,
+					"fill": "none",
+					"stroke": current_draw_element_stroke,
+					"stroke-width": current_draw_element_stroke_width,
+					"stroke-opacity": 0.5
+				}
+			});
+		break;
+		case "square":
+		case "rect":
+			signature_started = 1;
+			rect_x = x;
+			rect_y = y;
+			createSvgElementFromJson({
+				"element": "rect",
+				"attr": {
+					"x": x,
+					"y": y,
+					"width": "1px",
+					"height": "1px",
+					"id": "rect_" + obj_num,
+					"fill": current_draw_element_fill,
+					"stroke": current_draw_element_stroke,
+					"stroke-width": current_draw_element_stroke_width,
+					"fill-opacity": 0.5,
+					"stroke-opacity": 0.5
+				}
+			});
+			break;
+		case "line":
+			signature_started = 1;
+			createSvgElementFromJson({
+				"element": "line",
+				"attr": {
+					"x1": x,
+					"y1": y,
+					"x2": x + 1 + "px",
+					"y2": y + 1 + "px",
+					"id": "line_" + obj_num,
+					"stroke": current_draw_element_stroke,
+					"stroke-width": current_draw_element_stroke_width,
+					"stroke-opacity": 0.5
+				}
+			});
+			break;
+		case "circle":
+		case "ellipse":
+			signature_started = 1;
+			createSvgElementFromJson({
+				"element": "ellipse",
+				"attr": {
+					"cx": x,
+					"cy": y,
+					"rx": 1 + "px",
+					"ry": 1 + "px",
+					"id": "ellipse_" + obj_num,
+					"fill": current_draw_element_fill,
+					"stroke": current_draw_element_stroke,
+					"stroke-width": current_draw_element_stroke_width,
+					"fill-opacity": 0.5,
+					"stroke-opacity": 0.5
+				}
+			});
+		break;
+		case "delete":
+			var t = evt.target;
+			if(svgroot == evt.target) return;
+			t.parentNode.removeChild(t);
+			break;
+		}
+	}
+
+	this.mouseMove = function(evt)
+	{
+		if (signature_started == 1)
+		{
+			var x = evt.pageX;
+			var y = evt.pageY;
+			switch (current_draw_element)
+			{
+				case "path":
+					d_attr = d_attr + "L" + x + " " + y + " ";
+					var shape = svgdoc.getElementById("path_" + obj_num);
+					shape.setAttributeNS(null, "d", d_attr);
+					break;
+				case "line":
+					var shape = svgdoc.getElementById("line_" + obj_num);
+					shape.setAttributeNS(null, "x2", x);
+					shape.setAttributeNS(null, "y2", y);
+					break;
+				case "square":
+					var shape = svgdoc.getElementById("rect_" + obj_num);
+					var size = Math.max( Math.abs(x - rect_x), Math.abs(y - rect_y) );
+					shape.setAttributeNS(null, "width", size);
+					shape.setAttributeNS(null, "height", size);
+					if(rect_x < x) {
+						shape.setAttributeNS(null, "x", rect_x);
+					} else {
+						shape.setAttributeNS(null, "x", rect_x - size);
+					}
+					if(rect_y < y) {
+						shape.setAttributeNS(null, "y", rect_y);
+					} else {
+						shape.setAttributeNS(null, "y", rect_y - size);
+					}
+					break;
+				case "select":
+				case "rect":
+					var shape = svgdoc.getElementById("rect_" + obj_num);
+					if (rect_x < x) {
+						shape.setAttributeNS(null, "x", rect_x);
+						shape.setAttributeNS(null, "width", x - rect_x);
+					} else {
+						shape.setAttributeNS(null, "x", x);
+						shape.setAttributeNS(null, "width", rect_x - x);
+					}
+					if (rect_y < y) {
+						shape.setAttributeNS(null, "y", rect_y);
+						shape.setAttributeNS(null, "height", y - rect_y);
+					} else {
+						shape.setAttributeNS(null, "y", y);
+						shape.setAttributeNS(null, "height", rect_y - y);
+					}
+					break;
+				case "circle":
+					var shape = svgdoc.getElementById("ellipse_" + obj_num);
+					var cx = shape.getAttributeNS(null, "cx");
+					var cy = shape.getAttributeNS(null, "cy");
+					var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
+					shape.setAttributeNS(null, "rx", rad);
+					shape.setAttributeNS(null, "ry", rad);
+					break;
+				case "ellipse":
+					var shape = svgdoc.getElementById("ellipse_" + obj_num);
+					var cx = shape.getAttributeNS(null, "cx");
+					var cy = shape.getAttributeNS(null, "cy");
+					shape.setAttributeNS(null, "rx", Math.abs(x - cx) );
+					shape.setAttributeNS(null, "ry", Math.abs(y - cy) );
+					break;
+				case "fhellipse":
+					d_attr = d_attr + "L" + x + " " + y + " ";
+					var shape = svgdoc.getElementById("path_" + obj_num);
+					shape.setAttributeNS(null, "d", d_attr);
+					freehand_min_x = Math.min(x, freehand_min_x);
+					freehand_max_x = Math.max(x, freehand_max_x);
+					freehand_min_y = Math.min(y, freehand_min_y);
+					freehand_max_y = Math.max(y, freehand_max_y);
+					break;
+				case "fhrect":
+					d_attr = d_attr + "L" + x + " " + y + " ";
+					var shape = svgdoc.getElementById("path_" + obj_num);
+					shape.setAttributeNS(null, "d", d_attr);
+					freehand_min_x = Math.min(x, freehand_min_x);
+					freehand_max_x = Math.max(x, freehand_max_x);
+					freehand_min_y = Math.min(y, freehand_min_y);
+					freehand_max_y = Math.max(y, freehand_max_y);
+					break;
+			}
+		}
+	}
+
+	this.mouseUp = function(evt)
+	{
+		if (signature_started == 1)
+		{
+			signature_started = 0;
+			switch (current_draw_element)
+			{
+				case "select":
+					var element = svgdoc.getElementById("rect_" + obj_num);
+					element.parentNode.removeChild(element);
+					break;
+				case "path":
+					d_attr = 0;
+					var element = svgdoc.getElementById("path_" + obj_num);
+					element.setAttribute("stroke-opacity", 1.0);
+					obj_num++;
+					break;
+				case "line":
+					var element = svgdoc.getElementById("line_" + obj_num);
+					element.setAttribute("stroke-opacity", 1.0);
+					obj_num++;
+					break;
+				case "square":
+				case "rect":
+					var element = svgdoc.getElementById("rect_" + obj_num);
+					element.setAttribute("fill-opacity", 1.0);
+					element.setAttribute("stroke-opacity", 1.0);
+					obj_num++;
+					break;
+				case "circle":
+				case "ellipse":
+					var element = svgdoc.getElementById("ellipse_" + obj_num);
+					element.setAttribute("fill-opacity", 1.0);
+					element.setAttribute("stroke-opacity", 1.0);
+					obj_num++;
+					break;
+				case "fhellipse":
+					d_attr = 0;
+					var element = svgdoc.getElementById("path_" + obj_num);
+					element.parentNode.removeChild(element);
+					createSvgElementFromJson({
+						"element": "ellipse",
+						"attr": {
+							"cx": (freehand_min_x + freehand_max_x) / 2,
+							"cy": (freehand_min_y + freehand_max_y) / 2,
+							"rx": (freehand_max_x - freehand_min_x) / 2 + "px",
+							"ry": (freehand_max_y - freehand_min_y) / 2 + "px",
+							"id": "ellipse_" + obj_num,
+							"fill": current_draw_element_fill,
+							"stroke": current_draw_element_stroke,
+							"stroke-width": current_draw_element_stroke_width
+						}
+					});
+					obj_num++;
+					break;
+				case "fhrect":
+					d_attr = 0;
+					var element = svgdoc.getElementById("path_" + obj_num);
+					element.parentNode.removeChild(element);
+					createSvgElementFromJson({
+						"element": "rect",
+						"attr": {
+							"x": freehand_min_x,
+							"y": freehand_min_y,
+							"width": (freehand_max_x - freehand_min_x) + "px",
+							"height": (freehand_max_y - freehand_min_y) + "px",
+							"id": "rect_" + obj_num,
+							"fill": current_draw_element_fill,
+							"stroke": current_draw_element_stroke,
+							"stroke-width": current_draw_element_stroke_width
+						}
+					});
+					obj_num++;
+					break;
+			}
+		}
+	}
+
+// public functions
+
+	this.serialize = function(handler) {
+		var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n"
+		str += "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
+		str += svgToString(svgroot, 0);
+		handler(str);
+	}
+
+	this.clear = function() {
+		var nodes = svgroot.childNodes;
+		var len = svgroot.childNodes.length;
+		var i = 0;
+		for(var rep = 0; rep < len; rep++){
+			if (nodes[i].nodeType == 1) {	// element
+				nodes[i].parentNode.removeChild(nodes[i]);
+			} else {
+				i++;
+			}
+		}
+	}
+
+	this.setMode = function(name) {
+		current_draw_element = name;
+	}
+
+	this.setStrokeColor = function(color) {
+		current_draw_element_stroke = color;
+	}
+
+	this.setFillColor = function(color) {
+		current_draw_element_fill = color;
+	}
+
+	this.setStrokeColor = function(val) {
+		current_draw_element_stroke_width = val;
+	}
+
+	this.setup = function(evt) {
+		assignAttributes(svgroot, {
+			"onmouseup":   "canvas.mouseUp(evt)",
+			"onmousedown": "canvas.mouseDown(evt)",
+			"onmousemove": "canvas.mouseMove(evt)"
+		});
+	}
 
 }
diff --git a/svg-editor.js b/svg-editor.js
index 8ff97df8..8662d171 100644
--- a/svg-editor.js
+++ b/svg-editor.js
@@ -8,7 +8,7 @@ $(document).ready(function(){
 	$('#palette').append(str);
 
 	$('#stroke_width').change(function(){
-		svgCanvas.setStrokeColor(this.options[this.selectedIndex].value);
+		SvgCanvas.setStrokeColor(this.options[this.selectedIndex].value);
 	});
 
 	$('.palette_item').click(function(){
@@ -19,7 +19,7 @@ $(document).ready(function(){
 		} else {
 			$('#fill_color').css('background', color);
 		}
-		svgCanvas.setFillColor(color);
+		SvgCanvas.setFillColor(color);
 	});
 
 	$('.palette_item').rightClick(function(){
@@ -30,59 +30,59 @@ $(document).ready(function(){
 		} else {
 			$('#stroke_color').css('background', color);
 		}
-		svgCanvas.setStrokeColor(color);
+		SvgCanvas.setStrokeColor(color);
 	});
 
 	$('#tool_select').click(function(){
-		svgCanvas.setMode('select');
+		SvgCanvas.setMode('select');
 	});
 
 	$('#tool_path').click(function(){
-		svgCanvas.setMode('path');
+		SvgCanvas.setMode('path');
 	});
 
 	$('#tool_line').click(function(){
-		svgCanvas.setMode('line');
+		SvgCanvas.setMode('line');
 	});
 
 	$('#tool_square').click(function(){
-		svgCanvas.setMode('square');
+		SvgCanvas.setMode('square');
 	});
 
 	$('#tool_rect').click(function(){
-		svgCanvas.setMode('rect');
+		SvgCanvas.setMode('rect');
 	});
 
 	$('#tool_fhrect').click(function(){
-		svgCanvas.setMode('fhrect');
+		SvgCanvas.setMode('fhrect');
 	});
 
 	$('#tool_circle').click(function(){
-		svgCanvas.setMode('circle');
+		SvgCanvas.setMode('circle');
 	});
 
 	$('#tool_ellipse').click(function(){
-		svgCanvas.setMode('ellipse');
+		SvgCanvas.setMode('ellipse');
 	});
 
 	$('#tool_fhellipse').click(function(){
-		svgCanvas.setMode('fhellipse');
+		SvgCanvas.setMode('fhellipse');
 	});
 
 	$('#tool_delete').click(function(){
-		svgCanvas.setMode('delete');
+		SvgCanvas.setMode('delete');
 	});
 
 	$('#tool_clear').click(function(){
-		svgCanvas.clear();
+		SvgCanvas.clear();
 	});
 
 	$('#tool_submit').click(function(){
-		svgCanvas.serialize(serializeHandler);
+		SvgCanvas.serialize(serializeHandler);
 	});
 
 })
 
-function serializeHandler(str){
-	alert(str);
+function serializeHandler(svg) {
+	alert(svg);
 }