var data = [10, 20, 30, 40, 50, 60, 80, 90, 100, 110, 120, 130, 140, 150];
var maxValue = d3.max(data);
var maxHeight = 500;
var margins = {top: 10, bottom: 10, left: 10, right:10};
var barWidth = 20;
var barPadding = 3;

var graphWidth = (data.length + 2) * (barWidth + barPadding) - barPadding;
var totalWidth = graphWidth + margins.left + margins.right;
var totalHeight = maxHeight + margins.top + margins.bottom;

var yScale = d3.scaleLinear()
    .domain([0, maxValue])
    .range([0, totalHeight - margins.top - margins.bottom]);
var colorScale = d3.scaleLinear()
    .domain([0, maxValue])
    .interpolate(d3.interpolateHcl)
    .range([d3.rgb("#0000FF"), d3.rgb('#FF0000')]);
var timeScale = d3.scaleLinear()
    .domain([0, maxValue])
    .range([10, 50]);

///API variables
var url = 'https://api.nytimes.com/svc/search/v2/articlesearch.json';
var query;
var apiKey = '7c62e1ce22104106be6b26e7fec7afc4';
var test = 'https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=7c62e1ce22104106be6b26e7fec7afc4'


var data1 = [];
var input;
var query;
var search;
var p;

// function gotData(data) {
//     var articles = data.response.docs;
//     for (var i = 0; i < articles.length; i++) {
//         createP(articles[i].headline.main);
//     };  
// }

// function defineInput() {
//     query = this.value();
//     console.log(this.value());
//     search = url + '?api-key=' + apiKey + '&q=' + query;
//     data1 = loadJSON(search, gotData);
    
// }

function setup() {
     noCanvas();
    // input = createInput('sports', 'text');
    // input.changed(defineInput);


var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight)
    .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

var graphGroup = svg.append('g');

function barGroup() {
    graphGroup.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('x', function (d, i) { return i * (barWidth + barPadding); })
        .attr('y', function (d, i) { return yScale(maxValue - d); })
        .attr('width', barWidth)
        .attr('height', function (d, i) { return yScale(d); })
        .attr('class', 'rect')
        .attr('fill', 'steelblue')
    rectTransition();
}

function textGroup() {
    graphGroup.selectAll('text')
        .data(data)
        .enter()
        .append('text')
        .text(function (d, i) { return d; })
        .attr('x', function (d, i) { return i * (barWidth + barPadding); })
        .attr('y', function (d, i) { return yScale(maxValue - d); })
        .attr('class', 'text')
        .attr('width', barWidth)
        .attr('fill', 'white')
        .style('font', '10px sans-serif')
        .attr('text-anchor', 'middle')
        .attr('transform', 'translate(' + barWidth/2 + ',' + 10 + ')')
    //textTransition();      
}


function rectTransition() {
    d3.selectAll("rect")
        .data(data)
        .transition()
            .delay(2000)
            .duration(function (d, i) {return timeScale(d)*50;})
            .attr('x', function (d, i) { return (data.length  - i) * (barWidth + barPadding); })
        .transition()
            .delay(4000)
            .duration(10000)
            .attr('y', margins.top)
            .attr('height', 50)
            .attr('fill', function (d, i) { return colorScale(d); })
        .transition()
            .delay(2000)
            .attr('height', function (d, i) { return yScale(d); })
        .transition()
            .delay(2000)
            .duration(5000)
            .attr('x', margins.left)
            .attr('y', function (d, i) { return i * (barWidth + barPadding) + 175; })
            .attr('width', function (d, i) { return d; })
            .attr('height', barWidth)
        .transition()
            .delay(2000)
            .duration(5000)
            .attr('fill', 'steelblue')
            .attr('x', function (d, i) { return i * (barWidth + barPadding); })
            .attr('y', function (d, i) { return yScale(maxValue - d); })
            .attr('width', barWidth)
            .attr('height', function (d, i) { return yScale(d); });
}

function textTransition() {
    d3.selectAll(".text")
        .data(data)
        .transition()
            .duration(function (d, i) { return (data.length - i) * d * 10;})
            .attr('x', function (d, i) { return (data.length - 1 - i) * (barWidth + barPadding); })
        .transition()
            .duration(5000)
            .attr('y', function (d, i) { return yScale(d); })
            .attr('height', function (d, i) { return yScale(maxValue); })
        .transition()
            .attr('y', 40)
            .attr('height', 50)
            .attr('fill', function (d, i) { return colorScale(d); });
}

barGroup();
//textGroup();
}