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'});