<script type="text/javascript" src="cfg/math/mathsvg.js"></script></script>
  <embed width="400" height="240" src="../media/d.svg" onmousemove="update()"
  script='
    initPicture(-5,5,0)
    A = [5,0]
    B = [-5,0]
    O = [0,0]
    t = -2
    update()
  '>
  <embed width="440" height="240" src="../media/d.svg" onmousemove="update2()"
  script='
    initPicture(-6,6,0)
    a = 2
    s = 5
    update2()
  '>
  <script>
  function update() {
    switchTo("picture1")
    C = [t,Math.sqrt(25-Math.pow(t,2))]
    stroke = "red"
    path([A,B,C,A],"triangle")
    text([(B[0]+C[0])/2,(B[1]+C[1])/2],"a","aboveleft","alabel")
    text([(A[0]+C[0])/2,(A[1]+C[1])/2],"b","aboveright","blabel")
    text([(B[0]+C[0])/2,0],"d","below","dlabel")
    text([(A[0]+C[0])/2,0],"c-d","below","cdlabel")
    stroke = "black"
    line([C[0],0],C,"vertical")
    t = Math.max(Math.min(getX(),5),-5)
  }
  function rtriangle(x,y,a,b,id) {
    path([[x,y],[x,y+b],[x+a,y],[x,y]],id)
  }
  function update2() {
    switchTo("picture2")
    b = s-a
    x = 1
    y = 0.5
    stroke = "black"
    fill = "green"
    path([[x+a,y],[x,y+b],[x+b,y+s],[x+s,y+a],[x+a,y]],"csquare")
    fill = "yellow"
    rtriangle(x,y,a,b,"tcl")
    rtriangle(x,y+s,b,-a,"tca")
    rtriangle(x+s,y+s,-a,-b,"tcr")
    rtriangle(x+s,y,-b,a,"tcb")
    x = -1-s
    y = 0.5
    rtriangle(x,y,a,b,"tl")
    rtriangle(x+a,y+s,b,-a,"ta")
    rtriangle(x+a,y+b,-a,-b,"tr")
    rtriangle(x+s,y+b,-b,a,"tb")
    fill = "red"
    rect([x,y+b],[x+a,y+s],"asquare")
    fill = "blue"
    rect([x+a,y],[x+s,y+b],"bsquare")
    a = getX()+s+1
  }
  </script>