ThreeUI.prototype.draw = function() {

if (!this.shouldReDraw) return;

// Reset canvas

if (this.clearRect) {

this.context.clearRect(this.clearRect.x, this.clearRect.y, this.clearRect.width, this.clearRect.height);

} else {

        this.context.clearRect(0, 0, this.width, this.height);

        this.contextMov.clearRect(0, 0, this.width, this.height);

}

var self = this;

var length = this.displayObjects.length;

for (var i = 0;i < length;i++) {

        if (!this.displayObjects[i].isMov)

            this.displayObjects[i].render(self.context);

        else

            this.displayObjects[i].render(self.contextMov);

}

    // Make sure the texture gets re-drawn

if (this.renderOnQuad) {

        this.texture.needsUpdate = true;

        this.textureMov.needsUpdate = true;

}

this.shouldReDraw = false;

};

clickHandler{

coords = this.windowToUISpace(coords.x, coords.y);

    if (this.planeMov){

        var coordsMov = {x:coords.x,

            y: coords.y + this.planeMov.position.y/DPR + (this.planeMov.geometry.parameters.height/DPR - this.height)/2 };

    }

var callbackQueue = [], callbackQueueMov = [];

this.eventListeners.click.forEach(function(listener) {

var displayObject = listener.displayObject;

if (!displayObject.shouldReceiveEvents()) return;

var bounds = displayObject.getBounds();

if (!displayObject.isMov && ThreeUI.isInBoundingBox(coords.x, coords.y, bounds.x, bounds.y, bounds.width, bounds.height)) {

// Put listeners in a queue first, so state changes do not impact checking other click handlers

callbackQueue.push(listener);

        }

        else if (displayObject.isMov && ThreeUI.isInBoundingBox(coordsMov.x, coordsMov.y, bounds.x, bounds.y, bounds.width, bounds.height)) {

// Put listeners in a queue first, so state changes do not impact checking other click handlers

callbackQueueMov.push(listener);

}

});

callbackQueue.forEach(function(listener){

listener.callback.bind(listener.displayObject)();

    });

    if (callbackQueue.length === 0)

        callbackQueueMov.forEach(function(listener){

            listener.callback.bind(listener.displayObject)();

        });

}

var scope;

var DPR = window.devicePixelRatio

ThreeUI.prototype.addPlaneMov = function() {

    scope = this;

    this.startY = 0;

    this.enableMov();

    this.setPlaneMovHeight(this.height)

}

ThreeUI.prototype.setPlaneMovHeight = function(newHeight) {

    this.scene.remove(this.planeMov)

var canvasMov = document.createElement('canvas');

canvasMov.width = this.width * DPR

    canvasMov.height = newHeight * DPR

this.contextMov = canvasMov.getContext('2d');

    this.contextMov.scale(DPR, DPR)

this.textureMov = new THREE.Texture(canvasMov);

var material = new THREE.MeshBasicMaterial({ map: this.textureMov });

    material.transparent = true;

    material.map.minFilter = THREE.LinearFilter;

var planeGeo = new THREE.PlaneGeometry(canvasMov.width, canvasMov.height);

    this.planeMov = new THREE.Mesh(planeGeo, material);

    this.planeMov.matrixAutoUpdate = false;

    this.planeMov.translateY(-0.5*(newHeight - this.height)*DPR)

    this.planeMov.translateZ(-1)

    this.planeMov.updateMatrix()

    this.scene.add(this.planeMov);

}

ThreeUI.prototype.enableMov = function() {

    window.addEventListener('mousedown', onDown);

}

ThreeUI.prototype.disableMov = function() {

    window.removeEventListener('mousedown', onDown);

    window.removeEventListener('mousemove',onMove);

    window.removeEventListener('mouseup',onUp);       

}

function onDown(e) {

    scope.startY = e.clientY

    startPosY = scope.planeMov.position.y

    window.addEventListener('mousemove',onMove);

    window.addEventListener('mouseup',onUp);

}

function onMove(e) {

    moveY = scope.startY - e.clientY;

    moveY *= DPR

    scope.planeMov.position.y = startPosY + moveY;    scope.planeMov.updateMatrix()

    // console.log(scope.planeMov.position)

}

function onUp(e) {

    moveY = scope.startY - e.clientY;

    var maxY = (scope.planeMov.geometry.parameters.height - scope.height*DPR)/2

    var minY = -maxY

    if (scope.planeMov.position.y < minY) {

        scope.planeMov.position.y = minY;  scope.planeMov.updateMatrix()

    } else if (scope.planeMov.position.y > maxY) {

        scope.planeMov.position.y = maxY;  scope.planeMov.updateMatrix()

    }

    window.removeEventListener('mousemove',onMove);

    window.removeEventListener('mouseup',onUp);   

};

DisplayObject.prototype.setMovParent = function(parent) {

    this.parent = parent;

    this.isMov = true;

    var bounds = this.getBounds();

    if (bounds.y + bounds.height > this.ui.planeMov.geometry.parameters.height/window.devicePixelRatio){

        this.ui.setPlaneMovHeight(bounds.y + bounds.height)

    }

}