'use strict';

var BuoyAnalysisChart = {
    /**
     *
     */
    bars: {
        padding: 24,
        spacing: 2,
        width: 23,
    },

    /**
     *
     */
    barYearX: function(d, i) {
        return i * BuoyAnalysisChart.bars.width + i * BuoyAnalysisChart.bars.spacing + BuoyAnalysisChart.bars.padding;
    },

    /**
     *
     */
    barMonthX: function(d, i) {
        var year = Math.floor(i / 12);

        return year * BuoyAnalysisChart.bars.width + BuoyAnalysisChart.bars.padding + year * BuoyAnalysisChart.bars.spacing + (i % 12) * 2;
    },

    /**
     *
     */
    draw: function() {
        var years = BuoyAnalysisData.calculateYearlyAverages(BuoyAnalysisMap.reticle.stations);

        var months = BuoyAnalysisData.calculateMonthlyAverages(BuoyAnalysisMap.reticle.stations);

        var chart = d3.select('#chart');

        var toggles = d3.select('#year-toggles')

        chart.selectAll('*').remove();

        var gradient = chart.append("svg:defs")
                            .append("svg:linearGradient")
                            .attr("id", "Gradient1")
                            .attr('gradientTransform', 'rotate(90)')

        gradient.append("svg:stop")
            .attr("offset", "0%")
            .attr("stop-color", "#6cf7ce")
            .attr("stop-opacity", 1);

        gradient.append("svg:stop")
            .attr("offset", "100%")
            .attr("stop-color", "#40596F")
            .attr("stop-opacity", 1);

        chart.selectAll('.bar-year').data(years).enter()
            .append('rect')
                .classed('bar-year', true)
                .attr('fill', 'url("#Gradient1")')
                .attr('width', 23)
                .attr('height', BuoyAnalysisData.axis.h)
                .attr('x', BuoyAnalysisChart.barYearX)
                .attr('y', 0)

        chart.selectAll('.mask-year').data(years).enter()
            .append('rect')
                .classed('.mask-year', true)
                .attr('fill', '#fff')
                .attr('width', 25)
                .attr('height', function(d) {
                    return BuoyAnalysisData.axis.scale(d.average);
                })
                .attr('x', function(d, i) {
                    return BuoyAnalysisChart.barYearX(d, i) - 1;
                })
                .attr('y', 0)

        toggles.selectAll('div').data(years).enter()
            .append('div')
                .classed('year-toggle', true)
                .text(function(d) {
                    return d.year.toString().slice(-2);
                })
                .attr('x', BuoyAnalysisChart.barYearX)
                .attr('y', 180)

        chart.append("g")
            .classed('axis', true)
            .classed('axis-fahrenheit', true)
            .attr('transform', 'translate(24, 0)')
            .attr('fill', '#000')
            .call(BuoyAnalysisData.axis.fahrenheit);

        chart.append("g")
            .classed('axis', true)
            .classed('axis-celsius', true)
            .attr('transform', 'translate(871, 0)')
            .call(BuoyAnalysisData.axis.celsius);

        chart.append('text')
            .classed('label-axis-y', true)
            .attr('text-anchor', 'middle')
            .text('F')
            .attr('x', 10)
            .attr('y', 15)

        chart.append('text')
            .classed('label-axis-y', true)
            .attr('text-anchor', 'middle')
            .text('C')
            .attr('x', 885)
            .attr('y', 15)

        chart.selectAll('.bar-month').data(months).enter()
            .append('rect')
            .attr('fill', 'rgba(0, 0, 0, 0.2)')
            .attr('width', 1)
            .attr('height', function(d) {
                return BuoyAnalysisData.axis.scaleInverted(d.average)
            })
            .attr('x', BuoyAnalysisChart.barMonthX)
            .attr('y', function(d) {
                return BuoyAnalysisData.axis.h - BuoyAnalysisData.axis.scaleInverted(d.average);
            })
    }
};