var app = angular.module('boxplotApp', []);
// CONTROLLER
app.controller('BoxplotController', ['$scope', '$interval',
  function($scope, $interval) {
    $scope.boxplotData = {
      total: 0.2,
      variants: [{
        code: 'a',
        name: 'Primary',
        lift: 0.18,
        range: [0.01,0.2],
        quartiles: [0.08,0.1,0.15,0.18]
      }, {
        code: 'b',
        name: 'Secondary',
        lift: 0.22,
        range: [0,0.4],
        quartiles: [0.03,0.11,0.21,0.3] 
      }]
    }
}]);
// DIRECTIVE
app.directive('boxplotChart', function($parse, $window) {
  return {
    restrict: 'EA',
    //THIS NEEDS REPLACEMENT FOR RESPONSIVE WIDTH/HEIGHT
    template: "<svg></svg>",
    // Uncomment once prepared for craziness
    scope: {
      chartData: '='
    },
    link: function(scope, elem, attrs) {
      scope.safeApply = scope.$root.safeApply;

      var d3 = $window.d3,
        rawSvg = elem.find('svg');

      var margin = {top: 10, right: 10, bottom: 10, left: 10},
        width = 300 - margin.left - margin.right,
        height = 80 - margin.top - margin.bottom;

       // Tristan - replace this with whatever works to use this directive once per variant;
      // For this example I'm just forcing it to use the first variant:
      var plotVariant = scope.chartData.variants[0];
      
      var x1 = d3.scale.linear()
        .domain(plotVariant.range)
        .range([0,width]);

      //SET SVG SIZE
      var boxPlot = d3.select(rawSvg[0])
        .attr("width", width)
        .attr("height", height)
        .attr("class","boxPlot");

      var quartilesLow = boxPlot.append("line")
        .attr("x1", x1(plotVariant.range[0]))
        .attr("x2", x1(plotVariant.quartiles[0]))
        .attr("transform", "translate(0," + height/2 + ")");

      var quartilesHigh = boxPlot.append("line")
        .attr("x1", x1(plotVariant.quartiles[2]))
        .attr("x2", x1(plotVariant.range[1]))
        .attr("transform", "translate(0," + height/2 + ")");

      var plotMax = boxPlot.append("line")
        .attr("y1", height/3.35)
        .attr("y2", height/1.45)
        .attr("transform", "translate(" + x1(plotVariant.range[1]) + ",0)")
        .attr("class", "max");

      var plotMin = boxPlot.append("line")
        .attr("y1", height/3.35)
        .attr("y2", height/1.45)
        .attr("transform", "translate(" + x1(plotVariant.range[0]) + ",0)")
        .attr("class", "min");

      var quartilesMid = boxPlot.append("rect")
        .attr("height",height/2)
        .attr("width",x1(plotVariant.quartiles[2]) - x1(plotVariant.quartiles[0]))
        .attr("transform", "translate(" + x1(plotVariant.quartiles[0]) + "," + height/4 + ")");

      var plotMedian = boxPlot.append("line")
        .attr("y1", height/4)
        .attr("y2", height/1.35)
        .attr("transform", "translate(" + x1(plotVariant.quartiles[1]) + ",0)")
        .attr("class", "median");

      var plotLift = boxPlot.append("line")
        .attr("y1", height/4)
        .attr("y2", height/1.35)
        .attr("transform", "translate(" + x1(plotVariant.lift) + ",0)")
        .attr("class", "lift");

      var plotLiftHalo = boxPlot.append("line")
        .attr("y1", height/4)
        .attr("y2", height/1.35)
        .attr("transform", "translate(" + x1(plotVariant.lift) + ",0)")
        .attr("class", "liftHalo");
    }
  }
});