jsMedian.Insert(jsMedian.Simulation.prototype,{
  controls: {
    points: {1: {rows: 12, cols:23}},

    showhex: ["input",{
      type: "checkbox", className: "jsMedianShowCheckbox",
      title: "Draw the hexagon and its divisions",
      checked: 1,
      onclick: function () {
        var simulation = this.simulation();
        simulation.backdrop.showHex = this.checked;
        simulation.backdrop.Draw();
      }
    }],

    showwedge: ["input",{
      type: "checkbox", className: "jsMedianShowCheckbox",
      title: "Highlight the wedge of the closest vertex",
      checked: 1,
      onclick: function () {
        var simulation = this.simulation();
        simulation.backdrop.showWedge = this.checked;
        simulation.backdrop.DrawWedge();
      }
    }]
  },

  backdrop: {
    showHex: 1,
    showWedge: 1,
    divDef: {
      style: {position: "absolute", top: "0px", left: "0px",
              width: "100%", height: "100%"}
    },

    Init: function (sim) {
      this.sID = sim.id;
      var backdrop = sim.control("backdrop");
      this.graph = new jsGraphics(backdrop);
      sim.createElements(sim.control("showshort").parentNode,
                         ["<br>",[".showhex"],"Hexagon",
                          "<br>",[".showwedge"],"Winning Wedge"]);
      this.wedge = []; this.div = [];
      for (var i = 0; i < 6; i++) {
        var div = jsMedian.Element("div",this.divDef,{style: {display:"none"}});
        backdrop.appendChild(div);
        this.div[i] = div;
        this.wedge[i] = new jsGraphics(div);
        this.wedge[i].setColor("#88FF88");
        this.wedge[i].setStroke(3);
      }
      this.Draw();
      this.DrawWedge();
    },

    Draw: function () {
      this.graph.clear();
      var sim = this.simulation();
      var first = sim.dots.first, dot = first, mid = [], pos = [], i;
      while (dot) {
        var next = dot.next; if (!next) {next = first}
        pos[pos.length] = {x: dot.x, y: dot.y};
        mid[mid.length] = {x: (dot.x+next.x)/2, y: (dot.y+next.y)/2};
        dot = dot.next;
      }
      if (mid.length == 6) {
        pos[pos.length] = pos[0]; mid[mid.length] = mid[0];
        ctr = {x: (pos[0].x+pos[3].x)/2, y: (pos[0].y+pos[3].y)/2};
        if (this.showHex) {
          this.graph.setColor("#CCCCCC");
          for (i = 0; i < 6; i++) 
            {this.graph.drawLine(pos[i].x,pos[i].y,pos[i+1].x,pos[i+1].y);}
          for (i = 0; i < 3; i++)
            {this.graph.drawLine(mid[i].x,mid[i].y,mid[i+3].x,mid[i+3].y);}
        }
        for (i = 0; i < 6; i++) {
          this.wedge[i].clear();
          this.wedge[i].drawPolyline(
            [mid[i].x-1,pos[i+1].x-1,mid[i+1].x-1,ctr.x-1,mid[i].x-1],
            [mid[i].y-1,pos[i+1].y-1,mid[i+1].y-1,ctr.y-1,mid[i].y-1]
          );
          this.wedge[i].paint();
        }
      }
      this.graph.paint();
    },

    DrawWedge: function () {
      if (!this.sID) return;
      var sim = this.simulation();
      var i; var min = sim.shortest + sim.dots.SHORTESTFUZZ;
      for (i = 0; i < 6; i++) {this.div[i].style.display = "none"}
      if (this.showWedge) {
        var dot = sim.dots.first; i = 5;
        while (dot) {
          if (dot.distance < min) {this.div[i].style.display = ""}
          dot = dot.next; i++; if (i === 6) {i = 0}
        }
      }
    }
  }
});

jsMedian.Insert(jsMedian.DotList.prototype,{
  alwaysCalcShortest: 1,
  oldDrawLines: jsMedian.DotList.prototype.drawLines,
  drawLines: function () {
    this.oldDrawLines();
    if (!this.skipLines) {this.simulation().backdrop.DrawWedge();}
  }
});