Tangent line to two circles

Step by step construction of tangent lines to two circles.

The underlying JavaScript code

        var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-8,8,8,-8]});
        o1 = brd.create('point', [-2, 2], {name: 'O1'});
        o2 = brd.create('point', [3, -3], {name: 'O2'});

        p1 = brd.create('point', [-3, 5], {name: 'P1'});
        p2 = brd.create('point', [2, -3], {name: 'P2'});

        c1 = brd.create('circle', [o1, p1]);
        c2 = brd.create('circle', [o2, p2]);

        m = brd.create('midpoint', [o1, o2], {name: 'M'});
        lm = brd.create('line', [o1, o2], {'strokeWidth': '1px', 'strokeColor':'gray'} );

        c3 = brd.create('circle', [m, o2], {'strokeColor':'green', strokeWidth: '1px'});

        c4 = brd.create('circle', [o1, function() {
                r1 = c1.Radius();
                r2 = c2.Radius();
                if(r1 > r2) {
                    return r1 - r2;
                } else {
                    return r2 + r1;
                }
        }], {'strokeColor': 'purple', strokeWidth: '1px'});

        i1 = brd.create('intersection', [c3,c4,0],{visible:true});
        i2 = brd.create('intersection', [c3,c4,1],{visible:true});

        l1 = brd.create('line', [o1, i1], {visible: false});
        l2 = brd.create('line', [o1, i2], {visible: false});

        i3 = brd.create('intersection', [c1,l1,0],{visible:true});
        i4 = brd.create('intersection', [c1,l2,0],{visible:true});

        v1 = brd.create('arrow', [o1, i3], {strokeColor: 'lightblue', strokeWidth: '1px'});
        v2 = brd.create('arrow', [o1, i4], {strokeColor: 'lightblue', strokeWidth: '1px'});

        l3 = brd.create('line', [i1, o1], {visible: false});
        l4 = brd.create('line', [o1, i2], {visible: false});

        t1 = brd.create('tangent', [c1, i3], {strokeColor:'darkblue'});
        t2 = brd.create('tangent', [c1, i4], {strokeColor:'darkblue'});

        t3 = brd.create('line', [o2, i1], {strokeColor:'pink'});
        t4 = brd.create('line', [o2, i2], {strokeColor:'pink'});