A rectangle with two dynamic points

						JXG.Options.text.useKatex = true;
JXG.Options.axis.ticks.majorHeight = 10;
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.axis.ticks.ticksDistance = 100;
var board = JXG.JSXGraph.initBoard('box1', {
boundingbox:[-2, 10, 10, -2],showNavigation:false, showcopyright: false, axis: false,
});
var  h = board.create('slider',[[1, -1],[6.5,-1],[0,0,9.00]], {name:'h',digits:4});

var p1 = board.create('point', [1, 7],{fixed:true,size:0});
var p2 = board.create('point', [1, 1],{fixed:true,size:0});
var p3 = board.create('point', [9, 1],{fixed:true,size:0});
var p4 = board.create('point', [9, 7],{fixed:true,size:0});
var l1 = board.create('segment', [p1, p2]);
var l2 = board.create('segment', [p3, p2]);
var l3 = board.create('segment', [p3, p4]);
var l4 = board.create('segment', [p1, p4]);
var l5 = board.create('segment', [p1, p3]);
var m2 = board.create('point', [function(){return 9-h.Value() }, 1 ],{name:"Q",label:{offset:[-5,-15]}});
var m1 = board.create('point', [function(){return 1+2*(p3.X()-m2.X())*4/5}, function(){return p1.Y()-2*(p3.X()-m2.X())*3/5}],{name:"P"});

var l6 = board.create('segment', [m1, m2],);
var l7 = board.create('segment', [p3, m2]); 
var l8 = board.create('segment', [p3, m1]); 
 var pp1,hp,pp2,ho,pp3, ha;
 var  strcolor = l1.getAttribute("strokeColor")
h.on('drag',function(){
  if(l6.L().toFixed(1)==l7.L().toFixed(1)){
	 	 Init();
		l6.setAttribute({strokeColor:"red"});
		l7.setAttribute({strokeColor:"red"});
		if(pp1==undefined){
			pp1 = board.create('perpendicularpoint', [m2, l8],{size:0});
			hp = board.create('segment', [pp1, m2],{dash:2});
		}else{
			pp1.setAttribute({visible:true});
		 	hp.setAttribute({visible:true});
		}
	}  
	
	if(l7.L().toFixed(1)==l8.L().toFixed(1)){
		 Init();
		l7.setAttribute({strokeColor:"red"});
		l8.setAttribute({strokeColor:"red"});
 	if(pp2==undefined){
			pp2 = board.create('perpendicularpoint', [p3, l6],{size:0});
			ho = board.create('segment', [pp2, p3],{dash:2});
		}else{
			pp2.setAttribute({visible:true});
		 	ho.setAttribute({visible:true});
		} 
	}  
	if( l6.L().toFixed(1)==l8.L().toFixed(1)){		 
	 	Init();
	
		
		l6.setAttribute({strokeColor:"red"});
		l8.setAttribute({strokeColor:"red"});
		if(pp3==undefined){
			pp3 = board.create('perpendicularpoint', [m1, l7],{size:0});
			ha = board.create('segment', [pp3, m1],{dash:2});
		}else{
			pp3.setAttribute({visible:true});
		 	ha.setAttribute({visible:true});
		} 
	} 
	
	
});
function Init(){
		l6.setAttribute({strokeColor: strcolor});
		l7.setAttribute({strokeColor: strcolor});
		l8.setAttribute({strokeColor: strcolor});
		
		if(hp!=undefined){
			pp1.setAttribute({visible:false});
	 		hp.setAttribute({visible:false});
		}
		if(ho!=undefined){
		pp2.setAttribute({visible:false});
		ho.setAttribute({visible:false});
		}
		if(ha!=undefined){
		pp3.setAttribute({visible:false});
		ha.setAttribute({visible:false});
		}
	}