// This is the main program that sets up a scatter plot to visualize the Iris data set.
// Curran Kelleher March 2015
require(["scatterPlot", "generateColors"], function (ScatterPlot, generateColors) {

  // Initialize the scatter plot.
  var options = {
    
    // Tell the visualization which DOM element to insert itself into.
    container: d3.select("#container").node(),

    // Specify the margin and text label offsets.
    margin: {
      top: 10,
      right: 10,
      bottom: 45,
      left: 55
    },
    yAxisLabelOffset: 1.8, // Unit is CSS "em"s
    xAxisLabelOffset: 1.9,
    titleOffset: 0.3
  };
  var scatterPlot1 = ScatterPlot(options);
  var scatterPlot2 = ScatterPlot(options);
  var scatterPlot3 = ScatterPlot(options);
  var scatterPlot4 = ScatterPlot(options);

  // Fetch the column metadata.
  d3.json("iris-metadata.json", function (metadata) {

    var xColumn = "sepal_length",
        yColumn = "petal_length",
        sizeColumn = "petal_width",
        colorColumn = "class",
        xyOptions = {
          xColumn: xColumn,
          xAxisLabel: metadata[xColumn].label,
          yColumn: yColumn,
          yAxisLabel: metadata[yColumn].label
        };

    // Use the same X and Y for all plots.
    scatterPlot1.set(xyOptions);
    scatterPlot2.set(xyOptions);
    scatterPlot3.set(xyOptions);
    scatterPlot4.set(xyOptions);

    // Use X, Y, and size for the second scatter plot.
    scatterPlot2.sizeColumn = sizeColumn;

    // Use X, Y, and color for the third scatter plot.
    scatterPlot3.colorColumn = colorColumn;
    scatterPlot3.colorRange = d3.scale.category10().range();

    // Use X, Y, size, and color for the fourth scatter plot.
    scatterPlot4.sizeColumn = sizeColumn;
    scatterPlot4.colorColumn = colorColumn;
    scatterPlot4.colorRange = scatterPlot3.colorRange;

    // Load the data from a CSV file.
    d3.csv("iris.csv", function (data){

      // Parse quantitative values from strings to numbers.
      var quantitativeColumns = Object.keys(metadata).filter(function (column){
        return metadata[column].type === "Q";
      });
      data.forEach(function (d){
        quantitativeColumns.forEach(function (column){
          d[column] = parseFloat(d[column]);
        });
      });

      // Pass the data into the plots.
      scatterPlot1.data = data;
      scatterPlot2.data = data;
      scatterPlot3.data = data;
      scatterPlot4.data = data;
    });
  });

  // Sets the `box` model property
  // based on the size of the container,
  function computeBoxes(){
    var width = container.clientWidth,
        height = container.clientHeight,
        padding = 10,
        plotWidth = (width - padding * 4) / 3,
        plotHeight = (height - padding * 3) / 2;
    scatterPlot1.box = {
      x: padding,
      y: height / 2 - plotHeight / 2,
      width: plotWidth,
      height: plotHeight
    };
    scatterPlot2.box = {
      x: plotWidth + padding * 2,
      y: padding,
      width: plotWidth,
      height: plotHeight
    };
    scatterPlot3.box = {
      x: plotWidth + padding * 2,
      y: plotHeight + padding * 2,
      width: plotWidth,
      height: plotHeight
    };
    scatterPlot4.box = {
      x: plotWidth * 2 + padding * 3,
      y: height / 2 - plotHeight / 2,
      width: plotWidth,
      height: plotHeight
    };
  }

  // once to initialize `model.box`, and
  computeBoxes();

  // whenever the browser window resizes in the future.
  window.addEventListener("resize", computeBoxes);
});