var gl;

var App = new Class({
    Implements: Options,
    options: {
        name: 'webglet-app',
        width: 800,
        height: 600,
        frameRate: 60,
        backgroundColor: [1, 1, 1, 1]
    },

    initialize: function(element, options) {
        this.setOptions(options);
        this.element = element;
        this.createCanvas();
    },

    createCanvas: function() {
        this.canvas = new Element('canvas', {'id': this.options.name,
                                             'width': this.options.width,
                                             'height': this.options.height});
        try {
            gl = this.canvas.getContext('experimental-webgl');
            gl.viewport(0, 0, this.options.width, this.options.height);
            gl.clearColor(this.options.backgroundColor[0],
                          this.options.backgroundColor[1],
                          this.options.backgroundColor[2],
                          this.options.backgroundColor[3]);
        }
        catch (error) {
        }

        if (gl) {
            this.canvas.inject(this.element);
        }
        else {
            var alertDiv = new Element('div', {'class': 'webglet-alert'});
            alertDiv.set('text', 'WebGL not enabled');
            alertDiv.inject(this.element);
        }
    },

    draw: function() {
    },

    run: function() {
        this.draw.periodical(1000 / this.options.frameRate, this);
    },

    clear: function() {
        gl.clear(gl.COLOR_BUFFER_BIT);
    }
});


@@ -1091,32 +1091,345 @@
 (this.element);%0A
+            this.canvas.addEvent(%22click%22, this.preMouseClicked.bind(this));%0A            this.canvas.addEvent(%22mousedown%22, this.preMousePressed.bind(this));%0A            this.canvas.addEvent(%22mouseup%22, this.preMouseReleased.bind(this));%0A            this.canvas.addEvent(%22mousemove%22, this.preMouseMoved.bind(this));%0A
         %7D%0A      
@@ -1819,16 +1819,1040 @@
 R_BIT);%0A
+    %7D,%0A%0A    preMouseClicked: function(event) %7B%0A        var position = this.canvas.getPosition();%0A        this.mouseClicked(event.page.x - position.x,%0A                          event.page.y - position.y);%0A    %7D,%0A%0A    mouseClicked: function(mouseX, mouseY) %7B%0A    %7D,%0A%0A    preMousePressed: function(event) %7B%0A        var position = this.canvas.getPosition();%0A        this.mousePressed(event.page.x - position.x,%0A                          event.page.y - position.y);%0A    %7D,%0A%0A    mousePressed: function(mouseX, mouseY) %7B%0A    %7D,%0A%0A    preMouseReleased: function(event) %7B%0A        var position = this.canvas.getPosition();%0A        this.mouseReleased(event.page.x - position.x,%0A                           event.page.y - position.y);%0A    %7D,%0A%0A    mouseReleased: function(mouseX, mouseY) %7B%0A    %7D,%0A%0A    preMouseMoved: function(event) %7B%0A        var position = this.canvas.getPosition();%0A        this.mouseMoved(event.page.x - position.x,%0A                        event.page.y - position.y);%0A    %7D,%0A%0A    mouseMoved: function(mouseX, mouseY) %7B%0A
     %7D%0A%7D)

Add basic mouse event callbacks to App