social_cheesecake 0.0.4 → 0.1.0

data/app/assets/javascripts/kinetic.js

@@ -1,9 +1,9 @@
 /**
- * KineticJS JavaScript Library v2.3.2
+ * KineticJS JavaScript Library v3.1.0
  * http://www.kineticjs.com/
  * Copyright 2011, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Dec 01 2011
+ * Date: Dec 19 2011
  *
  * Copyright (C) 2011 by Eric Rowell
  *
@@ -27,515 +27,556 @@
  */
 var Kinetic = {};
 
+/****************************************
+ * Layer
+ */
+Kinetic.Layer = function(stage, stripStyling) {
+	this.canvas = document.createElement('canvas');
+	this.context = this.canvas.getContext('2d');
+	this.canvas.width = stage.width;
+	this.canvas.height = stage.height;
+	this.canvas.style.position = 'absolute';
+	this.shapes = [];
+
+	if(stripStyling) {
+		this.context.stroke = function() {
+		};
+		this.context.fill = function() {
+		};
+	}
+
+	stage.container.appendChild(this.canvas);
+}
+/*
+ * clear layer
+ */
+Kinetic.Layer.prototype.clear = function() {
+	var context = this.getContext();
+	var canvas = this.getCanvas();
+	context.clearRect(0, 0, canvas.width, canvas.height);
+}
+/*
+ * get layer canvas
+ */
+Kinetic.Layer.prototype.getCanvas = function() {
+	return this.canvas;
+}
+/*
+ * get layer context
+ */
+Kinetic.Layer.prototype.getContext = function() {
+	return this.context;
+}
+/*
+ * get layer shapes
+ */
+Kinetic.Layer.prototype.getShapes = function() {
+	return this.shapes;
+}
+/*
+ * draw all shapes in layer
+ */
+Kinetic.Layer.prototype.draw = function() {
+	this.clear();
+	var context = this.getContext();
+
+	for(var n = 0; n < this.getShapes().length; n++) {
+		this.getShapes()[n].draw(this);
+	}
+};
 /****************************************
  * Stage
  */
-Kinetic.Stage = function(containerId, width, height){
-    this.container = document.getElementById(containerId);
-    this.width = width;
-    this.height = height;
-    this.shapes = [];
-    this.zIndexCounter = 9999;
-    this.idCounter = 0;
-    this.dblClickWindow = 400; // ms
-    // desktop flags
-    this.mousePos = null;
-    this.mouseDown = false;
-    this.mouseUp = false;
-    
-    // mobile flags
-    this.touchPos = null;
-    this.touchStart = false;
-    this.touchEnd = false;
-    
-    // add stage canvas
-    this.canvas = document.createElement('canvas');
-    this.context = this.canvas.getContext('2d');
-    this.id = 0;
-    
-    this.canvas.width = this.width;
-    this.canvas.height = this.height;
-    this.canvas.style.position = 'absolute';
-    this.container.appendChild(this.canvas);
-    
-    this.listen();
+Kinetic.Stage = function(containerId, width, height) {
+	this.container = document.getElementById(containerId);
+	this.width = width;
+	this.height = height;
+	this.zIndexCounter = 9999;
+	this.idCounter = 0;
+	this.dblClickWindow = 400;
+	// ms
+	// desktop flags
+	this.mousePos = null;
+	this.mouseDown = false;
+	this.mouseUp = false;
+
+	// mobile flags
+	this.touchPos = null;
+	this.touchStart = false;
+	this.touchEnd = false;
+
+	// create layers
+	this.backStageLayer = new Kinetic.Layer(this, true);
+	this.stageLayer = new Kinetic.Layer(this);
+	this.propsLayer = new Kinetic.Layer(this);
+	this.actorsLayer = new Kinetic.Layer(this);
+	this.backStageLayer.getCanvas().style.display = 'none';
+	this.listen();
 };
-
 /*
- * clear stage canvas
+ * get back stage layer
  */
-Kinetic.Stage.prototype.clear = function(){
-    var context = this.getContext();
-    var canvas = this.getCanvas();
-    context.clearRect(0, 0, canvas.width, canvas.height);
+Kinetic.Stage.prototype.getBackStageLayer = function() {
+	return this.backStageLayer;
 };
-
 /*
- * clear stage canvas and all shape canvases
+ * get stage layer
  */
-Kinetic.Stage.prototype.clearAll = function(){
-    // clear stage
-    this.clear();
-    
-    // clear shapes
-    for (var n = 0; n < this.shapes.length; n++) {
-        this.shapes[n].clear();
-    }
+Kinetic.Stage.prototype.getStageLayer = function() {
+	return this.stageLayer;
 };
-
 /*
- * draw all shapes
+ * get props layer
  */
-Kinetic.Stage.prototype.drawAll = function(){
-    // draw shapes
-    for (var n = 0; n < this.shapes.length; n++) {
-        this.shapes[n].draw();
-    }
+Kinetic.Stage.prototype.getPropsLayer = function() {
+	return this.propsLayer;
+};
+/*
+ * get actors layer
+ */
+Kinetic.Stage.prototype.getActorsLayer = function() {
+	return this.actorsLayer;
+};
+/*
+ * clear stage
+ */
+Kinetic.Stage.prototype.clear = function() {
+	this.stageLayer.clear();
+};
+/*
+ * clear all canvases
+ */
+Kinetic.Stage.prototype.clearAll = function() {
+	this.backStageLayer.clear();
+	this.stageLayer.clear();
+	this.propsLayer.clear();
+	this.actorsLayer.clear();
+};
+/*
+ * short-hand for draw actors layer
+ */
+Kinetic.Stage.prototype.draw = function() {
+	this.getActorsLayer().draw();
 };
-
 /*
  * remove a shape from the stage
  */
-Kinetic.Stage.prototype.remove = function(shape){
-    var shapes = this.shapes;
-    
-    // remove canvas
-    this.container.removeChild(shape.getCanvas());
-    
-    // remove from shapes array
-    for (var n = 0; n < shapes.length; n++) {
-        var id = shapes[n].id;
-        if (id == shape.id) {
-            this.shapes.splice(n, 1);
-        }
-    }
+Kinetic.Stage.prototype.remove = function(shape) {
+	// remove from shapes array
+	var shapes = this.getShapes();
+	for(var n = 0; n < shapes.length; n++) {
+		var id = shapes[n].id;
+		if(id == shape.id) {
+			shape.getLayer().getShapes().splice(n, 1);
+		}
+	}
 };
-
 /*
  * remove all shapes from the stage
  */
-Kinetic.Stage.prototype.removeAll = function(){
-    // remove all shapes
-    while (this.shapes.length > 0) {
-        var that = this;
-        this.remove(that.shapes[0]);
-    }
+Kinetic.Stage.prototype.removeAll = function() {
+	// remove all shapes
+	this.getPropsLayer().shapes = [];
+	this.getActorsLayer().shapes = [];
 };
-
 /*
  * get stage canvas
  */
-Kinetic.Stage.prototype.getCanvas = function(){
-    return this.canvas;
+Kinetic.Stage.prototype.getCanvas = function() {
+	return this.stageLayer.getCanvas();
 };
-
 /*
  * get stage context
  */
-Kinetic.Stage.prototype.getContext = function(){
-    return this.context;
+Kinetic.Stage.prototype.getContext = function() {
+	return this.stageLayer.getContext();
 };
-
 /*
  * add event listener to stage (which is essentially
  * the container DOM)
  */
-Kinetic.Stage.prototype.addEventListener = function(type, func){
-    this.container.addEventListener(type, func);
+Kinetic.Stage.prototype.addEventListener = function(type, func) {
+	this.container.addEventListener(type, func);
 };
-
 /*
  * add shape to stage
  */
-Kinetic.Stage.prototype.add = function(shape){
-    shape.stage = this;
-    shape.canvas = document.createElement('canvas');
-    shape.context = shape.canvas.getContext('2d');
-    shape.id = ++this.idCounter;
-    shape.canvas.width = this.width;
-    shape.canvas.height = this.height;
-    shape.canvas.style.zIndex = ++this.zIndexCounter;
-    shape.canvas.style.position = 'absolute';
-    this.container.appendChild(shape.canvas);
-    this.shapes.push(shape);
-    shape.draw();
+Kinetic.Stage.prototype.add = function(shape) {
+	shape.stage = this;
+	if(shape.isProp) {
+		shape.layer = this.propsLayer;
+	} else {
+		shape.layer = this.actorsLayer;
+	}
+
+	shape.getLayer().shapes.push(shape);
+
+	shape.id = this.idCounter++;
+	shape.draw(shape.layer);
 };
-
 /*
  * handle incoming event
  */
-Kinetic.Stage.prototype.handleEvent = function(evt){
-    if (!evt) {
-        evt = window.event;
-    }
-    
-    this.setMousePosition(evt);
-    this.setTouchPosition(evt);
-    var that = this;
-    for (var n = this.shapes.length - 1; n >= 0; n--) {
-        var pubShape = this.shapes[n];
-        
-        (function(){
-            var shape = pubShape;
-            var pos = that.touchPos || that.mousePos;
-            var el = shape.eventListeners;
-            
-            if (pos !== null && shape.context.isPointInPath(pos.x, pos.y)) {
-                // handle onmousedown   
-                if (that.mouseDown) {
-                    that.mouseDown = false;
-                    shape.clickStart = true;
-                    
-                    if (el.onmousedown !== undefined) {
-                        el.onmousedown(evt);
-                    }
-                    
-                    n = -1; // break;
-                }
-                // handle onmouseup & onclick
-                else if (that.mouseUp) {
-                    that.mouseUp = false;
-                    if (el.onmouseup !== undefined) {
-                        el.onmouseup(evt);
-                    }
-                    
-                    // detect if click or double click occurred
-                    if (shape.clickStart) {
-                    
-                        if (el.onclick !== undefined) {
-                            el.onclick(evt);
-                        }
-                        
-                        if (el.ondblclick !== undefined && shape.inDoubleClickWindow) {
-                            el.ondblclick(evt);
-                        }
-                        
-                        shape.inDoubleClickWindow = true;
-                        
-                        setTimeout(function(){
-                            shape.inDoubleClickWindow = false;
-                        }, that.dblClickWindow);
-                    }
-                    
-                    n = -1; // break;
-                }
-                
-                // handle onmouseover
-                else if (!shape.mouseOver) {
-                    shape.mouseOver = true;
-                    if (el.onmouseover !== undefined) {
-                        el.onmouseover(evt);
-                    }
-                    
-                    n = -1; // break;
-                }
-                
-                // handle onmousemove
-                else if (el.onmousemove !== undefined) {
-                    el.onmousemove(evt);
-                    
-                    n = -1; // break;
-                }
-                
-                // handle touchstart
-                else if (that.touchStart) {
-                    that.touchStart = false;
-                    if (el.touchstart !== undefined) {
-                        el.touchstart(evt);
-                    }
-                    
-                    n = -1; // break;
-                }
-                
-                // handle touchend
-                else if (that.touchEnd) {
-                    that.touchEnd = false;
-                    if (el.touchend !== undefined) {
-                        el.touchend(evt);
-                    }
-                    
-                    n = -1; // break;
-                }
-                
-                // handle touchmove
-                else if (!that.touchMove) {
-                    if (el.touchmove !== undefined) {
-                        el.touchmove(evt);
-                    }
-                    
-                    n = -1; // break;
-                }
-            }
-            // handle mouseout condition
-            else if (shape.mouseOver) {
-                shape.mouseOver = false;
-                if (el.onmouseout !== undefined) {
-                    el.onmouseout(evt);
-                }
-                
-                n = -1; // break;
-            }
-        }());
-    }
+Kinetic.Stage.prototype.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();
+
+	for(var n = this.getShapes().length - 1; n >= 0; n--) {
+		var pubShape = this.getShapes()[n]; ( function() {
+			var shape = pubShape;
+			shape.draw(backStageLayer);
+			var pos = that.touchPos || that.mousePos;
+			var el = shape.eventListeners;
+
+			if(shape.visible && pos !== null && backStageLayerContext.isPointInPath(pos.x, pos.y)) {
+				// handle onmousedown
+				if(that.mouseDown) {
+					that.mouseDown = false;
+					shape.clickStart = true;
+
+					if(el.onmousedown !== undefined) {
+						el.onmousedown(evt);
+					}
+					n = -1;
+				}
+				// handle onmouseup & onclick
+				else if(that.mouseUp) {
+					that.mouseUp = false;
+					if(el.onmouseup !== undefined) {
+						el.onmouseup(evt);
+					}
+
+					// detect if click or double click occurred
+					if(shape.clickStart) {
+
+						if(el.onclick !== undefined) {
+							el.onclick(evt);
+						}
+
+						if(el.ondblclick !== undefined && shape.inDoubleClickWindow) {
+							el.ondblclick(evt);
+						}
+
+						shape.inDoubleClickWindow = true;
+
+						setTimeout(function() {
+							shape.inDoubleClickWindow = false;
+						}, that.dblClickWindow);
+					}
+					n = -1;
+				}
+
+				// handle touchstart
+				else if(that.touchStart) {
+					that.touchStart = false;
+					if(el.touchstart !== undefined) {
+						el.touchstart(evt);
+					}
+					n = -1;
+				}
+
+				// handle touchend
+				else if(that.touchEnd) {
+					that.touchEnd = false;
+					if(el.touchend !== undefined) {
+						el.touchend(evt);
+					}
+					n = -1;
+				}
+
+				// handle touchmove
+				else if(el.touchmove !== undefined) {
+					el.touchmove(evt);
+					n = -1;
+				}
+
+				// handle onmouseover
+				else if(!shape.mouseOver) {
+					shape.mouseOver = true;
+					if(el.onmouseover !== undefined) {
+						el.onmouseover(evt);
+					}
+					n = -1;
+				}
+
+				// handle onmousemove
+				else if(el.onmousemove !== undefined) {
+					el.onmousemove(evt);
+					n = -1;
+				}
+			}
+			// handle mouseout condition
+			else if(shape.mouseOver) {
+				shape.mouseOver = false;
+				if(el.onmouseout !== undefined) {
+					el.onmouseout(evt);
+				}
+				n = -1;
+			}
+		}());
+	}
 };
-
 /*
  * begin listening for events by adding event handlers
  * to the container
  */
-Kinetic.Stage.prototype.listen = function(){
-    var that = this;
-    
-    // desktop events
-    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);
-        
-        // clear all click starts
-        for (var i = 0; i < that.shapes.length; i++) {
-            that.shapes[i].clickStart = false;
-        }
-    }, false);
-    
-    this.container.addEventListener("mouseover", function(evt){
-        that.handleEvent(evt);
-    }, false);
-    
-    this.container.addEventListener("mouseout", function(evt){
-        that.mousePos = null;
-    }, false);
-    
-    // mobile events
-    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);
+Kinetic.Stage.prototype.listen = function() {
+	var that = this;
+
+	// desktop events
+	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);
+
+		// clear all click starts
+		for(var i = 0; i < that.getShapes().length; i++) {
+			that.getShapes()[i].clickStart = false;
+		}
+	}, false);
+
+	this.container.addEventListener("mouseover", function(evt) {
+		that.handleEvent(evt);
+	}, false);
+
+	this.container.addEventListener("mouseout", function(evt) {
+		that.mousePos = null;
+	}, false);
+	// mobile events
+	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);
 };
-
 /*
  * get mouse position for desktop apps
  */
-Kinetic.Stage.prototype.getMousePos = function(evt){
-    return this.mousePos;
+Kinetic.Stage.prototype.getMousePos = function(evt) {
+	return this.mousePos;
 };
-
 /*
  * get touch position for mobile apps
  */
-Kinetic.Stage.prototype.getTouchPos = function(evt){
-    return this.touchPos;
+Kinetic.Stage.prototype.getTouchPos = function(evt) {
+	return this.touchPos;
 };
-
 /*
  * set mouse positon for desktop apps
  */
-Kinetic.Stage.prototype.setMousePosition = function(evt){
-    var mouseX = evt.clientX - this.getContainerPos().left + window.pageXOffset;
-    var mouseY = evt.clientY - this.getContainerPos().top + window.pageYOffset;
-    this.mousePos = {
-        x: mouseX,
-        y: mouseY
-    };
+Kinetic.Stage.prototype.setMousePosition = function(evt) {
+	var mouseX = evt.clientX - this.getContainerPos().left + window.pageXOffset;
+	var mouseY = evt.clientY - this.getContainerPos().top + window.pageYOffset;
+	this.mousePos = {
+		x : mouseX,
+		y : mouseY
+	};
 };
-
 /*
  * set touch position for mobile apps
  */
-Kinetic.Stage.prototype.setTouchPosition = function(evt){
-    if (evt.touches !== undefined && evt.touches.length == 1) { // Only deal with
-        // one finger
-        var touch = evt.touches[0];
-        // Get the information for finger #1
-        var touchX = touch.clientX - this.getContainerPos().left + window.pageXOffset;
-        var touchY = touch.clientY - this.getContainerPos().top + window.pageYOffset;
-        
-        this.touchPos = {
-            x: touchX,
-            y: touchY
-        };
-    }
+Kinetic.Stage.prototype.setTouchPosition = function(evt) {
+	if(evt.touches !== undefined && evt.touches.length == 1) {// Only deal with
+		// one finger
+		var touch = evt.touches[0];
+		// Get the information for finger #1
+		var touchX = touch.clientX - this.getContainerPos().left + window.pageXOffset;
+		var touchY = touch.clientY - this.getContainerPos().top + window.pageYOffset;
+
+		this.touchPos = {
+			x : touchX,
+			y : touchY
+		};
+	}
 };
-
 /*
  * get container position
  */
-Kinetic.Stage.prototype.getContainerPos = function(){
-    var obj = this.container;
-    var top = 0;
-    var left = 0;
-    while (obj.tagName != "BODY") {
-        top += obj.offsetTop;
-        left += obj.offsetLeft;
-        obj = obj.offsetParent;
-    }
-    return {
-        top: top,
-        left: left
-    };
+Kinetic.Stage.prototype.getContainerPos = function() {
+	var obj = this.container;
+	var top = 0;
+	var left = 0;
+	while(obj.tagName != "BODY") {
+		top += obj.offsetTop;
+		left += obj.offsetLeft;
+		obj = obj.offsetParent;
+	}
+	return {
+		top : top,
+		left : left
+	};
 };
-
 /*
  * get container DOM element
  */
-Kinetic.Stage.prototype.getContainer = function(){
-    return this.container;
+Kinetic.Stage.prototype.getContainer = function() {
+	return this.container;
+};
+/*
+ * get all shapes
+ */
+Kinetic.Stage.prototype.getShapes = function() {
+	return (this.getPropsLayer().getShapes()).concat(this.getActorsLayer().getShapes());
 };
-
 /****************************************
  * Shape
  */
-Kinetic.Shape = function(drawFunc){
-    this.drawFunc = drawFunc;
-    this.x = 0;
-    this.y = 0;
-    this.scale = {
-        x: 1,
-        y: 1
-    };
-    this.rotation = 0; // radians
-    this.eventListeners = {};
-    this.mouseOver = false;
-    this.clickStart = false;
-    this.inDblClickWindow = false;
+Kinetic.Shape = function(drawFunc, isProp) {
+	this.drawFunc = drawFunc;
+	this.isProp = isProp === undefined ? false : isProp;
+	this.x = 0;
+	this.y = 0;
+	this.scale = {
+		x : 1,
+		y : 1
+	};
+	this.rotation = 0;
+	// radians
+	// store state for next clear
+	this.lastX = 0;
+	this.lastY = 0;
+	this.lastRotation = 0;
+	// radians
+	this.lastScale = {
+		x : 1,
+		y : 1
+	};
+
+	this.eventListeners = {};
+	this.mouseOver = false;
+	this.clickStart = false;
+	this.inDblClickWindow = false;
+
+	this.visible = true;
 };
-
 /*
  * get stage
  */
-Kinetic.Shape.prototype.getStage = function(){
-    return this.stage();
+Kinetic.Shape.prototype.getStage = function() {
+	return this.stage;
 };
-
 /*
  * draw shape
  */
-Kinetic.Shape.prototype.draw = function(args){
-    var context = this.getContext();
-    this.clear();
-    context.save();
-    
-    if (this.x !== 0 || this.y !== 0) {
-        context.translate(this.x, this.y);
-    }
-    if (this.rotation !== 0) {
-        context.rotate(this.rotation);
-    }
-    if (this.scale.x != 1 || this.scale.y != 1) {
-        context.scale(this.scale.x, this.scale.y);
-    }
-    
-    this.drawFunc(args);
-    context.restore();
+Kinetic.Shape.prototype.draw = function(layer) {
+	if(this.visible) {
+		var stage = this.getStage();
+		var context = layer.getContext();
+
+		context.save();
+
+		if(this.x !== 0 || this.y !== 0) {
+			context.translate(this.x, this.y);
+		}
+		if(this.rotation !== 0) {
+			context.rotate(this.rotation);
+		}
+		if(this.scale.x != 1 || this.scale.y != 1) {
+			context.scale(this.scale.x, this.scale.y);
+		}
+
+		this.drawFunc.call(layer);
+		context.restore();
+	}
 };
-
 /*
- * get shape canvas
+ * set shape canvas scale
  */
-Kinetic.Shape.prototype.getCanvas = function(){
-    return this.canvas;
+Kinetic.Shape.prototype.setScale = function(scale) {
+	this.scale.x = scale;
+	this.scale.y = scale;
 };
-
 /*
- * get shape context
+ * add event listener to shape
  */
-Kinetic.Shape.prototype.getContext = function(){
-    return this.context;
+Kinetic.Shape.prototype.addEventListener = function(type, func) {
+	var event = (type.indexOf('touch') == -1) ? 'on' + type : type;
+	this.eventListeners[event] = func;
 };
-
 /*
- * set shape canvas scale
+ * show shape
  */
-Kinetic.Shape.prototype.setScale = function(scale){
-    this.scale.x = scale;
-    this.scale.y = scale;
+Kinetic.Shape.prototype.show = function() {
+	this.visible = true;
 };
-
 /*
- * clear shape canvas
+ * hide shape
  */
-Kinetic.Shape.prototype.clear = function(){
-    var context = this.getContext();
-    var canvas = this.getCanvas();
-    context.clearRect(0, 0, canvas.width, canvas.height);
+Kinetic.Shape.prototype.hide = function() {
+	this.visible = false;
 };
-
 /*
- * add event listener to shape
+ * move shape to top
  */
-Kinetic.Shape.prototype.addEventListener = function(type, func){
-    var event = (type.indexOf('touch') == -1) ? 'on' + type : type;
-    this.eventListeners[event] = func;
+Kinetic.Shape.prototype.moveToTop = function() {
+	var stage = this.stage;
+	var layer = this.getLayer();
+	var shapes = layer.getShapes();
+
+	for(var n = 0; n < shapes.length; n++) {
+		var shape = shapes[n];
+		if(shape.id == this.id) {
+			layer.shapes.splice(n, 1);
+			layer.shapes.push(this);
+			break;
+		}
+	}
 };
-
 /*
- * move shape canvas to the top via z-index
+ * get shape layer
  */
-Kinetic.Shape.prototype.moveToTop = function(){
-    var stage = this.stage;
-    // remove shape from shapes
-    for (var n = 0; n < stage.shapes.length; n++) {
-        var reg = stage.shapes[n];
-        if (reg.id == this.id) {
-            stage.shapes.splice(n, 1);
-            stage.shapes.push(this);
-            break;
-        }
-    }
-    
-    // reorder canvases
-    for (var n = 0; n < stage.shapes.length; n++) {
-        var reg = stage.shapes[n];
-        reg.getCanvas().style.zIndex = ++stage.zIndexCounter;
-    }
+Kinetic.Shape.prototype.getLayer = function() {
+	return this.layer;
 };
-
 /****************************************
  * drawImage util
  * This util function draws a rectangular shape
  * over a canvas image to provide a detectable path
  */
-Kinetic.drawImage = function(imageObj, x, y, width, height){
-    if (!width) {
-        width = imageObj.width;
-    }
-    if (!height) {
-        height = imageObj.height;
-    }
-    return function(){
-        var context = this.getContext();
-        context.drawImage(imageObj, x, y, width, height);
-        context.beginPath();
-        context.rect(x, y, width, height);
-        context.closePath();
-    };
+Kinetic.drawImage = function(imageObj, x, y, width, height) {
+	if(!width) {
+		width = imageObj.width;
+	}
+	if(!height) {
+		height = imageObj.height;
+	}
+	return function() {
+		var context = this.getContext();
+		context.drawImage(imageObj, x, y, width, height);
+		context.beginPath();
+		context.rect(x, y, width, height);
+		context.closePath();
+	};
 };
-
-
-
-
-
-