using Blink
import Blink: JSString

# === styling utility ===

style!(w, stylesheet) = @js win begin
  @var style = document.createElement("style");
  style.appendChild(document.createTextNode($stylesheet));
  document.head.appendChild(style);
end

# === page source ===

stylesheet = """
body {
  background-color: #ffe0f0;
}

/* needed to keep Ganja canvas from blowing up */
canvas {
  min-width: 600px;
  max-width: 600px;
  min-height: 600px;
  max-height: 600px;
}
"""

# the "points spheres plane" example from the Ganja coffee shop
#
#   https://enkimute.github.io/ganja.js/examples/coffeeshop.html#cga3d_points_spheres_planes
#
sphere_example = """
Algebra(4, 1, ()=>{
  // We start by defining a null basis, and upcasting for points
  var ni = 1e4+1e5, no = .5e5-.5e4;
  var up = (x)=> no + x + .5*x*x*ni;
  
  // Next we'll define 4 points
  var p1 = up(1e1), p2 = up(1e2), p3 = up(-1e3), p4 = up(-1e2);
  
  // The outer product can be used to construct the sphere through
  // any four points. 
  var s = ()=>p1^p2^p3^p4;
  
  // The outer product between any three points and infinity is a plane.
  var p = ()=>p1^p2^p3^ni;
  
  // Graph the items.  
  document.body.appendChild(this.graph([
    0x00FF0000, p1, "p1", p2, "p2", p3, "p3", p4, "p4", // points
    0xE0008800, p, "p",                                 // plane
    0xE00000FF, s, "s"                                  // sphere
  ], {conformal: true, gl: true, grid: true}));
});
"""

# === page construction ===

# create window and open developer console
win = Window()
opentools(win)

# set stylesheet
style!(win, stylesheet)

# load Ganja.js
loadjs!(win, "https://unpkg.com/ganja.js")

# launch Ganja visualization
body!(win, "", async=false)
js(win, JSString(sphere_example))