//= namespace ft
if (typeof(ft) == 'undefined') ft = {};

//= require "utils.js"
//= require <prototype.js>

ft.Canvas = Class.create({
    
    initialize: function(id_or_elem)
    {
        this.elem = $(id_or_elem);
        this.width = Number(this.elem.getAttribute("width"));
        this.height = Number(this.elem.getAttribute("height"));
        this.overlayContent();
    },
    
    paint: function()
    {
        var canvas = this.elem;
        // Use fake canvas for IE, unless it's 9+
        if (ft.Utils.IsIE8())
            canvas = G_vmlCanvasManager.initElement(canvas);

        canvas.width = this.width;
        canvas.height = this.height;
        
        var ctx = canvas.getContext('2d');
        
        this.draw(ctx);
    },
    
    draw: function()
    {
        // do nothing by default
    },
    
    
    //-------------------------------------------------------------------------
    /** Positions div that is sibling of canvas containing div so that it
     * overlays the canvas div on the page, so that canvas behaves as a
     * background of the sibling (content) div.
     */
    overlayContent: function()
    {
        // For IE6 use special absolute-positioned solution
        if (ft.Utils.IsIE6())
        {
            // If initial overlay is done (there is a content div), we must
            // set up event listener to actively preserve this overlaying
            // when the window is resized.
            if (this.overlayContentAbsolute())
            {
                var cthis = this;
                Element.observe(window, 'resize', function() {
                    cthis.overlayContentAbsolute();
                });
            }
        }
        // For all other browsers do relative positioning. Has the advantage
        // that it doesn't need dynamic adjustment on window resizes.
        else
            this.overlayContentRelative();
    },

    //-------------------------------------------------------------------------
    /** Does the content overlaying by making its position relative and
     * adjusting other position parameters. Works on all browser but IE6.
     */
    overlayContentRelative : function()
    {
        var canvasDiv = this.elem.up();
        var contentDiv = canvasDiv.next();
        if (contentDiv)
        {
            var sPadTop = contentDiv.getStyle('padding-top');
            var padTop = sPadTop? Number(sPadTop.replace(/\D/g,'')) : 0;
            var top = -(this.height - padTop);
            contentDiv.setStyle({position:'relative',
                                 height:'0',
                                 left:'0',
                                 top:top+'px', paddingTop:'0'});
        }            
    },
    
    //-------------------------------------------------------------------------
    /** Does the content overlaying by making its position absolute and
     * adjusting other position parameters. Works on IE6.
     */
    overlayContentAbsolute : function()
    {
        var canvasDiv = this.elem.up();
        var contentDiv = canvasDiv.next();
        if (contentDiv)
        {
            var offset = canvasDiv.cumulativeOffset();
            var top = offset.top;
            var sPadRight = contentDiv.getStyle('padding-right');
            var padRight = sPadRight? Number(sPadRight.replace(/\D/g,'')) : 0;
            var left = offset.left - padRight;

            contentDiv.setStyle({position:'absolute', left:left+'px', top:top+'px'});

            if (canvasDiv.getStyle('text-align') == 'right')
                contentDiv.setStyle({width:canvasDiv.getWidth()+'px'});
            
            return true;
        }
        return false;
    }
});