BarChart.prototype = new DexComponent();
BarChart.constructor = BarChart;

function BarChart(userConfig)
{
  DexComponent.call(this, userConfig,
  {
    parent             : null,
    labels             : [ "X", "Y" ],
    id                 : "BarChart",
    data               : [[0,0],[1,1],[2,4],[3,9],[4,16]],
    width              : 600,
    height             : 400,
    xi                 : 0,
    yi                 : [1],
    xoffset            : 0,
    yoffset            : 0,
    barColors          : d3.scale.category20(),
    yaxisLabel         : "Y",
    yaxisLabelFontSize : 10,
    xaxisLabel         : "X",
    xaxisLabelFontSize : 10,
    yaxisFormat        : ".f",
    xmin : null,
    ymin : null
  });

  // Ugly, but my JavaScript is weak.  When in handler functions
  // this seems to be the only way to get linked back to the
  // this.x variables.
  this.chart = this;
}

BarChart.prototype.render = function()
{
  this.update();
};

BarChart.prototype.update = function()
{
  // If we need to call super:
	//DexComponent.prototype.update.call(this);
 	var chart = this.chart;
  var config = this.config;

  var yaxisFormat = d3.format(config.yaxisFormat);

  // X domain across groups.
  var x = d3.scale.ordinal()
    .domain(d3.range(config.data.length))
    .rangeBands([0, config.width], .1);

  // X domain within groups.
  var x1 = d3.scale.ordinal()
    .domain(d3.range(config.yi.length))
    .rangeBands([0, x.rangeBand()]);

  // Y domain.
  var y = d3.scale.linear()
    .range([config.height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(yaxisFormat);

  var chartContainer = config.parent.append("g")
    .attr("id", config.id)
    .attr("transform", "translate(" + config.xoffset + "," + config.yoffset + ")");

  var data = config.data;  

  // Translate all of the y data columns to numerics.
  data.forEach(function(d)
  {
  	config.yi.forEach(function(c)
  	{
  		d[c] = +d[c];
  	});
  });

  var yextent = dex.matrix.extent(data, config.yi);
  x.domain(data.map(function(d) { return d[config.xi]; }));
  //y.domain([0, d3.max(data, function(d) { return d[1]; })]);

  if (config.ymin != null)
  {
    yextent[0] = config.ymin;
  }
  if (config.ymax != null)
  {
    yextent[1] = config.ymax;
  }

  // Establish the domain of the y axis.
  y.domain(yextent);

  // X Axis
  chartContainer.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + config.height + ")")
      .call(xAxis)
    .append("text")
      .attr("y", 20)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style("font-size", config.xaxisLabelFontSize)
      .text(config.xaxisLabel);

  // Y Axis
  chartContainer.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style("font-size", config.yaxisLabelFontSize)
      .text(config.yaxisLabel);

  var barData = dex.matrix.combine(
      	dex.matrix.slice(data, [config.xi]),
      	dex.matrix.slice(data, config.yi)
     );

  console.log("BarChart().BarData()")
  console.dir(barData);

  //console.dir(dex.matrix.slice(data, config.yi));
  //console.dir(x.rangeBand());

  chartContainer.selectAll(".bar")
      .data(barData)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { //console.dir(d);
      	 return x(d[0]) + x1(d[3]) })
      .style("fill", function(d) { return config.barColors(d[3]);})
      .attr("width", x.rangeBand()/config.yi.length)
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return config.height - y(d[1]); });
      
  // Add Text Labels
  /*
  chartContainer.selectAll(".label")
    .data(barData)
    .enter().append("text")
    .attr("x", function(d) { return x(d[0]) + x1(d[3]) })
    .attr("y", function(d) { return y(d[1]); })
    .attr("text-anchor", "end")
    //.attr("transform", "rotate(90)")
    .attr("dy", ".71em")
    .style("font-size", 12)
    .text(function(d) { console.log("TEXTD: " + d); return config.labels[d[3]]; });
  */
};