$(function () {
  var table = d3.select("table")

  table.append("thead")
  table.append("tbody");
  table.append("tfoot");

  function update(res) {
    var yahooResult = res;
    var keys = Object.keys(yahooResult.query.results.quote[0]);

    var header = table.select("thead")
      .selectAll("th")
      .data(keys);

    header.exit().remove();
    header.enter().append("th");

    header.text(function (d, i) {
      return d;
    });

    var result = yahooResult.query.results.quote;
    var rows = table.select("tbody")
      .selectAll("tr")
      .data(result);

    rows.exit().remove();
    rows.enter().append("tr");

    var columns = rows.selectAll("td")
      .data(function (d, i) {
        var ret = $.map(d, function (v) {
          return v;
        });

        for (var j = 0; j < ret.length; j++) {
          if (this.length && this[j] && this[j].innerHTML != ret[j]) {
            d3.select(this[j])
              .attr("class", "update");
          }
        }
        return ret;
      });

    //console.log(JSON.stringify(columns.enter()));

    columns.exit().remove();
    columns.enter().append("td");

    var colorPalette = ["AntiqueWhite", "MistyRose", "Beige", "Azure", "NavajoWhite"];

    columns
      .text(function (d, i) {
        return d;
      })
      .style("background-color",
        function (d) {
          if (this.classList.contains("update")) {
            return colorPalette[Math.floor(Math.random() * colorPalette.length)];
          }
        })
      .attr("class", "");
  }

  tickers = ["YHOO", "AAPL", "GOOG", "MSFT", "VMW", "YELP", "FB", "LNKD", "TWTR", "TRLA"];
  fields = ["symbol", "AverageDailyVolume", "Change", "MarketCapitalization", "LastTradePriceOnly", "DaysRange", "Volume", "StockExchange"];

  (function refresh() {
    tickersWithQuotes = tickers.map(function (d) {
      return "'" + d + "'";
    });

    var preUrl = "http://query.yahooapis.com/v1/public/yql?q=";
    var query = encodeURIComponent('select ' + fields.join(",") + ' from yahoo.finance.quote where symbol in (' + tickersWithQuotes.join(",") + ')');
    var postUrl = "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";

    var yahooFinanceQueryUrl = preUrl + query + postUrl

    $.ajax({
      url: yahooFinanceQueryUrl
    })
      .done(function (res) {
        update(res);
        setTimeout(refresh, 1000);
      })
      .fail(function () {
        console.log("Error calling Yahoo API");
      });
  })();

});