//-------------------------------------------------------------------//
//                                                                   //
//                         MAKE SVG BUTTONS                          //
//                                                                   //
//-------------------------------------------------------------------//
// Makes radio buttons for changing chart
function make_buttons(chart_group, margins, canvas, maximum_drawing_space, button_array) {
    var radius = charts_config.plot_attributes.buttons.size / 2 // radius is half button font size
    var x = margins.axes.y + margins.x.left + radius // starting x locations
    var y = radius + margins.y.top

    var button_group
    if (chart_group.selectAll("g.buttons_group").empty()) {
      chart_group.append("g") // group for all buttons
                .attr("class", "buttons_group")
                .selectAll("g.buttons_group")
                .data(button_array)
                .enter()
                .append("g") // group for each button (circle and text)
                .attr("class", "button_group")

      var button_group = chart_group.selectAll("g.button_group")
      // add the circles
      button_group.append("circle")
                 .attr("r", radius)
                 .attr("class", "button_circle")
                 .attr("class", function(d, i) {return "button_circle_number" + i})
                 .on("click", button_click)
      // add the text
      button_group.append("text")
                 .attr("class", "button_text")
                 .text(function(d) {return d})
                 .attr("class", function(d, i) {return "button_text_number" + i})
                 .on("click", button_click)
    }
    button_group = chart_group.selectAll("g.button_group")
    // position the circles and text
    button_group.each(function(d, i) {
      var current_group = d3.select(this)
      var current_circle = current_group.select("circle")
      var current_text = current_group.select("text")
      if (i == 0) {
        current_circle.attr("cx", x)
                     .attr("cy", y)
                     .attr("fill", charts_config.plot_attributes.buttons.fill.not_selected)
                     .attr("stroke", charts_config.plot_attributes.buttons.stroke)

        current_text.attr("x", x + radius * 2)
                   .attr("y", y + radius / 2)
                   .text(function(d, i) {return d})
                   .attr("font-family", charts_config.plot_attributes.buttons.family)
                   .attr("font-size", charts_config.plot_attributes.buttons.size)
        margins.buttons = current_text.node().getBBox().y + current_text.node().getBBox().height + radius
      } else {
        var previous_text = button_group.select(".button_text_number" + (i-1))
        var previous_circle = button_group.select(".button_circle_number" + (i-1))
        var previous_text_box = previous_text.node().getBBox()
        var previous_circle_box = previous_circle.node().getBBox()

        var cx = previous_text_box.x + previous_text_box.width + radius * 2
        var cy = previous_circle_box.y + radius
        current_circle.attr("cx", cx)
                     .attr("cy", cy)
                     .attr("fill", charts_config.plot_attributes.buttons.fill["not_selected"])
                     .attr("stroke", charts_config.plot_attributes.buttons.stroke)
        current_text.attr("x", cx + radius * 2)
                   .attr("y", cy + radius / 2)
                   .text(function(d, i) {return d})
                   .attr("font-family", charts_config.plot_attributes.buttons.family)
                   .attr("font-size", charts_config.plot_attributes.buttons.size)

        var far_right_point = current_text.node().getBBox().x + current_text.node().getBBox().width
        var farthest_point_to_draw = canvas.x - margins.x.right

        if (far_right_point > farthest_point_to_draw) { //
           cx = x
           cy = previous_circle_box.y + radius * 4
           current_circle.attr("cx", cx)
                        .attr("cy", cy)
           current_text.attr("x", cx + radius * 2)
                      .attr("y", cy + radius / 2)
        }
        margins.buttons = current_text.node().getBBox().y + current_text.node().getBBox().height + radius
      }
    })
}

function button_click() {
  var current = d3.select(this).datum()
  charts_config.document_state.box_and_whiskers = current
  make_box_and_whiskers_chart(box_and_whiskers_data)
}


function color_buttons(chart_group, state) {
  chart_group.select("g.buttons_group").selectAll("circle").attr("fill", function (d, i) {
    if (d == state) {
      return charts_config.plot_attributes.buttons.fill.selected
    }
    return charts_config.plot_attributes.buttons.fill.not_selected
  })
}