
var d3demo = {
    svg:null,
    data:null,
    graph_data:null,
    xScale:null,
    xAxis:null,
    yScale:null,
    yAxis:null,
    margin:{top:0, right:0, bottom:0, left:0},
    svgHeight:700,
    svgWidth:1500,
    width:0,
    height:0,
    init: function () {
        var promise = new Promise(function(resolve, reject) {
            // do a thing, possibly async, then…
            d3.json('http://mlb.mlb.com/pubajax/wf/flow/stats.splayer?season=2016&sort_order=%27desc%27&sort_column=%27avg%27&stat_type=hitting&page_type=SortablePlayer&team_id=112&game_type=%27S%27&player_pool=ALL&season_type=ANY&sport_code=%27mlb%27&results=1000&recSP=1&recPP=50',
                function (error, response) {
                    if(error)
                    {
                        reject(Error("It broke"));
                    }
                    if(response)
                    {
                        d3demo.data = response.stats_sortable_player.queryResults.row;
                        d3demo.graph_data = d3demo.data.map(function(d){return { name:d.name_display_first_last, id:d.player_id, obp:d.obp} } );
                        d3demo.svg = d3.select('#wiz').append('svg');
                        resolve("Stuff worked!");
                    }

                });

        });
        return promise;
    },

    draw:function(){

        d3demo.margin = {top:20, right:0, bottom:0, left:200 };
        d3demo.width = d3demo.svgWidth - d3demo.margin.left - d3demo.margin.right;
        d3demo.height = d3demo.svgHeight - d3demo.margin.top - d3demo.margin.bottom;
        d3demo.setXScale();
        d3demo.setYScale();
        d3demo.setXAxis();
        d3demo.setYAxis();


        d3demo.svg
            .attr('height', (d3demo.height + d3demo.margin.top + d3demo.margin.bottom) )
            .attr('width', (d3demo.width + d3demo.margin.left + d3demo.margin.right) )
            .append('g')
            .attr('transform', 'translate('+ d3demo.margin.left +','+ d3demo.margin.top +')');

        d3demo.svg.selectAll("circle")
            .data(d3demo.graph_data)
            .enter()
            .append('circle').attr("cx",function(d,i){
            return d3demo.xScale(d.obp);
        } )
            .attr("cy", function(d,i){
                return d3demo.yScale(d.name);
            })
            .attr("r", function(d,i){return d.obp * 30 +5;});

        d3demo.svg.append('g')
            .attr('class', 'x-axis')
            .attr('transform', 'translate(0,'+ d3demo.height +')')
            .call(d3demo.xAxis);


        d3demo.svg.append("g")
            .attr("class", "y-axis")
            .attr('transform', 'translate('+d3demo.margin.left+','+ -10 +')')
            .call(d3demo.yAxis)
            .selectAll("text")
        },

    setXScale: function () {
        var range = d3demo.graph_data.map(function(d){return d.obp});
        d3demo.xScale = d3.scale.linear()
                            .domain([d3.min(range), d3.max(range)])
                            .range([d3demo.margin.left+2, d3demo.width]);
    },

    setXAxis: function(){
        d3demo.xAxis = d3.svg.axis()
            .scale(d3demo.xScale).orient("bottom");
    },

    setYScale: function(){
        var range = d3demo.graph_data.map(function(d){return d.name});
        d3demo.yScale = d3.scale.ordinal()
            .domain(range)
            .rangeBands([d3demo.margin.top + 20, d3demo.height + d3demo.margin.top - 10]);
    },

    setYAxis: function(){
        d3demo.yAxis = d3.svg.axis()
            .scale(d3demo.yScale).orient("left");
    }
};