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

//= require "canvas.js"
   
ft.RoundedRect = Class.create(ft.Canvas, {
  
    initialize: function($super, id_or_elem)
    {
        $super(id_or_elem);
        
        var value = this.elem.readAttribute('value');
        var rrs = value? value.split(' ') : [];
        var nr = rrs.length;
        this.rTopLeft = this.rTopRight = this.rBottomRight = this.rBottomLeft = 0;
        if (nr >= 1)
            this.rTopLeft = Number(rrs[0]);
        if (nr >= 2)
            this.rTopRight = Number(rrs[1]);
        if (nr >= 3)
            this.rBottomRight = Number(rrs[2]);
        if (nr >= 4)
            this.rBottomLeft = Number(rrs[3]);
        if (nr >= 5)
            this.fillColor = rrs[4]!='none'? rrs[4] : null;
        if (nr >= 6)
            this.strokeColor = rrs[5]!='none'? rrs[5] : null;
        if (nr >= 7)
            this.lineWidth = rrs[6];
            
    },

    //--------------------------------------------------------------------------
    /* Does the specific drawing for a RoundedRect (as an instance of Canvas)
     *
     * @param ctx: canvas context to draw on.
     */
    draw: function(ctx)
    {
        if (this.fillColor)
            ctx.fillStyle = this.fillColor;
        if (this.strokeColor)
            ctx.strokeStyle = this.strokeColor;
        if (this.lineWidth)
            ctx.lineWidth = this.lineWidth;
            
        ctx.lineJoin = 'round';
            
        ctx.beginPath();
        ctx.moveTo(this.rTopLeft, 0);
        ctx.lineTo(this.width - this.rTopRight, 0);

        // The arcTo method is not implemented in most Canvas implementaions,
        // and the arc method is implemented inconsistently, so to draw rounded
        // corners as circle quadrants we approximate them using the bezierTo
        // method, which is the only curve method implemented consistently
        // across browsers.
        // Use factor from "Drawing a circle with Bézier Curves" at:
        //         http://www.whizkidtech.redprince.net/bezier/circle/
        var ckappa = 1 - 0.5522847498;
        
        if (this.rTopRight)
            ctx.bezierCurveTo(this.width - this.rTopRight*ckappa, 0,
                              this.width, this.rTopRight*ckappa,
                              this.width, this.rTopRight);

        ctx.lineTo(this.width, this.height - this.rBottomRight);
        
        if (this.rBottomRight)
            ctx.bezierCurveTo(this.width, this.height - this.rBottomRight*ckappa,
                              this.width - this.rBottomRight*ckappa, this.height,
                              this.width - this.rBottomRight, this.height);
        
        ctx.lineTo(this.rBottomLeft, this.height);
        
        if (this.rBottomLeft)
            ctx.bezierCurveTo(this.rBottomLeft*ckappa, this.height,
                              0, this.height - this.rBottomLeft*ckappa,
                              0, this.height - this.rBottomLeft);
        
        ctx.lineTo(0, this.rTopLeft);
        
        if (this.rTopLeft)
            ctx.bezierCurveTo(0, this.rTopLeft*ckappa,
                              this.rTopLeft*ckappa, 0,
                              this.rTopLeft, 0);

        if (this.fillColor)
            ctx.fill();

        if (this.strokeColor)
            ctx.stroke();
    }
    
});

//------------------------------------------------------------------------------
/* Goes through all canvas elements on a page with a given class name, and
 * tells them to paint themselves.
 * 
 * @param className class name used to identify RoundedRect's among all canvas
 *      elements; if ommitted, the default used is: "rounded_rect"
 */
ft.RoundedRect.InitAll = function(className)
{
    if (!className)
        className = "rounded_rect";
    $$('canvas.' + className).each(function(elem) {
       var rr = new ft.RoundedRect(elem);
       rr.paint();
    });
};