Proof of The Pythagorean Theorem by areas

							var board = JXG.JSXGraph.initBoard('box1', {
        axis: true, boundingbox: [-10, 10, 10, -10], showcopyright: false,keepaspectratio: true, zoom: true, axis: false,showNavigation: false,
    });

var  a = board.create('slider',[[-2,-7],[4,-7],[-4.2,0.71,1]], {name:'a'});
  var  b = board.create('slider',[[-2,-9],[4,-9],[1.8,3.78,6]], {name:'b'});
	
var p1 = board.create('point', [-5, function(){return b.Value()}],{name:'A', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}} );	
var p2 = board.create('point', [-5, 1],{name:'C', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}} );	

var p3 = board.create('point', [function(){return a.Value()}, 1],{name:'B', size: 1,face:"", color:'blue', label: {offset:[10,10], color:'blue'}} );	

//var p4 = board.create('point', [-8, 4],{name:'D', size: 1,face:"", color:'blue', label: {offset:[-15,10], color:'blue'}} );

var l1 = board.create('segment', [p1, p2],{strokeWidth:1});
var l2 = board.create('segment', [p2, p3],{strokeWidth:1});
var l3 = board.create('segment', [p1, p3],{strokeWidth:1});


var pol =  board.create('regularpolygon',[p2,p1,4], {withLines: true, fillColor:'blue', highlightFillColor:'none',	vertices:{face:'',label: { color:'blue'}} });

var att = pol.vertices[3].getAttributes();

var po2 =  board.create('regularpolygon',[p3,p2,4], {withLines: true, fillColor:'red',highlightFillColor:'#333',	vertices:{face:'',label: { color:'blue'}} });

var po3 =  board.create('regularpolygon',[p1,p3,4], {withLines: true,  fillColor:'none', highlightFillColor:'none',	vertices:{face:'',label: { color:'blue'}} });


//pol.vertices[3].setLabel("H")

var pp1 = board.create('perpendicularpoint', [p2, l3],{ size: 1,  color:'blue',face:'', label: {offset:[12,5], color:'blue'
}} );

var l4 = board.create('line', [p2, pp1],{visible: false});
//alert(pol3.borders[1])

var l5 =  board.create('segment', [po3.vertices[3], po3.vertices[2]],{strokeWidth:1});
var i1 = board.create('intersection', [l4,l5],{ visible: true,face:'' });

var l6 =  board.create('segment', [p2, i1],{strokeWidth:1});

var l7 =  board.create('segment', [p1, po2.vertices[3]],{dash:2});

var l8 =  board.create('segment', [p2, po3.vertices[2]],{dash:2});

var po4 =  board.create('polygon',[pp1, po3.vertices[1], po3.vertices[2],i1], {withLines: true,  fillColor:'red', highlightFillColor:'none',	vertices:{face:'',label: { color:'blue'}} });

var po5 =  board.create('polygon',[pp1, i1, po3.vertices[3], p1], {withLines: true,  fillColor:'blue', highlightFillColor:'none',	vertices:{face:'',label: { color:'blue'}} });