if(typeof Naxos == 'undefined')
    Naxos = {};

Naxos.graphics = {};

dojo.require("dojox.gfx");
dojo.require("dojox.gfx.move");


dojox.gfx.shape._extStyleEventHandling = {
    addListener: function(eventName, handler, scope, options) {
        var obj = {
            handler: handler,
            scope: scope,
            shape: this
        };
        if(eventName == "tofront") {
            dojo.connect(this, "moveToFront", obj, this.relayEvent);
        } else if(eventName == "toback") {
            dojo.connect(this, "moveToBack", obj, this.relayEvent);
        } else {
            dojo.connect(this.getEventSource(), eventName, obj, this.relayEvent);
        }
        
    },
    
    relayEvent: function(evt) {
        this.handler.call(this.scope, evt, this.shape);
    }
};

dojo.extend(dojox.gfx.Shape, dojox.gfx.shape._extStyleEventHandling);

dojox.gfx.shape._simpleTransformations = {
    rotate: function(dx, dy, angle) {
        this.setTransform(dojox.gfx.matrix.rotategAt(angle, dx, dy));
    }
};

dojo.extend(dojox.gfx.Shape, dojox.gfx.shape._simpleTransformations);

dojox.gfx.Moveable._extStyleEventHandling = {
    addListener: function(eventName, handler, scope, options) {
        var obj = {
            handler: handler,
            scope: scope
        };
        var events = { 'movestop': 'onMoveStop', 'movestart': 'onMoveStart', 'move': 'onMove' };
        var fname = events[eventName];
        if(fname != null) {
            dojo.connect(this, fname, obj, this.relayEvent);
        }
    },
    
    relayEvent: function(evt) {
        this.handler.call(this.scope, evt, evt.shape.shape ? evt.shape.shape : evt.shape, evt.shape.matrix);
    }
};

dojo.extend(dojox.gfx.Moveable, dojox.gfx.Moveable._extStyleEventHandling);

Naxos.graphics.Canvas = Ext.extend(Ext.BoxComponent, {
    initComponent: function() {
        Naxos.graphics.Canvas.superclass.initComponent.call(this);        
    },
    
    // private
    onRender: function(ct, position) {
        var w = this.width || ct.getWidth() - ct.getFrameWidth('lr') - ct.getMargins('lr');
        var h = this.height || ct.getHeight() - ct.getFrameWidth('tb') - ct.getMargins('tb');
        
        if(!this.tpl) {
            this.tpl = new Ext.Template(
                '<div class="nx-canvas">',
                '</div>'
            );                
        }
        
        var targs = [ w, h ];
        this.el = this.tpl.append(ct, targs);
        Ext.id(this.el);
        Naxos.graphics.Canvas.superclass.onRender.apply(this, arguments);
        
        dojo.connect(document, "ondragstart",   dojo, "stopEvent"),
        dojo.connect(document, "onselectstart", dojo, "stopEvent"),
        
	this.graphics = dojox.gfx.createSurface(this.el.id, w, h);
        this.graphics.makeMoveable = function(shape) {
            return(new dojox.gfx.Moveable(shape));
        };
    },
    
    getGraphics: function() {
        return(this.graphics);
    }
});