egen toJson fungerar inte

function toJson(obj) {
    switch (typeof obj) {
      case 'object':
       if (obj) {
        var list = [];
        if (obj instanceof Array) {
         for (var i=0;i < obj.length;i++) {
          list.push(toJson(obj[i]));
         }
         return '[' + list.join(',') + ']';
        } else {
         for (var prop in obj) {
          list.push('' + prop + ':' + toJson(obj[prop]));
         }
         return '{' + list.join(',') + '}';
        }
       } else {
        return 'null';
       }
      case 'string':
       return '' + obj.replace(/([''])/g, '\\$1') + '';
      case 'number':
      case 'boolean':
       return new String(obj);
   }
}

Fel: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLInputElement.selectionStart]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost/Test/test.html :: toJson :: line 50"  data: no]

list.push('' + prop + ':' + toJson(obj[prop]));

var stage1 = new Kinetic.Stage("container", 100, 100);
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
	x: 10,
	y: 10,
	width: 80,
	height: 80,
	fill: "red",
	stroke: "black",
	strokeWidth: 5
});

window.onload = function() {
	layer.add(rect);
	stage1.add(layer);
}

function transferStage(){     //Har en knapp med onclick för att aktivera toJson
	var json = stage1.toJson();
	var stage2 = new Kinetic.Stage(json);
	stage2.draw();
}
	
Kinetic.Stage.prototype.toJson = function() {
	switch (typeof this) {
		case 'Stage':
		if (this) {
			var list = [];
			if (this instanceof Array) {
				for (var i=0;i < this.length;i++) {
					list.push(toJson(this[i]));
				}
				return '[' + list.join(',') + ']';
			} else {
				for (var prop in this) {
					list.push('' + prop + ':' + toJson(this[prop]));
				}
				return '{' + list.join(',') + '}';
			}
		} else {
			return 'null';
		}
		case 'string':
			return '' + this.replace(/([''])/g, '\\$1') + '';
		case 'number':
		case 'boolean':
			return new String(this);
	}
}

function toJson(Stage){
//Kinetic.Stage.prototype.toJson = function() {
	var list = [];
	if (this instanceof Array) {
		for (var i=0;i < this.length;i++) {
			list.push(toJson(this[i]));
		}
		return '[' + list.join(',') + ']';
	} else {
		for (var prop in this) {
			list.push('"' + prop + '":' + toJson(this[prop]));
		}
		return '{' + list.join(',') + '}';
	}
}

function toJson(Stage){
	var list = [];
	if (Stage instanceof Array) {
		for (var i=0;i < Stage.length;i++) {
			var stringTxt = "" + Stage[i];
			list.push(stringTxt);
		}
		return '[' + list.join(',') + ']';
	} else {
		for (var prop in Stage) {
			var stringTxt = "" + prop + ":" + Stage[prop];
			list.push(stringTxt);
		}
		return '{' + list.join(',') + '}';
	}
}

{ container : "container", width : "100", height : "100", scale : "[object Object]", dblClickWindow : "400", targetShape : "undefined", clickStart : "false", mousePos : "undefined", mouseDown : "false", mouseUp : "false", touchPos : "undefined", touchStart : "false", touchEnd : "false", bufferLayer : "[object Object]", backstageLayer : "[object Object]", id : "0", isAnimating : "false", onFrameFunc : "undefined", children : "[object Object]", childrenNames : "[object Object]", onFrame : "function (func)...(MYCKET mera kod, men inget relevant här)

function transferStage(){
	json = toJson(stage1);
	document.getElementById('container2').innerHTML = json;
	stage1.clear();
}

function loadStage(){
	var obj = eval(json);
	var stage2 = new Kinetic.Stage(obj);
	stage2.draw();
}

{
container : container;
width : 100 ;
height : 100 ;
scale : [object Object] ;
dblClickWindow : 400 ;
targetShape : undefined ;
clickStart : false ;
mousePos : undefined ;
mouseDown : false ;
mouseUp : false ;
touchPos : undefined ;
touchStart : false ;
touchEnd : false ;
bufferLayer : [object Object] ;
backstageLayer : [object Object] ;
id : 0 ;
isAnimating : false ;
onFrameFunc : undefined ;
children : [object Object] ;
childrenNames : [object Object] ;
onFrame : function (func) { this.onFrameFunc = func; } ;
start : function () { this.isAnimating = true; Kinetic.GlobalObject._handleAnimation(); } ;
stop : function () { this.isAnimating = false; Kinetic.GlobalObject._handleAnimation(); } ;
draw : function () { this._drawChildren(); } ;
_stripLayer : function (layer) { layer.context.stroke = function () {}; layer.context.fill = function () {}; layer.context.fillRect = function (x, y, width, height) {layer.context.rect(x, y, width, height);}; layer.context.strokeRect = function (x, y, width, height) {layer.context.rect(x, y, width, height);}; layer.context.drawImage = function () {}; layer.context.fillText = function () {}; layer.context.strokeText = function () {}; } ;
_endDrag : function (evt) { if (this.nodeDragging) { if (this.nodeDragging.drag.moving) { this.nodeDragging.drag.moving = false; this.nodeDragging._handleEvents("ondragend", evt); } } this.nodeDragging = undefined; } ;
_prepareDrag : function () { var that = this; this.on("mousemove touchmove", function (evt) {if (that.nodeDragging) {var pos = that.getUserPosition();if (that.nodeDragging.drag.x) {that.nodeDragging.x = pos.x - that.nodeDragging.offset.x;}if (that.nodeDragging.drag.y) {that.nodeDragging.y = pos.y - that.nodeDragging.offset.y;}that.nodeDragging.getLayer().draw();if (!that.nodeDragging.drag.moving) {that.nodeDragging.drag.moving = true;that.nodeDragging._handleEvents("ondragstart", evt);}that.nodeDragging._handleEvents("ondragmove", evt);}}, false); this.on("mouseup touchend mouseout", function (evt) {that._endDrag(evt);}); } ;
setSize : function (width, height) { var layers = this.children; for (var n = 0; n < layers.length; n++) { var layer = layers[n]; layer.getCanvas().width = width; layer.getCanvas().height = height; layer.draw(); } this.width = width; this.height = height; this.bufferLayer.getCanvas().width = width; this.bufferLayer.getCanvas().height = height; this.backstageLayer.getCanvas().width = width; this.backstageLayer.getCanvas().height = height; } ;
setScale : function (scaleX, scaleY) { var oldScaleX = this.scale.x; var oldScaleY = this.scale.y; if (scaleY) { this.scale.x = scaleX; this.scale.y = scaleY; } else { this.scale.x = scaleX; this.scale.y = scaleX; } var layers = this.children; var that = this; function scaleChildren(children) { for (var i = 0; i < children.length; i++) { var child = children[i]; child.x *= that.scale.x / oldScaleX; child.y *= that.scale.y / oldScaleY; if (child.children) { scaleChildren(child.children); } } } scaleChildren(layers); } ;
getScale : function () { return this.scale; } ;
clear : function () { var layers = this.children; for (var n = 0; n < layers.length; n++) { layers[n].clear(); } } ;
toDataURL : function (callback) { var bufferLayer = this.bufferLayer; var bufferContext = bufferLayer.getContext(); var layers = this.children; function addLayer(n) { var dataURL = layers[n].getCanvas().toDataURL(); var imageObj = new Image; imageObj.onload = function () {bufferContext.drawImage(this, 0, 0);n++;if (n < layers.length) {addLayer(n);} else {callback(bufferLayer.getCanvas().toDataURL());}}; imageObj.src = dataURL; } bufferLayer.clear(); addLayer(0); } ;
remove : function (layer) { this.container.removeChild(layer.canvas); this._remove(layer); } ;
on : function (typesStr, handler) { var types = typesStr.split(" "); for (var n = 0; n < types.length; n++) { var baseEvent = types[n]; this.container.addEventListener(baseEvent, handler, false); } } ;
add : function (layer) { if (layer.name) { this.childrenNames[layer.name] = layer; } layer.canvas.width = this.width; layer.canvas.height = this.height; this._add(layer); layer.draw(); this.container.appendChild(layer.canvas); } ;
_handleEvent : function (evt) { if (!evt) { evt = window.event; } this._setMousePosition(evt); this._setTouchPosition(evt); var backstageLayer = this.backstageLayer; var backstageLayerContext = backstageLayer.getContext(); var that = this; backstageLayer.clear(); var targetFound = false; function detectEvent(shape) { shape._draw(backstageLayer); var pos = that.getUserPosition(); var el = shape.eventListeners; if (that.targetShape && shape.id === that.targetShape.id) { targetFound = true; } if (shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) { if (that.mouseDown) { that.mouseDown = false; that.clickStart = true; shape._handleEvents("onmousedown", evt); return true; } else if (that.mouseUp) { that.mouseUp = false; shape._handleEvents("onmouseup", evt); if (that.clickStart) { if (that.nodeDragging && !that.nodeDragging.drag.moving || !that.nodeDragging) { shape._handleEvents("onclick", evt); if (shape.inDoubleClickWindow) { shape._handleEvents("ondblclick", evt); } shape.inDoubleClickWindow = true; setTimeout(function () {shape.inDoubleClickWindow = false;}, that.dblClickWindow); } } return true; } else if (that.touchStart) { that.touchStart = false; shape._handleEvents("touchstart", evt); if (el.ondbltap && shape.inDoubleClickWindow) { var events = el.ondbltap; for (var i = 0; i < events.length; i++) { events[i].handler.apply(shape, [evt]); } } shape.inDoubleClickWindow = true; setTimeout(function () {shape.inDoubleClickWindow = false;}, that.dblClickWindow); return true; } else if (that.touchEnd) { that.touchEnd = false; shape._handleEvents("touchend", evt); return true; } else if (el.touchmove) { shape._handleEvents("touchmove", evt); return true; } else if (!that.targetShape || !targetFound && shape.id !== that.targetShape.id) { if (that.targetShape) { var oldEl = that.targetShape.eventListeners; if (oldEl) { that.targetShape._handleEvents("onmouseout", evt); } } that.targetShape = shape; shape._handleEvents("onmouseover", evt); return true; } else { shape._handleEvents("onmousemove", evt); return true; } } else if (that.targetShape && that.targetShape.id === shape.id) { that.targetShape = undefined; shape._handleEvents("onmouseout", evt); return true; } return false; } function traverseChildren(obj) { var children = obj.children; for (var i = children.length - 1; i >= 0; i--) { var child = children[i]; if (child.className === "Shape") { var exit = detectEvent(child); if (exit) { return true; } } else { traverseChildren(child); } } return false; } for (var n = this.children.length - 1; n >= 0; n--) { var layer = this.children[n]; if (layer.visible && n >= 0 && layer.isListening) { if (traverseChildren(layer)) { n = -1; } } } } ;
_listen : function () { var that = this; this.container.addEventListener("mousedown", function (evt) {that.mouseDown = true;that._handleEvent(evt);}, false); this.container.addEventListener("mousemove", function (evt) {that.mouseUp = false;that.mouseDown = false;that._handleEvent(evt);}, false); this.container.addEventListener("mouseup", function (evt) {that.mouseUp = true;that.mouseDown = false;that._handleEvent(evt);that.clickStart = false;}, false); this.container.addEventListener("mouseover", function (evt) {that._handleEvent(evt);}, false); this.container.addEventListener("mouseout", function (evt) {that.mousePos = undefined;}, false); this.container.addEventListener("touchstart", function (evt) {evt.preventDefault();that.touchStart = true;that._handleEvent(evt);}, false); this.container.addEventListener("touchmove", function (evt) {evt.preventDefault();that._handleEvent(evt);}, false); this.container.addEventListener("touchend", function (evt) {evt.preventDefault();that.touchEnd = true;that._handleEvent(evt);}, false); } ;
getMousePosition : function (evt) { return this.mousePos; } ;
getTouchPosition : function (evt) { return this.touchPos; } ;
getUserPosition : function (evt) { return this.getTouchPosition() || this.getMousePosition(); } ;
_setMousePosition : function (evt) { var mouseX = evt.clientX - this._getContainerPosition().left + window.pageXOffset; var mouseY = evt.clientY - this._getContainerPosition().top + window.pageYOffset; this.mousePos = {x: mouseX, y: mouseY}; } ;
_setTouchPosition : function (evt) { if (evt.touches !== undefined && evt.touches.length === 1) { var touch = evt.touches[0]; var touchX = touch.clientX - this._getContainerPosition().left + window.pageXOffset; var touchY = touch.clientY - this._getContainerPosition().top + window.pageYOffset; this.touchPos = {x: touchX, y: touchY}; } } ;
_getContainerPosition : function () { var obj = this.container; var top = 0; var left = 0; while (obj && obj.tagName !== "BODY") { top += obj.offsetTop; left += obj.offsetLeft; obj = obj.offsetParent; } return {top: top, left: left}; } ;
getContainer : function () { return this.container; } ;
getStage : function () { return this; } ;
getTargetShape : function () { return this.targetShape; } ;
_setChildrenIndices : function () { if (this.className === "Stage") { var canvases = this.container.childNodes; var bufferCanvas = canvases[0]; var backstageCanvas = canvases[1]; this.container.innerHTML = ""; this.container.appendChild(bufferCanvas); this.container.appendChild(backstageCanvas); } for (var n = 0; n < this.children.length; n++) { this.children[n].index = n; if (this.className === "Stage") { this.container.appendChild(this.children[n].canvas); } } } ;
_drawChildren : function () { var children = this.children; for (var n = 0; n < children.length; n++) { var child = children[n]; if (child.className === "Shape") { child._draw(child.getLayer()); } else { child._draw(); } } } ;
getChildren : function () { return this.children; } ;
getChild : function (name) { return this.childrenNames[name]; } ;
_add : function (child) { if (child.name) { this.childrenNames[child.name] = child; } child.id = Kinetic.GlobalObject.idCounter++; child.index = this.children.length; child.parent = this; this.children.push(child); } ;
_remove : function (child) { if (child.name !== undefined) { this.childrenNames[child.name] = undefined; } this.children.splice(child.index, 1); this._setChildrenIndices(); child = undefined; } }