var app = angular.module('boxplotApp', []);
// CONTROLLER
app.controller('BoxplotController', ['$scope', '$interval',
  function($scope, $interval) {
    $scope.boxplot = {lift: {
      total: 0.2,
      variants: [{
        code: 'a',
        name: 'Primary',
        lift: 0.18
      }, {
        code: 'b',
        name: 'Secondary',
        lift: 0.22
      }]
    }}
}]);
// 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: {
      value: '='
    },
    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;

      //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", 0)
        .attr("x2", width/3)
        .attr("transform", "translate(0," + height/2 + ")");

      var quartilesHigh = boxPlot.append("line")
        .attr("x1", width/3*2)
        .attr("x2", width)
        .attr("transform", "translate(0," + height/2 + ")");

      var plotMean = boxPlot.append("circle")
        //.attr("x", width/2)
        .attr("r", 10)
        .attr("transform", "translate(" + width/2 + "," + height/2 + ")")
        .attr("class", "mean");

      var plotMean = boxPlot.append("circle")
        //.attr("x", width/2)
        .attr("r", 12)
        .attr("transform", "translate(" + width/4*3 + "," + height/2 + ")")
        .attr("class", "lift");
    }
  }
});