Ext.ns('OXX.Msg');






OXX.Msg = Ext.extend(Object, {

    msgId: '',
    paper: null,
    rect: null,
    containerEl: null,
    border: 10,

    constructor: function(config) {
        Ext.apply(this, config);

    },


    render: function(msg) {
        var t = new Ext.Template(this.getBoxTemplate());
        t.append(Ext.fly('contentarea'), { msg: msg});

        var rd = this.getRectangleEl('msg', this.border);

        this.paper = Raphael(rd[0] - 10, rd[1] - 10, rd[2] + 20, rd[3] + 20);

        this.rect = this.paper.rect(this.border * 1.5, this.border * 1.5, rd[2] - this.border - 5, rd[3] - this.border - 5, 10);

        this.rect.attr({
            'stroke': '#FF0000',
            'stroke-width': 20,
            'stroke-linecap': 'round',
            opacity: 0.1,
            'fill': '#000000',
            'fill-opacity': 0.1
        });

        this.rect.animate({
            'stroke': '#CF1E15',
            'stroke-width': 20,
            'stroke-linecap': 'round',
            opacity: 0.9,
            'fill': '#D72A40',
            'fill-opacity': 0.8
        }, 1000);




    },




    // Inject the raffy 
    //
    injectGfx: function() {

    },



    getBoxTemplate: function() {
        return [
            '<div class="container" id="msg">',
                '<div class="body">',
                    '<div class="txt">{msg}</div>',
                 '</div>',
            '</div>'
        ];
    },



    //
    // Finds and returns a rectangle element
    // since both are shitheads, we gonna do it the showboyway !
    // 
    getRectangleEl: function(elId, border) {

        var rect = [0, 0, 0, 0];
        var xy = Ext.fly(elId).getXY();
        var w = Ext.fly(elId).getWidth() + border * 2;
        var h = Ext.fly(elId).getHeight() + border * 2;
        var x = xy[0] - border;
        var y = xy[1] - border;

        return [x, y, w, h];
    },

    show: function(msg) {
        this.render(msg);


    },


    hide: function() {

    }



});