text: JXG.Options.text.display = 'internal';
  var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-10,10,10,-10], axis:false,showCopyright:false,showNavigation:false});
  
  var a = brd.create('point',[-5,-5],{fixed:true,color:"#000000"});
  var b = brd.create('point',[-3,5],{fixed:true,color:"#000000"});
  var c = brd.create('point',[5,-5],{fixed:true,color:"#000000"});
  
  var ab = brd.create('segment',[a,b],{color:"#000000"});
  var bc = brd.create('segment',[b,c],{color:"#000000"});
  var ca = brd.create('segment',[c,a],{color:"#000000"});
  
  var d = brd.create('point',[(a.X()+b.X())/2,(a.Y()+b.Y())/2],{attractors: [ab], attractorDistance:0.01, snatchDistance: 50});
  var e = brd.create('point',[(b.X()+c.X())/2,(b.Y()+c.Y())/2],{attractors: [bc], attractorDistance:0.01, snatchDistance: 50});
  var f = brd.create('point',[(c.X()+a.X())/2,(c.Y()+a.Y())/2],{fixed:true,color:"#000000",attractors: [ca], attractorDistance:0.01, snatchDistance: 50});
  
  var de = brd.create('segment',[d,e],{strokeColor:"#ff0000"});
  var ef = brd.create('segment',[e,f],{strokeColor:"#ffff00"});
  var fd = brd.create('segment',[f,d],{strokeColor:"#ffa500"});
  
  var fprime = brd.create('reflection',[f,ab],{name:"F'",visible:false,color:"#000000"});
  var fprimeprime = brd.create('reflection',[f,bc],{name:"F''",visible:false,color:"#000000"});
  
  var fprimed = brd.create('segment',[fprime,d],{visible:false,strokeColor:"#ffa500"});
  var fprimeprimee = brd.create('segment',[fprimeprime,e],{visible:false,strokeColor:"#ffff00"});
  
  var fprimefprimeprime = brd.create('segment',[fprime,fprimeprime],{visible:false});
  var dactual = brd.create('intersection',[fprimefprimeprime,ab],{visible:false});
  var eactual = brd.create('intersection',[fprimefprimeprime,bc],{visible:false});
  
  function perimeter() {
  	return d.Dist(f)+f.Dist(e)+e.Dist(d);
  }
  var textPerimeter = brd.create('text',[2,8,function(){return "Perimeter = "+perimeter().toFixed(2)}],{fontSize:18})
  
  var currentStage = 0;
  var maxStage = 3;
  var allHiddenEles = [fprime,fprimeprime,fprimed,fprimeprimee,fprimefprimeprime];
  function hideEles(){
  	for (var i=0;i<allHiddenEles.length;i++){
  		allHiddenEles[i].setAttribute({visible:false});
  	}
  	return false;
  }
  function ge(eleIdList) {
  	var newlist = eleIdList.map(function (x) {return document.getElementById(x);});
  	return newlist;
  }
  var allHiddenTexts = ge(["main1","main2","main3"]);
  function hideTexts(){
  	for (var i=0;i<allHiddenTexts.length;i++){
  		allHiddenTexts[i].style.visibility = 'hidden';
  	}
  	return false;
  }
  hideTexts();
  var visList = [
  {
  	texts:ge(["main0"]),
  	eles:[]
  },
  {
  	texts:ge(["main0","main1"]),
  	eles:[]
  },
  {
  	texts:ge(["main0","main1","main2"]),
  	eles:[fprime,fprimeprime,fprimeprimee,fprimed]
  },
  {
  	texts:ge(["main0","main1","main2","main3"]),
  	eles:[fprime,fprimeprime,fprimeprimee,fprimed,fprimefprimeprime]
  }
  ]
  
  function increment(inc) {
  	currentStage = currentStage + inc;
  	console.log("currentStage = "+currentStage)
  	if (currentStage < 0) {
  		currentStage = 0;
  	}
  	if (currentStage > maxStage) {
  		currentStage = maxStage;
  	}
  	var visEles = visList[currentStage].eles;
  	var visTexts = visList[currentStage].texts;
  	hideEles();
  	hideTexts();
  	for (var i=0;i<visEles.length;i++){
  		visEles[i].setAttribute({visible:true});
  	}
  	for (var i=0;i<visTexts.length;i++){
  		visTexts[i].style.visibility = 'visible';
  	}
  }