class RenderTargetTextureImage extends BABYLON.GUI.Image {
    private textureCanvas: HTMLCanvasElement;
    private transformCanvas: HTMLCanvasElement;
    private textureContext: CanvasRenderingContext2D;
    private transformContext: CanvasRenderingContext2D;

    private observer: BABYLON.Observer<number>;

    constructor(name: string, private texture: BABYLON.RenderTargetTexture) {
        super(name);
        this.textureCanvas = document.createElement('canvas');
        this.transformCanvas = document.createElement('canvas');

        this.textureContext = this.textureCanvas.getContext('2d');
        this.transformContext = this.transformCanvas.getContext('2d');

        (<any>this.domImage) = this.textureCanvas;

        this.observer = texture.onBeforeRenderObservable.add(() => {
            let size = texture.getSize();
            let pixels = texture.readPixels().buffer;

            if (this.textureCanvas.width !== size.width) {
                this.resize(size);
            }
            let imageData = new ImageData(new Uint8ClampedArray(pixels), size.width, size.height);
            this.textureContext.putImageData(imageData, 0, 0);
            this.transformContext.drawImage(this.textureCanvas, 0, 0);
            this._markAsDirty();
        });
    }

    resize(size: BABYLON.ISize) {
        this.textureCanvas.width = size.width;
        this.textureCanvas.height = size.height;
        this.transformCanvas.width = size.width;
        this.transformCanvas.height = size.height;
        (<any>this.domImage) = this.transformCanvas;
        this.updateTransform();
    }

    updateTransform() {
        this.transformContext.setTransform(1, 0, 0, -1, 0, this.textureCanvas.height)
    }

    dispose() {
        this.texture.onBeforeRenderObservable.remove(this.observer);
    }
}
(<any>BABYLON.GUI).RenderTargetTextureImage = RenderTargetTextureImage;