//-------------------------------------------------------------------//
//                                                                   //
//                            MAKE AXES                              //
//                                                                   //
//-------------------------------------------------------------------//
function calculate_space_needed_by_axes(chart_group, data_extent, margins) {
  // Temporary SVG group element to calculate size of dummy axes then be removed
  var temp = chart_group.append("g").attr("class", "temp")

  // Dummy scales. Use max and min to get accurate measurement for length of ticks
  var x_scale = d3.scaleLinear().domain([data_extent.min.x, data_extent.max.x]).range([0, 1])
  var y_scale = d3.scaleLinear().domain([data_extent.min.y, data_extent.max.y]).range([0, 1])

  // Make the axes
  var x_axis_scaled = d3.axisBottom().scale(x_scale).tickSize(charts_config.plot_attributes.axes.ticks.size).ticks(6)
  var y_axis_scaled = d3.axisLeft().scale(y_scale).tickSize(charts_config.plot_attributes.axes.ticks.size).ticks(6)

  // Place and maintain the axis as an SVG object
  var x_axis= temp.append("g").attr("class", "temp").call(x_axis_scaled).attr("font-size", charts_config.plot_attributes.axes.size).attr("font-family", charts_config.plot_attributes.axes.family)
  var y_axis= temp.append("g").attr("class", "temp").call(y_axis_scaled).attr("font-size", charts_config.plot_attributes.axes.size).attr("font-family", charts_config.plot_attributes.axes.family)

  // Add the axes labels. y-axis is rotated
  var x_axis_label = temp.append("text").text("temp").attr("font-family", charts_config.plot_attributes.axes.labels.family).attr("font-size", charts_config.plot_attributes.axes.labels.size)
  var y_axis_label = temp.append("text").text("temp").attr("font-family", charts_config.plot_attributes.axes.labels.family).attr("font-size", charts_config.plot_attributes.axes.labels.size).attr("transform", "rotate(-90)")

  // Retrieve the rectangle encapsulating the text labels and the axes
  var x_axis_label_box = x_axis_label.node().getBBox()
  var y_axis_label_box = y_axis_label.node().getBBox()
  var x_axis_box = x_axis.node().getBBox()
  var y_axis_box = y_axis.node().getBBox()


  // Calculate the total space consumed by these items
  var x_axis_space_consumed = x_axis_label_box.height + x_axis_box.height + margins.axes.label_space
  var y_axis_space_consumed = y_axis_label_box.height + y_axis_box.width + margins.axes.label_space

  // Remove these SVG elements
  temp.remove()
  return {"x": x_axis_space_consumed, "y": y_axis_space_consumed}
}

function make_axes(chart_group, x_scale, y_scale, canvas, margins, maximum_drawing_space, x_label, y_label, custom_ticks=false) {
  var axes, x_axis_label, y_axis_label, x_axis, y_axis
  // If first call make all groups needed
  if (chart_group.select("g.axes").empty()) {
    axes = chart_group.append("g").attr("class", "axes")
    x_axis_label = axes.append("text").attr("class", "x_axis_label")
    y_axis_label = axes.append("text").attr("class", "y_axis_label")
    x_axis= axes.append("g").attr("class", "x_axis")
    y_axis= axes.append("g").attr("class", "y_axis")
  }

  axes = chart_group.select("g.axes")
  var x_axis_scaled = d3.axisBottom().scale(x_scale).tickSize(charts_config.plot_attributes.axes.ticks.size).ticks(6)
  var y_axis_scaled = d3.axisLeft().scale(y_scale).tickSize(charts_config.plot_attributes.axes.ticks.size).ticks(6)
  var center = {"x": margins.x.left + margins.axes.y + maximum_drawing_space.x / 2,"y": margins.y.top +  margins.buttons + margins.title + maximum_drawing_space.y / 2}

  if (custom_ticks!=false) {
    x_axis_scaled.tickFormat(function (d, i) {return custom_ticks[i]}).ticks(custom_ticks.length)
  }



  x_axis_label = axes.select("text.x_axis_label").text(x_label).attr("font-family", charts_config.plot_attributes.axes.labels.family).attr("font-size", charts_config.plot_attributes.axes.labels.size).attr("transform", "translate(" + center.x + "," + (canvas.y - margins.y.bottom)+")").attr("text-anchor", "middle")
  y_axis_label = axes.select("text.y_axis_label").text(y_label).attr("font-family", charts_config.plot_attributes.axes.labels.family).attr("font-size", charts_config.plot_attributes.axes.labels.size).attr("transform", "translate(" + margins.x.left + "," + center.y + ") rotate(-90)").attr("text-anchor", "middle")

  var x_axis_label_box = x_axis_label.node().getBBox()
  var y_axis_label_box = y_axis_label.node().getBBox()

  var x_axis_y = margins.axes.x + margins.y.bottom
  var y_axis_x = margins.axes.y + margins.x.left
  x_axis= axes.select("g.x_axis").transition().duration(500).call(x_axis_scaled)
                 .attr("transform", "translate(" + (margins.x.left + margins.axes.y) + "," + (canvas.y - x_axis_y)+")")
                 .attr("font-size", charts_config.plot_attributes.axes.size)
                 .attr("font-family", charts_config.plot_attributes.axes.family)



  y_axis= axes.select("g.y_axis").transition().duration(500).call(y_axis_scaled)
                 .attr("font-size", charts_config.plot_attributes.axes.size)
                 .attr("font-family", charts_config.plot_attributes.axes.family)
                 .attr("transform", "translate(" + y_axis_x + "," + (center.y - maximum_drawing_space.y / 2)+")")

}