HorizontalBarChart = {
  init: function(svg, html_tag_attr, dataset, xBar, yBar, wBar, hBar, color, yScale){
    this.xBar = xBar;
    this.yBar = yBar;
    this.wBar = wBar;
    this.hBar = hBar;
    this.color = color;
    this.yScale = yScale;
    
    svg.selectAll("rect")
      .data(dataset)
      .enter()
        .append("rect")
          .attr("x", this.xBar)
          .attr("y", this.yBar)
          .attr("width", this.wBar)
          .attr("height", this.hBar)
          .attr("fill", this.color);
  }
};


//VerticalBarChart = {
//  init: function(svg, dataset, xBar, yBar, wBar, hBar){  //, is_tooltip=false, tooltipXPosition=false, tooltipYPosition=false
//    svg.selectAll("rect")
//      .data(dataset)
//      .enter()
//        .append("rect")
//          .attr("x", xBar)
//          .attr("y", yBar)
//          .attr("width", wBar)
//          .attr("height", hBar)
//          .attr("fill", "grey");
//  } //ENDOF init()
//  
//};


VerticalBarChart = {
  margin: {top: 20, right: 0, bottom: 0, left: 80},  
  
  init: function(svg, html_tag_attr, dataset, xBar, yBar, wBar, hBar, color, xScale){  //, is_tooltip=false, tooltipXPosition=false, tooltipYPosition=false
    this.xBar = xBar;
    this.yBar = yBar;
    this.wBar = wBar;
    this.hBar = hBar;
    this.color = color;
    this.xScale = xScale;

    var height = $(html_tag_attr).height();
    
    svg.selectAll("rect")
      .data(dataset)
      .enter()
        .append("rect")
          .attr("x", this.xBar)
          .attr("y", this.yBar)
          .attr("width", this.wBar)
          .attr("height", this.hBar)
          .attr("fill", this.color)
          .classed("hidden", true)
      .on("mouseover", function(d){
          var xPosition = d3.select(this).attr("x"); //  + xScale.bandwidth() / 2
          var yPosition = parseFloat(d3.select(this).attr("y")); //  / 2 + height / 2
          d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")
            //.style("position", "absolute")
            .select("#value")
            .text(d.x +": CHF"+ d.y);
          
          d3.select("#tooltip").classed("hidden", false);
      })
      .on("mouseout", function(){
        d3.select("#tooltip").classed("hidden", true);
      })
      ;
    
    var y = d3.scaleLinear().range([(height), this.margin.top]);
    y.domain([0, d3.max(dataset, function(d){ return +d.y + 0; })]);

    // Add the Y Axis
    svg.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y))
      .selectAll("text")
        .style("text-anchor", "end")
    ;
      
  } //ENDOF init()
  
};