social_cheesecake 0.2.0 → 0.3.0

data/app/assets/javascripts/kinetic.js

@@ -1,11 +1,11 @@
 /**
- * KineticJS JavaScript Library v3.4.0
+ * KineticJS JavaScript Library v3.6.2
  * http://www.kineticjs.com/
- * Copyright 2011, Eric Rowell
+ * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Dec 31 2011
+ * Date: Jan 21 2012
  *
- * Copyright (C) 2011 by Eric Rowell
+ * Copyright (C) 2012 by Eric Rowell
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -27,39 +27,58 @@
  */
 var Kinetic = {};
 
-/****************************************
- * Layer
+/*
+ * I know, globals suck.  But since Shape objects
+ * and Layer objects can exist before adding them to
+ * the stage, a global shape id counter is necessary
  */
-Kinetic.Layer = function(stage, isInvisible){
+Kinetic.GLOBALS = {
+    shapeIdCounter: 0
+};
+
+///////////////////////////////////////////////////////////////////////
+////  Link
+///////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////
+
+Kinetic.Link = function(shape){
+    this.shape = shape;
+    shape.link = this;
+    this.id = shape.id;
+    this.index = undefined;
+    
+    // thes params are string ids
+    this.nextId = undefined;
+    this.prevId = undefined;
+};
+
+///////////////////////////////////////////////////////////////////////
+////  Layer
+///////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////
+
+Kinetic.Layer = function(name){
+    this.name = name;
+    this.shapeIndexCounter = 0;
+    this.isListening = true;
+    this.shapeNames = {};
     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 (isInvisible) {
-        var that = this;
-        this.context.stroke = function(){
-        };
-        this.context.fill = function(){
-        };
-        this.context.fillRect = function(x, y, width, height){
-            that.context.rect(x, y, width, height);
-        };
-        this.context.strokeRect = function(x, y, width, height){
-            that.context.rect(x, y, width, height);
-        };
-        this.context.drawImage = function(){
-        };
-        this.context.fillText = function(){
-        };
-        this.context.strokeText = function(){
-        };
-    }
+    //links is an array of links which point to event links
+    this.links = [];
+    this.linkHash = {};
     
-    stage.container.appendChild(this.canvas);
-}
+    this.headId = undefined;
+    this.tailId = undefined;
+};
+/*
+ * listen or don't listen to events
+ */
+Kinetic.Layer.prototype.listen = function(isListening){
+    this.isListening = isListening;
+};
 /*
  * clear layer
  */
@@ -67,7 +86,7 @@ Kinetic.Layer.prototype.clear = function(){
     var context = this.getContext();
     var canvas = this.getCanvas();
     context.clearRect(0, 0, canvas.width, canvas.height);
-}
+};
 /*
  * get layer canvas
  */
@@ -81,32 +100,142 @@ Kinetic.Layer.prototype.getContext = function(){
     return this.context;
 }
 /*
- * get layer shapes
+ * get shapes as an array
  */
 Kinetic.Layer.prototype.getShapes = function(){
-    return this.shapes;
-}
+    var shapes = [];
+    for (var n = 0; n < this.links.length; n++) {
+        shapes.push(this.links[n].shape);
+    }
+    return shapes;
+};
 /*
  * draw all shapes in layer
  */
 Kinetic.Layer.prototype.draw = function(){
     this.clear();
-    var context = this.getContext();
+    var links = this.links;
+    for (var n = 0; n < links.length; n++) {
+        var shape = links[n].shape;
+        shape.draw(shape.layer);
+    }
+};
+/*
+ * add link to data structure
+ */
+Kinetic.Layer.prototype.addLink = function(link){
+    var shape = link.shape;
+    shape.layer = this;
+    // add link to array
+    this.links.push(link);
+    // add link to hash
+    this.linkHash[link.id] = link;
+    link.index = this.links.length - 1;
     
-    for (var n = 0; n < this.getShapes().length; n++) {
-        this.getShapes()[n].draw(this);
+    if (shape.isListening) {
+        // if tail doesnt exist, add tail and head
+        if (this.tailId === undefined) {
+            this.tailId = link.id;
+            this.headId = link.id;
+        }
+        // if tail does exist, this means there's at least one link
+        else {
+            var tail = this.linkHash[this.tailId];
+            tail.nextId = link.id;
+            link.prevId = tail.id;
+            this.tailId = link.id;
+        }
+    }
+};
+/*
+ * add shape
+ */
+Kinetic.Layer.prototype.add = function(shape){
+    if (shape.name) {
+        this.shapeNames[shape.name] = shape;
+    }
+    shape.id = Kinetic.GLOBALS.shapeIdCounter++;
+    var link = new Kinetic.Link(shape);
+    this.addLink(link);
+};
+/*
+ * get shape by name
+ */
+Kinetic.Layer.prototype.getShape = function(name){
+    return this.shapeNames[name];
+};
+/*
+ * remove a shape from layer (link + shape deconstructor)
+ */
+Kinetic.Layer.prototype.remove = function(shape){
+    var link = shape.link;
+    this.removeLink(link);
+    this.shape = null;
+    this.link = null;
+};
+/*
+ * remove link from layer.  this does not deconstruct
+ * the link or the shape
+ */
+Kinetic.Layer.prototype.removeLink = function(link){
+    link.shape.layer = undefined;
+    this.unlink(link);
+    this.links.splice(link.index, 1);
+    this.linkHash[link.id] = undefined;
+    this.setLinkIndices();
+};
+
+/*
+ * unlink link.  This is different from removeLink because it
+ * keeps the link in the layer data structure
+ */
+Kinetic.Layer.prototype.unlink = function(link){
+    // set head if needed
+    if (link.id === this.headId) {
+        this.headId = link.nextId;
+    }
+    // set tail if needed
+    if (link.id === this.tailId) {
+        this.tailId = link.prevId;
     }
+    // link prev to next
+    if (link.prevId !== undefined) {
+        this.linkHash[link.prevId].nextId = link.nextId;
+    }
+    if (link.nextId !== undefined) {
+        this.linkHash[link.nextId].prevId = link.prevId;
+    }
+    // clear pointers
+    link.prevId = undefined;
+    link.nextId = undefined;
 };
-/****************************************
- * Stage
+/*
+ * set link indices
  */
+Kinetic.Layer.prototype.setLinkIndices = function(){
+    for (var n = 0; n < this.links.length; n++) {
+        this.links[n].index = n;
+    }
+};
+///////////////////////////////////////////////////////////////////////
+////  Stage
+///////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////
+
 Kinetic.Stage = function(containerId, width, height){
     this.container = document.getElementById(containerId);
     this.width = width;
     this.height = height;
-    this.zIndexCounter = 9999;
-    this.idCounter = 0;
+    this.scale = {
+        x: 1,
+        y: 1
+    };
+    this.layerIdCounter = 0;
     this.dblClickWindow = 400;
+    this.targetShape = {};
+    this.clickStart = false;
+    this.layerNames = {};
+    
     // desktop flags
     this.mousePos = null;
     this.mouseDown = false;
@@ -117,39 +246,119 @@ Kinetic.Stage = function(containerId, width, height){
     this.touchStart = false;
     this.touchEnd = false;
     
-    // create layers
-    this.bufferLayer = new Kinetic.Layer(this);
-    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);
+    // user defined layers
+    this.layers = [];
+    
+    /*
+     * Layer roles
+     *
+     * buffer - canvas compositing
+     * backstage - path detection
+     */
+    var that = this;
+    this.bufferLayer = new Kinetic.Layer();
+    this.backstageLayer = new Kinetic.Layer();
+    
+    // customize back stage context
+    var backstageLayer = this.backstageLayer;
+    backstageLayer.context.stroke = function(){
+    };
+    backstageLayer.context.fill = function(){
+    };
+    backstageLayer.context.fillRect = function(x, y, width, height){
+        backstageLayer.context.rect(x, y, width, height);
+    };
+    backstageLayer.context.strokeRect = function(x, y, width, height){
+        that.context.rect(x, y, width, height);
+    };
+    backstageLayer.context.drawImage = function(){
+    };
+    backstageLayer.context.fillText = function(){
+    };
+    backstageLayer.context.strokeText = function(){
+    };
     
     this.bufferLayer.getCanvas().style.display = 'none';
     this.backstageLayer.getCanvas().style.display = 'none';
+    
+    // add buffer layer
+    this.bufferLayer.stage = this;
+    this.bufferLayer.canvas.width = this.width;
+    this.bufferLayer.canvas.height = this.height;
+    this.container.appendChild(this.bufferLayer.canvas);
+    
+    // add backstage layer
+    this.backstageLayer.stage = this;
+    this.backstageLayer.canvas.width = this.width;
+    this.backstageLayer.canvas.height = this.height;
+    this.container.appendChild(this.backstageLayer.canvas);
+    
     this.listen();
     
     this.addEventListener("mouseout", function(evt){
         that.shapeDragging = undefined;
     }, false);
     
-    // prepare stage for drag and drop
-    var that = this;
-    this.addEventListener("mousemove", function(evt){
-        if (that.shapeDragging) {
-            var mousePos = that.getMousePos();
-            that.shapeDragging.x = mousePos.x - that.shapeDragging.offset.x;
-            that.shapeDragging.y = mousePos.y - that.shapeDragging.offset.y;
-            that.drawActors();
-        }
-    }, false);
-    this.addEventListener("mouseup", function(evt){
+    /*
+     * prepare drag and drop
+     */
+    var types = [{
+        end: "mouseup",
+        move: "mousemove"
+    }, {
+        end: "touchend",
+        move: "touchmove"
+    }];
+    
+    for (var n = 0; n < types.length; n++) {
+        var pubType = types[n];
+        (function(){
+            var type = pubType;
+            that.on(type.move, function(evt){
+                if (that.shapeDragging) {
+                    var pos = type.move == "mousemove" ? that.getMousePosition() : that.getTouchPosition();
+                    if (that.shapeDragging.drag.x) {
+                        that.shapeDragging.x = pos.x - that.shapeDragging.offset.x;
+                    }
+                    if (that.shapeDragging.drag.y) {
+                        that.shapeDragging.y = pos.y - that.shapeDragging.offset.y;
+                    }
+                    that.shapeDragging.layer.draw();
+                    
+                    // execute user defined ondragend if defined
+                    var dragmove = that.shapeDragging.eventListeners.ondragmove;
+                    if (dragmove) {
+                        var events = dragmove;
+                        for (var i = 0; i < events.length; i++) {
+                            events[i].handler.apply(that.shapeDragging, [evt]);
+                        }
+                    }
+                }
+            }, false);
+            that.on(type.end, function(evt){
+                // execute user defined ondragend if defined
+                if (that.shapeDragging) {
+                    var dragend = that.shapeDragging.eventListeners.ondragend;
+                    if (dragend) {
+                        var events = dragend;
+                        for (var i = 0; i < events.length; i++) {
+                            events[i].handler.apply(that.shapeDragging, [evt]);
+                        }
+                    }
+                }
+                that.shapeDragging = undefined;
+            });
+        })();
+    }
+    
+    this.on("touchend", function(evt){
         // execute user defined ondragend if defined
-        
         if (that.shapeDragging) {
             var dragend = that.shapeDragging.eventListeners.ondragend;
             if (dragend) {
-                for (var i = 0; i < dragend.length; i++) {
-                    dragend[i].func(evt);
+                var events = dragend;
+                for (var i = 0; i < events.length; i++) {
+                    events[i].handler.apply(that.shapeDragging, [evt]);
                 }
             }
         }
@@ -157,60 +366,41 @@ Kinetic.Stage = function(containerId, width, height){
     });
 };
 /*
- * get buffer layer
- */
-Kinetic.Stage.prototype.getBufferLayer = function(){
-    return this.bufferLayer;
-};
-/*
- * get backstage layer
+ * set stage size
  */
-Kinetic.Stage.prototype.getBackstageLayer = function(){
-    return this.backstageLayer;
-};
-/*
- * get stage layer
- */
-Kinetic.Stage.prototype.getStageLayer = function(){
-    return this.stageLayer;
-};
-/*
- * get props layer
- */
-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();
+Kinetic.Stage.prototype.setSize = function(width, height){
+    var layers = this.layers;
+    for (n = 0; n < layers.length; n++) {
+        var layer = layers[n];
+        layer.getCanvas().width = width;
+        layer.getCanvas().height = height;
+        layer.draw();
+    }
+    
+    // set stage dimensions
+    this.width = width;
+    this.height = height;
 };
 /*
- * clear all canvases
+ * scale stage
  */
-Kinetic.Stage.prototype.clearAll = function(){
-    this.backstageLayer.clear();
-    this.stageLayer.clear();
-    this.propsLayer.clear();
-    this.actorsLayer.clear();
+Kinetic.Stage.prototype.setScale = function(scaleX, scaleY){
+    if (scaleY) {
+        this.scale.x = scaleX;
+        this.scale.y = scaleY;
+    }
+    else {
+        this.scale.x = scaleX;
+        this.scale.y = scaleX;
+    }
 };
 /*
  * Composite toDataURL
  */
 Kinetic.Stage.prototype.toDataURL = function(callback){
-    var bufferLayer = this.getBufferLayer();
+    var bufferLayer = this.bufferLayer;
     var bufferContext = bufferLayer.getContext();
-    var stageLayer = this.getStageLayer();
-    var propsLayer = this.getPropsLayer();
-    var actorsLayer = this.getActorsLayer();
-    var layers = [stageLayer, propsLayer, actorsLayer];
+    var layers = this.layers;
     
     function addLayer(n){
         var dataURL = layers[n].getCanvas().toDataURL();
@@ -228,92 +418,59 @@ Kinetic.Stage.prototype.toDataURL = function(callback){
         imageObj.src = dataURL;
     }
     
+    
     bufferLayer.clear();
     addLayer(0);
 };
+
 /*
- * draw actors layer
- */
-Kinetic.Stage.prototype.drawActors = function(){
-    this.getActorsLayer().draw();
-};
-/*
- * draw props layer
- */
-Kinetic.Stage.prototype.drawProps = function(){
-    this.getPropsLayer().draw();
-};
-/*
- * draw actors and props layer.  This method should be used
- * in combination with makeActor() or makeProp()
+ * draw shapes
  */
 Kinetic.Stage.prototype.draw = function(){
-    this.drawProps();
-    this.drawActors();
-};
-/*
- * remove a shape from the stage
- */
-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);
-        }
+    var layers = this.layers;
+    for (var n = 0; n < layers.length; n++) {
+        layers[n].draw();
     }
 };
 /*
- * remove all shapes from the stage
- */
-Kinetic.Stage.prototype.removeAll = function(){
-    // remove all shapes
-    this.getPropsLayer().shapes = [];
-    this.getActorsLayer().shapes = [];
-};
-/*
- * get stage canvas
- */
-Kinetic.Stage.prototype.getCanvas = function(){
-    return this.stageLayer.getCanvas();
-};
-/*
- * get stage context
+ * remove a layer from the stage
  */
-Kinetic.Stage.prototype.getContext = function(){
-    return this.stageLayer.getContext();
+Kinetic.Stage.prototype.remove = function(shape){
+    // TODO
 };
 /*
  * short-hand add event listener to stage (which is essentially
  * the container DOM)
  */
-Kinetic.Stage.prototype.on = function(type, func){
-    this.container.addEventListener(type, func);
+Kinetic.Stage.prototype.on = function(type, handler){
+    this.container.addEventListener(type, handler);
 };
 /*
  * long-hand add event listener to stage (which is essentially
  * the container DOM)
  */
-Kinetic.Stage.prototype.addEventListener = function(type, func){
-    this.on(type, func);
+Kinetic.Stage.prototype.addEventListener = function(type, handler){
+    this.on(type, handler);
 };
-/*
- * add shape to stage
+/* 
+ * add layer to stage
  */
-Kinetic.Stage.prototype.add = function(shape){
-    shape.stage = this;
-    if (shape.isProp) {
-        shape.layer = this.propsLayer;
+Kinetic.Stage.prototype.add = function(layer){
+    if (layer.name) {
+        this.layerNames[layer.name] = layer;
     }
-    else {
-        shape.layer = this.actorsLayer;
-    }
-    
-    shape.getLayer().shapes.push(shape);
-    
-    shape.id = this.idCounter++;
-    shape.draw(shape.layer);
+    layer.canvas.width = this.width;
+    layer.canvas.height = this.height;
+    layer.stage = this;
+    this.layers.push(layer);
+    layer.draw();
+    this.container.appendChild(layer.canvas);
+};
+/*
+ * get layer by name
+ */
+Kinetic.Stage.prototype.getLayer = function(name){
+    return this.layerNames[name];
 };
 /*
  * handle incoming event
@@ -332,120 +489,180 @@ Kinetic.Stage.prototype.handleEvent = function(evt){
     
     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;
+    /*
+     * loop through layers.  If at any point an event
+     * is triggered, n is set to -1 which will break out of the
+     * three nested loops
+     */
+    for (var n = this.layers.length - 1; n >= 0; n--) {
+        var layer = this.layers[n];
+        if (n >= 0 && layer.isListening) {
+            var linkId = layer.tailId;
             
-            if (shape.visible && pos !== null && backstageLayerContext.isPointInPath(pos.x, pos.y)) {
-                // handle onmousedown
-                if (that.mouseDown) {
-                    that.mouseDown = false;
-                    shape.clickStart = true;
+            // propapgate backwards through event links
+            while (n >= 0 && linkId !== undefined) {
+                //for (var n = this.getEventShapes().length - 1; n >= 0; n--) {
+                //var pubShape = this.getEventShapes()[n];
+                var link = layer.linkHash[linkId];
+                var pubShape = link.shape;
+                (function(){
+                    var shape = pubShape;
+                    shape.draw(backstageLayer);
+                    var pos = that.getUserPosition();
+                    var el = shape.eventListeners;
                     
-                    if (el.onmousedown) {
-                        for (var i = 0; i < el.onmousedown.length; i++) {
-                            el.onmousedown[i].func(evt);
+                    if (shape.visible && pos !== null && backstageLayerContext.isPointInPath(pos.x, pos.y)) {
+                        // handle onmousedown
+                        if (that.mouseDown) {
+                            that.mouseDown = false;
+                            that.clickStart = true;
+                            
+                            if (el.onmousedown) {
+                                var events = el.onmousedown;
+                                for (var i = 0; i < events.length; i++) {
+                                    events[i].handler.apply(shape, [evt]);
+                                }
+                            }
+                            n = -1;
                         }
-                    }
-                    n = -1;
-                }
-                // handle onmouseup & onclick
-                else if (that.mouseUp) {
-                    that.mouseUp = false;
-                    if (el.onmouseup) {
-                        for (var i = 0; i < el.onmouseup.length; i++) {
-                            el.onmouseup[i].func(evt);
+                        // handle onmouseup & onclick
+                        else if (that.mouseUp) {
+                            that.mouseUp = false;
+                            if (el.onmouseup) {
+                                var events = el.onmouseup;
+                                for (var i = 0; i < events.length; i++) {
+                                    events[i].handler.apply(shape, [evt]);
+                                }
+                            }
+                            
+                            // detect if click or double click occurred
+                            if (that.clickStart) {
+                                if (el.onclick) {
+                                    var events = el.onclick;
+                                    for (var i = 0; i < events.length; i++) {
+                                        events[i].handler.apply(shape, [evt]);
+                                    }
+                                }
+                                
+                                if (el.ondblclick && shape.inDoubleClickWindow) {
+                                    var events = el.ondblclick;
+                                    for (var i = 0; i < events.length; i++) {
+                                        events[i].handler.apply(shape, [evt]);
+                                    }
+                                }
+                                
+                                shape.inDoubleClickWindow = true;
+                                
+                                setTimeout(function(){
+                                    shape.inDoubleClickWindow = false;
+                                }, that.dblClickWindow);
+                            }
+                            n = -1;
                         }
-                    }
-                    
-                    // detect if click or double click occurred
-                    if (shape.clickStart) {
-                        if (el.onclick) {
-                            for (var i = 0; i < el.onclick.length; i++) {
-                                el.onclick[i].func(evt);
+                        
+                        // handle touchstart
+                        else if (that.touchStart) {
+                            that.touchStart = false;
+                            if (el.touchstart) {
+                                var events = el.touchstart;
+                                for (var i = 0; i < events.length; i++) {
+                                    events[i].handler.apply(shape, [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);
+                            n = -1;
                         }
                         
-                        if (el.ondblclick && shape.inDoubleClickWindow) {
-                            for (var i = 0; i < el.ondblclick.length; i++) {
-                                el.ondblclick[i].func(evt);
+                        // handle touchend
+                        else if (that.touchEnd) {
+                            that.touchEnd = false;
+                            if (el.touchend) {
+                                var events = el.touchend;
+                                for (var i = 0; i < events.length; i++) {
+                                    events[i].handler.apply(shape, [evt]);
+                                }
                             }
+                            n = -1;
                         }
                         
-                        shape.inDoubleClickWindow = true;
+                        // handle touchmove
+                        else if (el.touchmove) {
+                            var events = el.touchmove;
+                            for (var i = 0; i < events.length; i++) {
+                                events[i].handler.apply(shape, [evt]);
+                            }
+                            n = -1;
+                        }
                         
-                        setTimeout(function(){
-                            shape.inDoubleClickWindow = false;
-                        }, that.dblClickWindow);
-                    }
-                    n = -1;
-                }
-                
-                // handle touchstart
-                else if (that.touchStart) {
-                    that.touchStart = false;
-                    if (el.touchstart) {
-                        for (var i = 0; i < el.touchstart.length; i++) {
-                            el.touchstart[i].func(evt);
+                        /*
+                         * this condition is used to identify a new target shape.
+                         * A new target shape occurs if a target shape is not defined or
+                         * if the current shape is different from the current target shape and
+                         * the current shape is beneath the target
+                         */
+                        else if (that.targetShape.id === undefined || (that.targetShape.id != shape.id && that.targetShape.getZIndex() < shape.getZIndex())) {
+                            /*
+                             * check if old target has an onmouseout event listener
+                             */
+                            var oldEl = that.targetShape.eventListeners;
+                            if (oldEl && oldEl.onmouseout) {
+                                var events = oldEl.onmouseout;
+                                for (var i = 0; i < events.length; i++) {
+                                    events[i].handler.apply(that.targetShape, [evt]);
+                                }
+                            }
+                            
+                            // set new target shape
+                            that.targetShape = shape;
+                            
+                            // handle onmouseover
+                            if (el.onmouseover) {
+                                var events = el.onmouseover;
+                                for (var i = 0; i < events.length; i++) {
+                                    events[i].handler.apply(shape, [evt]);
+                                }
+                            }
+                            n = -1;
                         }
-                    }
-                    n = -1;
-                }
-                
-                // handle touchend
-                else if (that.touchEnd) {
-                    that.touchEnd = false;
-                    if (el.touchend) {
-                        for (var i = 0; i < el.touchend.length; i++) {
-                            el.touchend[i].func(evt);
+                        
+                        // handle onmousemove
+                        else if (el.onmousemove) {
+                            var events = el.onmousemove;
+                            for (var i = 0; i < events.length; i++) {
+                                events[i].handler.apply(shape, [evt]);
+                            }
+                            n = -1;
                         }
                     }
-                    n = -1;
-                }
-                
-                // handle touchmove
-                else if (el.touchmove) {
-                    for (var i = 0; i < el.touchmove.length; i++) {
-                        el.touchmove[i].func(evt);
-                    }
-                    n = -1;
-                }
-                
-                // handle onmouseover
-                else if (!shape.mouseOver) {
-                    shape.mouseOver = true;
-                    if (el.onmouseover) {
-                        for (var i = 0; i < el.onmouseover.length; i++) {
-                            el.onmouseover[i].func(evt);
+                    // handle mouseout condition
+                    else if (that.targetShape.id == shape.id) {
+                        that.targetShape = {};
+                        if (el.onmouseout) {
+                            var events = el.onmouseout;
+                            for (var i = 0; i < events.length; i++) {
+                                events[i].handler.apply(shape, [evt]);
+                            }
                         }
+                        n = -1;
                     }
-                    n = -1;
-                }
+                }());
                 
-                // handle onmousemove
-                else if (el.onmousemove) {
-                    for (var i = 0; i < el.onmousemove.length; i++) {
-                        el.onmousemove[i].func(evt);
-                    }
-                    n = -1;
-                }
-            }
-            // handle mouseout condition
-            else if (shape.mouseOver) {
-                shape.mouseOver = false;
-                if (el.onmouseout) {
-                    for (var i = 0; i < el.onmouseout.length; i++) {
-                        el.onmouseout[i].func(evt);
-                    }
-                }
-                n = -1;
-            }
-        }());
-    }
+                linkId = link.prevId;
+            } // end links loop
+        }
+    } // end layer loop
 };
 /*
  * begin listening for events by adding event handlers
@@ -471,10 +688,7 @@ Kinetic.Stage.prototype.listen = function(){
         that.mouseDown = false;
         that.handleEvent(evt);
         
-        // clear all click starts
-        for (var i = 0; i < that.getShapes().length; i++) {
-            that.getShapes()[i].clickStart = false;
-        }
+        that.clickStart = false;
     }, false);
     
     this.container.addEventListener("mouseover", function(evt){
@@ -505,21 +719,28 @@ Kinetic.Stage.prototype.listen = function(){
 /*
  * get mouse position for desktop apps
  */
-Kinetic.Stage.prototype.getMousePos = function(evt){
+Kinetic.Stage.prototype.getMousePosition = function(evt){
     return this.mousePos;
 };
 /*
  * get touch position for mobile apps
  */
-Kinetic.Stage.prototype.getTouchPos = function(evt){
+Kinetic.Stage.prototype.getTouchPosition = function(evt){
     return this.touchPos;
 };
+/*
+ * get user position (mouse position or touch position)
+ *
+ */
+Kinetic.Stage.prototype.getUserPosition = function(evt){
+    return this.getTouchPosition() || this.getMousePosition();
+};
 /*
  * 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;
+    var mouseX = evt.clientX - this.getContainerPosition().left + window.pageXOffset;
+    var mouseY = evt.clientY - this.getContainerPosition().top + window.pageYOffset;
     this.mousePos = {
         x: mouseX,
         y: mouseY
@@ -533,8 +754,8 @@ Kinetic.Stage.prototype.setTouchPosition = function(evt){
         // 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;
+        var touchX = touch.clientX - this.getContainerPosition().left + window.pageXOffset;
+        var touchY = touch.clientY - this.getContainerPosition().top + window.pageYOffset;
         
         this.touchPos = {
             x: touchX,
@@ -545,11 +766,11 @@ Kinetic.Stage.prototype.setTouchPosition = function(evt){
 /*
  * get container position
  */
-Kinetic.Stage.prototype.getContainerPos = function(){
+Kinetic.Stage.prototype.getContainerPosition = function(){
     var obj = this.container;
     var top = 0;
     var left = 0;
-    while (obj.tagName != "BODY") {
+    while (obj && obj.tagName != "BODY") {
         top += obj.offsetTop;
         left += obj.offsetLeft;
         obj = obj.offsetParent;
@@ -565,18 +786,16 @@ Kinetic.Stage.prototype.getContainerPos = function(){
 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, isProp){
+
+///////////////////////////////////////////////////////////////////////
+////  Shape
+///////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////
+
+Kinetic.Shape = function(drawFunc, name){
+    this.isListening = true;
     this.drawFunc = drawFunc;
-    this.isProp = isProp === undefined ? false : isProp;
+    this.name = name;
     this.x = 0;
     this.y = 0;
     this.scale = {
@@ -596,28 +815,68 @@ Kinetic.Shape = function(drawFunc, isProp){
     };
     
     this.eventListeners = {};
-    this.mouseOver = false;
-    this.clickStart = false;
-    this.inDblClickWindow = false;
-    
     this.visible = true;
+    this.drag = {
+        x: false,
+        y: false
+    };
+};
+/*
+ * listen or don't listen to events
+ */
+Kinetic.Shape.prototype.listen = function(isListening){
+    // if shape is in layer
+    if (this.link) {
+        // if changing isListening
+        if (isListening != this.isListening) {
+            // is now listening
+            if (isListening) {
+                //TODO
+            }
+            // if now not listening
+            else {
+                //TODO
+            }
+        }
+    }
+    
+    this.isListening = isListening;
+};
+/*
+ * get shape temp layer context
+ */
+Kinetic.Shape.prototype.getContext = function(){
+    return this.tempLayer.getContext();
+};
+/*
+ * get shape temp layer canvas
+ */
+Kinetic.Shape.prototype.getCanvas = function(){
+    return this.tempLayer.getCanvas();
 };
 /*
  * get stage
  */
 Kinetic.Shape.prototype.getStage = function(){
-    return this.stage;
+    return this.layer.stage;
 };
 /*
  * draw shape
  */
 Kinetic.Shape.prototype.draw = function(layer){
     if (this.visible) {
-        var stage = this.getStage();
+        //var layer = this.layer;
+        var stage = layer.stage;
         var context = layer.getContext();
         
+        // layer transform
         context.save();
+        if (stage.scale.x != 1 || stage.scale.y != 1) {
+            context.scale(stage.scale.x, stage.scale.y);
+        }
         
+        // shape transform
+        context.save();
         if (this.x !== 0 || this.y !== 0) {
             context.translate(this.x, this.y);
         }
@@ -628,51 +887,128 @@ Kinetic.Shape.prototype.draw = function(layer){
             context.scale(this.scale.x, this.scale.y);
         }
         
-        this.drawFunc.call(layer);
+        this.tempLayer = layer;
+        this.drawFunc.call(this);
+        
+        context.restore();
         context.restore();
     }
 };
 /*
- * enable/disable drag and drop
+ * initialize drag and drop
+ */
+Kinetic.Shape.prototype.initDrag = function(){
+    var that = this;
+    var types = ["mousedown", "touchstart"];
+    
+    for (var n = 0; n < types.length; n++) {
+        var pubType = types[n];
+        (function(){
+            var type = pubType;
+            that.on(type + ".initdrag", function(evt){
+                var stage = that.layer.stage;
+                var pos = stage.getUserPosition();
+                
+                if (pos) {
+                    stage.shapeDragging = that;
+                    stage.shapeDragging.offset = {};
+                    stage.shapeDragging.offset.x = pos.x - that.x;
+                    stage.shapeDragging.offset.y = pos.y - that.y;
+                    
+                    // execute dragstart events if defined
+                    var dragstart = that.eventListeners.ondragstart;
+                    if (dragstart) {
+                        var events = dragstart;
+                        for (var i = 0; i < events.length; i++) {
+                            events[i].handler.apply(that, [evt]);
+                        }
+                    }
+                }
+            });
+        })();
+    }
+};
+/*
+ * remove drag and drop event listener
+ */
+Kinetic.Shape.prototype.dragCleanup = function(){
+    if (!this.drag.x && !this.drag.y) {
+        this.off("mousedown.initdrag");
+        this.off("touchstart.initdrag");
+    }
+};
+/*
+ * enable/disable drag and drop for box x and y direction
  */
 Kinetic.Shape.prototype.draggable = function(setDraggable){
     if (setDraggable) {
-        var that = this;
-        this.addEventListener("mousedown.initdrag", function(evt){
-            var stage = that.getStage();
-            stage.shapeDragging = that;
-            var mousePos = stage.getMousePos();
-            
-            stage.shapeDragging.offset = {};
-            stage.shapeDragging.offset.x = mousePos.x - that.x;
-            stage.shapeDragging.offset.y = mousePos.y - that.y;
-            
-            // execute dragstart events if defined
-            var dragstart = that.eventListeners.ondragstart;
-            if (dragstart) {
-                for (var i = 0; i < dragstart.length; i++) {
-                    dragstart[i].func(evt);
-                }
-            }
-        });
+        var needInit = !this.drag.x && !this.drag.y;
+        this.drag = {
+            x: true,
+            y: true
+        };
+        if (needInit) {
+            this.initDrag();
+        }
     }
     else {
-        this.removeEventListener("mousedown.initdrag");
+        this.drag = {
+            x: false,
+            y: false
+        };
+        this.dragCleanup();
     }
 };
 /*
- * set shape scale
+ * enable/disable drag and drop for x only
  */
-Kinetic.Shape.prototype.setScale = function(scale){
-    this.scale.x = scale;
-    this.scale.y = scale;
+Kinetic.Shape.prototype.draggableX = function(setDraggable){
+    if (setDraggable) {
+        var needInit = !this.drag.x && !this.drag.y;
+        this.drag.x = true;
+        if (needInit) {
+            this.initDrag();
+        }
+    }
+    else {
+        this.drag.x = false;
+        this.dragCleanup();
+    }
 };
 /*
- * scale shape
+ * enable/disable drag and drop for y only
  */
-Kinetic.Shape.prototype.scale = function(scale){
-    this.scale.x *= scale;
-    this.scale.y *= scale;
+Kinetic.Shape.prototype.draggableY = function(setDraggable){
+    if (setDraggable) {
+        var needInit = !this.drag.x && !this.drag.y;
+        this.drag.y = true;
+        if (needInit) {
+            this.initDrag();
+        }
+    }
+    else {
+        this.drag.y = false;
+        this.dragCleanup();
+    }
+};
+/*
+ * get zIndex
+ */
+Kinetic.Shape.prototype.getZIndex = function(){
+    return this.link.index;
+};
+/*
+ * set shape scale
+ */
+Kinetic.Shape.prototype.setScale = function(scaleX, scaleY){
+    if (scaleY) {
+        this.scale.x = scaleX;
+        this.scale.y = scaleY;
+    }
+    else {
+        this.scale.x = scaleX;
+        this.scale.y = scaleX;
+    }
 };
 /*
  * move shape to position
@@ -681,6 +1017,15 @@ Kinetic.Shape.prototype.setPosition = function(x, y){
     this.x = x;
     this.y = y;
 };
+/*
+ * get shape position
+ */
+Kinetic.Shape.prototype.getPosition = function(){
+    return {
+        x: this.x,
+        y: this.y
+    };
+};
 /*
  * move shape by amount
  */
@@ -703,26 +1048,35 @@ Kinetic.Shape.prototype.rotate = function(theta){
 /*
  * short-hand add event listener to shape
  */
-Kinetic.Shape.prototype.on = function(type, func){
-    var event = (type.indexOf('touch') == -1) ? 'on' + type : type;
-    var parts = event.split(".");
-    var baseEvent = parts[0];
-    var name = parts.length > 1 ? parts[1] : "";
-    
-    if (!this.eventListeners[baseEvent]) {
-        this.eventListeners[baseEvent] = [];
+Kinetic.Shape.prototype.on = function(typesStr, handler){
+    var types = typesStr.split(" ");
+    /*
+     * loop through types and attach event listeners to
+     * each one.  eg. "click mouseover.namespace mouseout"
+     * will create three event bindings
+     */
+    for (var n = 0; n < types.length; n++) {
+        var type = types[n];
+        var event = (type.indexOf('touch') == -1) ? 'on' + type : type;
+        var parts = event.split(".");
+        var baseEvent = parts[0];
+        var name = parts.length > 1 ? parts[1] : "";
+        
+        if (!this.eventListeners[baseEvent]) {
+            this.eventListeners[baseEvent] = [];
+        }
+        
+        this.eventListeners[baseEvent].push({
+            name: name,
+            handler: handler
+        });
     }
-    
-    this.eventListeners[baseEvent].push({
-        name: name,
-        func: func
-    });
 };
 /*
  * long-hand add event listener to shape
  */
-Kinetic.Shape.prototype.addEventListener = function(type, func){
-    this.on(type, func);
+Kinetic.Shape.prototype.addEventListener = function(type, handler){
+    this.on(type, handler);
 };
 /*
  * short-hand remove event listener(s)
@@ -732,13 +1086,13 @@ Kinetic.Shape.prototype.off = function(type){
     var parts = event.split(".");
     var baseEvent = parts[0];
     
-    if (parts.length > 1) {
+    if (this.eventListeners[baseEvent] && parts.length > 1) {
         var name = parts[1];
         
         for (var i = 0; i < this.eventListeners[baseEvent].length; i++) {
             if (this.eventListeners[baseEvent][i].name == name) {
                 this.eventListeners[baseEvent].splice(i, 1);
-                if (this.eventListeners[baseEvent].length == 0) {
+                if (this.eventListeners[baseEvent].length === 0) {
                     this.eventListeners[baseEvent] = undefined;
                 }
                 break;
@@ -771,115 +1125,141 @@ Kinetic.Shape.prototype.hide = function(){
  * move shape to top
  */
 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;
+    var link = this.link;
+    var index = link.index;
+    var layer = this.layer;
+    this.layer.links.splice(index, 1);
+    this.layer.links.push(link);
+    
+    layer.setLinkIndices();
+    
+    if (this.isListening) {
+        // alter link structure if more than one link in the layer
+        if (link.nextId !== undefined || link.prevId !== undefined) {
+            layer.unlink(link);
+            var tail = layer.linkHash[layer.tailId];
+            tail.nextId = link.id;
+            link.prevId = tail.id;
+            layer.tailId = link.id;
         }
     }
 };
 /*
- * get shape layer
+ * move shape up
  */
-Kinetic.Shape.prototype.getLayer = function(){
-    return this.layer;
-};
-/*
- * get shape layer
- */
-Kinetic.Shape.prototype.makeActor = function(){
-    var stage = this.stage;
-    var layer = this.getLayer();
-    var propsLayer = stage.getPropsLayer();
-    var actorsLayer = stage.getActorsLayer();
-    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);
-            actorsLayer.getShapes().push(this);
-            break;
+Kinetic.Shape.prototype.moveUp = function(){
+    var link = this.link;
+    var index = link.index;
+    var layer = this.layer;
+    var nextLink = layer.linkHash[link.nextId];
+    
+    // only do something if there's a link above
+    if (nextLink) {
+        // swap links
+        this.layer.links.splice(index, 1);
+        this.layer.links.splice(index + 1, 0, link);
+        
+        layer.setLinkIndices();
+        
+        nextLink.prevId = link.prevId;
+        link.nextId = nextLink.nextId;
+        
+        if (link.prevId !== undefined) {
+            layer.linkHash[link.prevId].nextId = nextLink.id;
+        }
+        if (nextLink.nextId !== undefined) {
+            layer.linkHash[nextLink.nextId].prevId = link.id;
+        }
+        
+        // link to eachother
+        link.prevId = nextLink.id;
+        nextLink.nextId = link.id;
+        
+        // handle tail and head reassignment
+        if (link.id == layer.headId) {
+            layer.headId = nextLink.id;
+        }
+        if (nextLink.id == layer.tailId) {
+            layer.tailId = link.id;
         }
     }
 };
 /*
- * make shape into an actor
+ * move shape down
  */
-Kinetic.Shape.prototype.makeActor = function(){
-    var stage = this.stage;
-    var layer = this.getLayer();
-    var propsLayer = stage.getPropsLayer();
-    var actorsLayer = stage.getActorsLayer();
-    var shapes = layer.getShapes();
+Kinetic.Shape.prototype.moveDown = function(){
+    var link = this.link;
+    var index = link.index;
+    var layer = this.layer;
+    var prevLink = layer.linkHash[link.prevId];
     
-    for (var n = 0; n < shapes.length; n++) {
-        var shape = shapes[n];
-        if (shape.id == this.id) {
-            layer.shapes.splice(n, 1);
-            actorsLayer.getShapes().push(this);
-            this.layer = stage.actorsLayer;
-            break;
+    // only do something if there's a link above
+    if (prevLink) {
+        // swap links
+        this.layer.links.splice(index, 1);
+        this.layer.links.splice(index - 1, 0, link);
+        
+        layer.setLinkIndices();
+        
+        link.prevId = prevLink.prevId;
+        prevLink.nextId = link.nextId;
+        
+        if (link.nextId !== undefined) {
+            layer.linkHash[link.nextId].prevId = prevLink.id;
+        }
+        if (prevLink.prevId !== undefined) {
+            layer.linkHash[prevLink.prevId].nextId = link.id;
+        }
+        
+        // link to eachother
+        link.nextId = prevLink.id;
+        prevLink.prevId = link.id;
+        
+        // handle tail and head reassignment
+        if (prevLink.id == layer.headId) {
+            layer.headId = link.id;
+        }
+        if (link.id == layer.tailId) {
+            layer.tailId = prevLink.id;
         }
     }
 };
 /*
- * make shape into a prop
+ * move shape to bottom
  */
-Kinetic.Shape.prototype.makeProp = function(){
-    var stage = this.stage;
-    var layer = this.getLayer();
-    var propsLayer = stage.getPropsLayer();
-    var actorsLayer = stage.getActorsLayer();
-    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);
-            propsLayer.getShapes().push(this);
-            this.layer = stage.propsLayer;
-            break;
+Kinetic.Shape.prototype.moveToBottom = function(){
+    var link = this.link;
+    var index = link.index;
+    var layer = this.layer;
+    this.layer.links.splice(index, 1);
+    this.layer.links.unshift(link);
+    
+    layer.setLinkIndices();
+    
+    if (this.isListening) {
+        // alter link structure if more than one link in the layer
+        if (link.nextId !== undefined || link.prevId !== undefined) {
+            layer.unlink(link);
+            var head = layer.linkHash[layer.headId];
+            head.prevId = link.id;
+            link.nextId = head.id;
+            layer.headId = link.id;
         }
     }
 };
-/****************************************
- * Image constructor
+/*
+ * get shape layer
  */
-Kinetic.Image = function(config){
-    var imageObj = config.imageObj;
-    var x = config.x;
-    var y = config.y;
-    var width = config.width;
-    var height = config.height;
-    var isProp = config.isProp;
-    
-    if (!width) {
-        width = imageObj.width;
-    }
-    if (!height) {
-        height = imageObj.height;
-    }
-    var drawImage = function(){
-        var context = this.getContext();
-        context.drawImage(imageObj, x, y, width, height);
-        context.beginPath();
-        context.rect(x, y, width, height);
-        context.closePath();
-    };
-    
-    var shape = new Kinetic.Shape(drawImage, isProp);
-    
-    /*
-     * copy shape methods and properties to
-     * Image object
-     */
-    for (var key in shape) {
-        this[key] = shape[key];
-    }
+Kinetic.Shape.prototype.getLayer = function(){
+    return this.layer;
 };
+/*
+ * move shape to another layer
+ */
+Kinetic.Shape.prototype.moveToLayer = function(newLayer){
+    var layer = this.layer;
+    var link = this.link;
+    layer.unlink(link);
+    layer.removeLink(link);
+    newLayer.addLink(link);
+};