var w = 600;
var h = 350;


var xScale = d3.scale.ordinal()
.rangeRoundBands([0, w], 0.05);

var yScale = d3.scale.linear()
.range([0, h]);

//Create SVG element
var svg = d3.select(".chart-area")
.append("svg")
.attr("width", w)
.attr("height", h);

d3.csv("month_ct.csv", type, function(error, data) {
    xScale.domain(data.map(function(d) { return d.Month; }));
    yScale.domain([0, d3.max(data, function(d) { return d.Ratio; })]);

//Create bars
svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", function(d) {
        return xScale(d.Month);
    })
    .attr("y", function(d) {
        return h - yScale(d.Ratio);
    })
    .attr("width", xScale.rangeBand())
    .attr("height", function(d) {
        return yScale(d.Ratio);
    })
    .attr("fill", function(d) {
        return "rgb(0, 0, " + (d.Ratio * 10) + ")";
    })
    .on("mouseover", function(d) {

        //Get this bar's x/y values, then augment for the tooltip
        var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
        var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;

        //Update the tooltip position and value
        d3.select("#tooltip")
        .style("left", xPosition + "px")
        .style("top", yPosition + "px")
        .select("#value")
        .text(d.Ratio);

        //Show the tooltip
        d3.select("#tooltip").classed("hidden", false);

    })
    .on("mouseout", function() {

        //Hide the tooltip
        d3.select("#tooltip").classed("hidden", true);

    })
    .on("click", function() {
        sortBars();
    });
    });

    function type(d) {
        d.value = +d.value;
        return d;
    }
    //Define sort order flag
    var sortOrder = false;

    //Define sort function
    var sortBars = function() {

    //Flip value of sortOrder
    sortOrder = !sortOrder;

    svg.selectAll("rect")
    .sort(function(a, b) {
        if (sortOrder) {
            return d3.ascending(a.Ratio, b.Ratio);
        } else {
            return d3.descending(a.Ratio, b.Ratio);
        }
    })
    .transition()
    .delay(function(d, i) {
        return i * 50;
    })
    .duration(1000)
    .attr("x", function(d) {
        return xScale(d.Month);
    });

    };