(function(){

    var chartOptions = {
        width: 800,
        height: 500,
        barPadding: 0,
        padding: [20, 20, 20, 60]
    };


    var chart = ScatterPlotChart();
    chart.init(chartOptions);
    chart.createSVG();

    d3.csv('parks.csv', function(data){
        var circles,
            drawOptions,
            toolTipOptions,
            xAxisOptions,
            yAxisOptions,
            xMaxValue, 
            yMaxValue,
            xMinValue,
            yMinValue,
            yScaleOptions,
            xScaleOptions,
            xAxis,
            yAxis;

        xMaxValue = d3.max(data, function(d){
            return +d.visitors;
        });

        xMinValue = d3.min(data, function(d){
            return +d.visitors;
        });

        xScaleOptions = {
            scaleType: 'linear',
            rangeMin: chartOptions.padding[3],
            rangeMax: chartOptions.width - chartOptions.padding[1]  ,
            domainMin: 0,
            domainMax: xMaxValue
        };


        yMaxValue = d3.max(data, function(d){
            return +d.camp_total;
        });

        yMinValue = d3.min(data, function(d){
            if (d.camp_total > 0) {
                return +d.camp_total;
            }
        });

        yScaleOptions = {
            scaleType: 'linear',
            rangeMin: chartOptions.padding[0],
            rangeMax: chartOptions.height -   chartOptions.padding[2] ,
            domainMin: yMaxValue,
            domainMax: 0
        };

        drawOptions = { 
            xKey: 'visitors',
            yKey: 'camp_total',
            radius: 0
        };

        toolTipOptions = { 
            label: 'park', 
            fields: [
                { label: 'visitors', key: 'visitors' },
                { label: 'campers', key: 'camp_total' }
            ]
        };

        xAxisOptions = {
            xTranslate: 0,
            yTranslate: chartOptions.height - chartOptions.padding[2],
            class: 'x axis'
        };

        yAxisOptions = {
            xTranslate: chartOptions.padding[3],
            yTranslate: 0,
            class: 'y axis'
        };

        transitionOptions = {
            duration: 3000,
            attr: function(){
                return { 'r': 3 , 'color' : 'red'};
            },
            delay: function() {
                return function(d, i ) {
                    return i * 5;
                };
            },
            sort: function(){
                return function(a, b){
                    return d3.ascending(+a.camp_total, +b.camp_total);
                };
            }
        };

        chart.addXScale(xScaleOptions);
        chart.addYScale(yScaleOptions);

        circles = chart.appendElements(data, 'circle');
        chart.drawElements(circles, drawOptions );
        chart.addToolTip(circles, toolTipOptions);

        xAxis = chart.addAxis('xScale', 'bottom');
        chart.appendAxis(xAxis, xAxisOptions);

        yAxis = chart.addAxis('yScale', 'left');
        chart.appendAxis(yAxis, yAxisOptions);

        chart.addTransition(circles, transitionOptions);

    });

})();