// asks = [15, 0.1] => there is 0.1 volume for the price of 15

var data = [{
  asks: [[15, 0.1], [13, 0.2], [10, 0.5]],
  bids: [[8, 0.2], [7, 0.7], [5, 0.4]]
},
{
  asks: [[16, 0.3], [13, 0.2], [10, 0.5]],
  bids: [[9, 0.4], [8, 0.25], [6, 0.75]]
},
{
  asks: [[14, 0.25], [13, 0.1], [11, 0.54]],
  bids: [[10, 0.2], [8, 0.5], [5, 0.4]]
},
{
  asks: [[18, 0.4], [13, 0.5], [11, 0.3]],
  bids: [[10, 0.3], [8, 0.4], [5, 0.1]]
},
{
  asks: [[17, 0.4], [15, 0.3], [12, 0.2]],
  bids: [[11, 0.4], [9, 0.6], [7, 0.33]]
}];

var Chart = (function(window, d3) {

  var svg, xScale, yScale, colorbarScale, colorbar, xAxis, yAxis, dim, chartWrapper, line, path, margin = {}, width, height, timeframe, canvas_width, canvas_height;
  var yMin, yMax, xMin, xMax;

  function initDimensions(x_min, x_max, y_min, y_max) {
    yMin = y_min;
    yMax = y_max;
    xMin = x_min;
    xMax = x_max;

    render();
  }

  function init() {
    // initialize scales
    xScale = d3.time.scale();
    yScale = d3.scale.linear();

    // initialize axis
    xAxis = d3.svg.axis()
        .orient("bottom")
        .outerTickSize(0)
        .tickPadding(10)
        .tickFormat(d3.time.format('%H:%M:%S'))
        .ticks(d3.time.seconds, 1);

    yAxis = d3.svg.axis()
        .orient("right")
        .outerTickSize(0)
        .tickPadding(10);

    // initialize svg
    svg = d3.select("#chart-grid").append("svg").attr("id", "grid");

    // render the chart
    render();
  }

  function render() {
    // get dimensions based on bmp size
    updateDimensions();

    // update x and y scales to new dimensions
    var x = xScale.domain([xMin, xMax]).range([0, width]);

    // console.log(xMin);
    var y = yScale.domain([yMin, yMax]).range([height, 0]);

    // update axis
    xAxis
      .scale(xScale)
      .innerTickSize(-height);

    yAxis
      .scale(yScale)
      .innerTickSize(-width);

    chartWrapper = svg.append('g');
    chartWrapper.append('g').attr("class", "x axis");
    chartWrapper.append('g').attr("class", "y axis");

    // update svg elements to new dimensions
    svg
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);

    chartWrapper.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.select('.x.axis')
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.select('.y.axis')
      .attr("transform", "translate(" + width + ", 0)")
      .call(yAxis);

  }

  function updateDimensions() {
    canvas_width = document.getElementById("chart-wrapper").offsetWidth;
    canvas_height = document.getElementById("chart-wrapper").offsetHeight;
    margin = { top: 20, right: 50, bottom: 50, left: 80 };
    width = canvas_width - margin.right - margin.left;
    height = canvas_height - margin.bottom - margin.top;
  }

  return {
    render : render,
    init   : init,
    initDimensions : initDimensions
  }

})(window, d3);

Chart.init();
Chart.initDimensions(39596000, 39600000, 5, 17);