module.exports = function(config) {
  var __ = {
    data: [],
    highlighted: [],
    dimensions: [],
    dimensionTitles: {},
    dimensionTitleRotation: 0,
    types: {},
    brushed: false,
    brushedColor: null,
    alphaOnBrushed: 0.0,
    mode: "default",
    rate: 20,
    width: 600,
    height: 300,
    margin: { top: 24, right: 0, bottom: 12, left: 0 },
    nullValueSeparator: "undefined", // set to "top" or "bottom"
    nullValueSeparatorPadding: { top: 8, right: 0, bottom: 8, left: 0 },
    color: "#069",
    composite: "source-over",
    alpha: 0.7,
    bundlingStrength: 0.5,
    bundleDimension: null,
    smoothness: 0.0,
    showControlPoints: false,
    hideAxis : []
  };

  extend(__, config);

  var pc = function(selection) {
    selection = pc.selection = d3.select(selection);

    __.width = selection[0][0].clientWidth;
    __.height = selection[0][0].clientHeight;

    // canvas data layers
    ["marks", "foreground", "brushed", "highlight"].forEach(function(layer) {
      canvas[layer] = selection
        .append("canvas")
        .attr("class", layer)[0][0];
      ctx[layer] = canvas[layer].getContext("2d");
    });

    // svg tick and brush layers
    pc.svg = selection
      .append("svg")
        .attr("width", __.width)
        .attr("height", __.height)
      .append("svg:g")
        .attr("transform", "translate(" + __.margin.left + "," + __.margin.top + ")");

    return pc;
  };
  var events = d3.dispatch.apply(this,["render", "resize", "highlight", "brush", "brushend", "axesreorder"].concat(d3.keys(__))),
      w = function() { return __.width - __.margin.right - __.margin.left; },
      h = function() { return __.height - __.margin.top - __.margin.bottom; },
      flags = {
        brushable: false,
        reorderable: false,
        axes: false,
        interactive: false,
        debug: false
      },
      xscale = d3.scale.ordinal(),
      yscale = {},
      dragging = {},
      line = d3.svg.line(),
      axis = d3.svg.axis().orient("left").ticks(5),
      g, // groups for axes, brushes
      ctx = {},
      canvas = {},
      clusterCentroids = [];

  // side effects for setters
  var side_effects = d3.dispatch.apply(this,d3.keys(__))
    .on("composite", function(d) {
      ctx.foreground.globalCompositeOperation = d.value;
      ctx.brushed.globalCompositeOperation = d.value;
    })
    .on("alpha", function(d) {
      ctx.foreground.globalAlpha = d.value;
      ctx.brushed.globalAlpha = d.value;
    })
    .on("brushedColor", function (d) {
      ctx.brushed.strokeStyle = d.value;
    })
    .on("width", function(d) { pc.resize(); })
    .on("height", function(d) { pc.resize(); })
    .on("margin", function(d) { pc.resize(); })
    .on("rate", function(d) {
      brushedQueue.rate(d.value);
      foregroundQueue.rate(d.value);
    })
    .on("dimensions", function(d) {
      xscale.domain(__.dimensions);
      if (flags.interactive){pc.render().updateAxes();}
    })
    .on("bundleDimension", function(d) {
      if (!__.dimensions.length) pc.detectDimensions();
      if (!(__.dimensions[0] in yscale)) pc.autoscale();
      if (typeof d.value === "number") {
        if (d.value < __.dimensions.length) {
          __.bundleDimension = __.dimensions[d.value];
        } else if (d.value < __.hideAxis.length) {
          __.bundleDimension = __.hideAxis[d.value];
        }
      } else {
        __.bundleDimension = d.value;
      }

      __.clusterCentroids = compute_cluster_centroids(__.bundleDimension);
    })
    .on("hideAxis", function(d) {
      if (!__.dimensions.length) pc.detectDimensions();
      pc.dimensions(without(__.dimensions, d.value));
    });

  // expose the state of the chart
  pc.state = __;
  pc.flags = flags;

  // create getter/setters
  getset(pc, __, events);

  // expose events
  d3.rebind(pc, events, "on");

  // getter/setter with event firing
  function getset(obj,state,events)  {
    d3.keys(state).forEach(function(key) {
      obj[key] = function(x) {
        if (!arguments.length) {
      return state[key];
    }
        var old = state[key];
        state[key] = x;
        side_effects[key].call(pc,{"value": x, "previous": old});
        events[key].call(pc,{"value": x, "previous": old});
        return obj;
      };
    });
  };

  function extend(target, source) {
    for (var key in source) {
      target[key] = source[key];
    }
    return target;
  };

  function without(arr, item) {
    return arr.filter(function(elem) { return item.indexOf(elem) === -1; })
  };
  /** adjusts an axis' default range [h()+1, 1] if a NullValueSeparator is set */
  function getRange() {
    if (__.nullValueSeparator=="bottom") {
      return [h()+1-__.nullValueSeparatorPadding.bottom-__.nullValueSeparatorPadding.top, 1];
    } else if (__.nullValueSeparator=="top") {
      return [h()+1, 1+__.nullValueSeparatorPadding.bottom+__.nullValueSeparatorPadding.top];
    }
    return [h()+1, 1];
  };

  pc.autoscale = function() {
    // yscale
    var defaultScales = {
      "date": function(k) {
        var extent = d3.extent(__.data, function(d) {
          return d[k] ? d[k].getTime() : null;
        });

        // special case if single value
        if (extent[0] === extent[1]) {
          return d3.scale.ordinal()
            .domain([extent[0]])
            .rangePoints(getRange());
        }

        return d3.time.scale()
          .domain(extent)
          .range(getRange());
      },
      "number": function(k) {
        var extent = d3.extent(__.data, function(d) { return +d[k]; });

        // special case if single value
        if (extent[0] === extent[1]) {
          return d3.scale.ordinal()
            .domain([extent[0]])
            .rangePoints(getRange());
        }

        return d3.scale.linear()
          .domain(extent)
          .range(getRange());
      },
      "string": function(k) {
        var counts = {},
            domain = [];

        // Let's get the count for each value so that we can sort the domain based
        // on the number of items for each value.
        __.data.map(function(p) {
          if (p[k] === undefined && __.nullValueSeparator!== "undefined"){
            return; // null values will be drawn beyond the horizontal null value separator!
          }
          if (counts[p[k]] === undefined) {
            counts[p[k]] = 1;
          } else {
            counts[p[k]] = counts[p[k]] + 1;
          }
        });

        domain = Object.getOwnPropertyNames(counts).sort(function(a, b) {
          return counts[a] - counts[b];
        });

        return d3.scale.ordinal()
          .domain(domain)
          .rangePoints(getRange());
      }
    };

    __.dimensions.forEach(function(k) {
      yscale[k] = defaultScales[__.types[k]](k);
    });

    __.hideAxis.forEach(function(k) {
      yscale[k] = defaultScales[__.types[k]](k);
    });

    // xscale
    xscale.rangePoints([0, w()], 1);

    // canvas sizes
    pc.selection.selectAll("canvas")
        .style("margin-top", __.margin.top + "px")
        .style("margin-left", __.margin.left + "px")
        .attr("width", w()+2)
        .attr("height", h()+2);

    // default styles, needs to be set when canvas width changes
    ctx.foreground.strokeStyle = __.color;
    ctx.foreground.lineWidth = 1.4;
    ctx.foreground.globalCompositeOperation = __.composite;
    ctx.foreground.globalAlpha = __.alpha;
    ctx.brushed.strokeStyle = __.brushedColor;
    ctx.brushed.lineWidth = 1.4;
    ctx.brushed.globalCompositeOperation = __.composite;
    ctx.brushed.globalAlpha = __.alpha;
    ctx.highlight.lineWidth = 3;

    return this;
  };

  pc.scale = function(d, domain) {
    yscale[d].domain(domain);

    return this;
  };

  pc.flip = function(d) {
    //yscale[d].domain().reverse();         // does not work
    yscale[d].domain(yscale[d].domain().reverse()); // works

    return this;
  };

  pc.commonScale = function(global, type) {
    var t = type || "number";
    if (typeof global === 'undefined') {
      global = true;
    }

    // scales of the same type
    var scales = __.dimensions.concat(__.hideAxis).filter(function(p) {
      return __.types[p] == t;
    });

    if (global) {
      var extent = d3.extent(scales.map(function(p,i) {
          return yscale[p].domain();
        }).reduce(function(a,b) {
          return a.concat(b);
        }));

      scales.forEach(function(d) {
        yscale[d].domain(extent);
      });

    } else {
      scales.forEach(function(k) {
        yscale[k].domain(d3.extent(__.data, function(d) { return +d[k]; }));
      });
    }

    // update centroids
    if (__.bundleDimension !== null) {
      pc.bundleDimension(__.bundleDimension);
    }

    return this;
  };
  pc.detectDimensions = function() {
    pc.types(pc.detectDimensionTypes(__.data));
    pc.dimensions(d3.keys(pc.types()));
    return this;
  };

  // a better "typeof" from this post: http://stackoverflow.com/questions/7390426/better-way-to-get-type-of-a-javascript-variable
  pc.toType = function(v) {
    return ({}).toString.call(v).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
  };

  // try to coerce to number before returning type
  pc.toTypeCoerceNumbers = function(v) {
    if ((parseFloat(v) == v) && (v != null)) {
    return "number";
  }
    return pc.toType(v);
  };

  // attempt to determine types of each dimension based on first row of data
  pc.detectDimensionTypes = function(data) {
    var types = {};
    d3.keys(data[0])
      .forEach(function(col) {
        types[col] = pc.toTypeCoerceNumbers(data[0][col]);
      });
    return types;
  };
  pc.render = function() {
    // try to autodetect dimensions and create scales
    if (!__.dimensions.length) pc.detectDimensions();
    if (!(__.dimensions[0] in yscale)) pc.autoscale();

    pc.render[__.mode]();

    events.render.call(this);
    return this;
  };

  pc.renderBrushed = function() {
    if (!__.dimensions.length) pc.detectDimensions();
    if (!(__.dimensions[0] in yscale)) pc.autoscale();

    pc.renderBrushed[__.mode]();

    events.render.call(this);
    return this;
  };

  function isBrushed() {
    if (__.brushed && __.brushed.length !== __.data.length)
      return true;

    var object = brush.currentMode().brushState();

    for (var key in object) {
      if (object.hasOwnProperty(key)) {
        return true;
      }
    }
    return false;
  };

  pc.render.default = function() {
    pc.clear('foreground');
    pc.clear('highlight');

    pc.renderBrushed.default();

    __.data.forEach(path_foreground);
  };

  var foregroundQueue = d3.renderQueue(path_foreground)
    .rate(50)
    .clear(function() {
      pc.clear('foreground');
      pc.clear('highlight');
    });

  pc.render.queue = function() {
    pc.renderBrushed.queue();

    foregroundQueue(__.data);
  };

  pc.renderBrushed.default = function() {
    pc.clear('brushed');

    if (isBrushed()) {
      __.brushed.forEach(path_brushed);
    }
  };

  var brushedQueue = d3.renderQueue(path_brushed)
    .rate(50)
    .clear(function() {
      pc.clear('brushed');
    });

  pc.renderBrushed.queue = function() {
    if (isBrushed()) {
      brushedQueue(__.brushed);
    } else {
      brushedQueue([]); // This is needed to clear the currently brushed items
    }
  };
  function compute_cluster_centroids(d) {

    var clusterCentroids = d3.map();
    var clusterCounts = d3.map();
    // determine clusterCounts
    __.data.forEach(function(row) {
      var scaled = yscale[d](row[d]);
      if (!clusterCounts.has(scaled)) {
        clusterCounts.set(scaled, 0);
      }
      var count = clusterCounts.get(scaled);
      clusterCounts.set(scaled, count + 1);
    });

    __.data.forEach(function(row) {
      __.dimensions.map(function(p, i) {
        var scaled = yscale[d](row[d]);
        if (!clusterCentroids.has(scaled)) {
          var map = d3.map();
          clusterCentroids.set(scaled, map);
        }
        if (!clusterCentroids.get(scaled).has(p)) {
          clusterCentroids.get(scaled).set(p, 0);
        }
        var value = clusterCentroids.get(scaled).get(p);
        value += yscale[p](row[p]) / clusterCounts.get(scaled);
        clusterCentroids.get(scaled).set(p, value);
      });
    });

    return clusterCentroids;

  }

  function compute_centroids(row) {
    var centroids = [];

    var p = __.dimensions;
    var cols = p.length;
    var a = 0.5;      // center between axes
    for (var i = 0; i < cols; ++i) {
      // centroids on 'real' axes
      var x = position(p[i]);
      var y = yscale[p[i]](row[p[i]]);
      centroids.push($V([x, y]));

      // centroids on 'virtual' axes
      if (i < cols - 1) {
        var cx = x + a * (position(p[i+1]) - x);
        var cy = y + a * (yscale[p[i+1]](row[p[i+1]]) - y);
        if (__.bundleDimension !== null) {
          var leftCentroid = __.clusterCentroids.get(yscale[__.bundleDimension](row[__.bundleDimension])).get(p[i]);
          var rightCentroid = __.clusterCentroids.get(yscale[__.bundleDimension](row[__.bundleDimension])).get(p[i+1]);
          var centroid = 0.5 * (leftCentroid + rightCentroid);
          cy = centroid + (1 - __.bundlingStrength) * (cy - centroid);
        }
        centroids.push($V([cx, cy]));
      }
    }

    return centroids;
  }

  function compute_control_points(centroids) {

    var cols = centroids.length;
    var a = __.smoothness;
    var cps = [];

    cps.push(centroids[0]);
    cps.push($V([centroids[0].e(1) + a*2*(centroids[1].e(1)-centroids[0].e(1)), centroids[0].e(2)]));
    for (var col = 1; col < cols - 1; ++col) {
      var mid = centroids[col];
      var left = centroids[col - 1];
      var right = centroids[col + 1];

      var diff = left.subtract(right);
      cps.push(mid.add(diff.x(a)));
      cps.push(mid);
      cps.push(mid.subtract(diff.x(a)));
    }
    cps.push($V([centroids[cols-1].e(1) + a*2*(centroids[cols-2].e(1)-centroids[cols-1].e(1)), centroids[cols-1].e(2)]));
    cps.push(centroids[cols - 1]);

    return cps;

  };

  pc.shadows = function() {
    flags.shadows = true;
    pc.alphaOnBrushed(0.1);
    pc.render();
    return this;
  };

  // draw dots with radius r on the axis line where data intersects
  pc.axisDots = function(r) {
    var r = r || 0.1;
    var ctx = pc.ctx.marks;
    var startAngle = 0;
    var endAngle = 2 * Math.PI;
    ctx.globalAlpha = d3.min([ 1 / Math.pow(__.data.length, 1 / 2), 1 ]);
    __.data.forEach(function(d) {
      __.dimensions.map(function(p, i) {
        ctx.beginPath();
        ctx.arc(position(p), yscale[p](d[p]), r, startAngle, endAngle);
        ctx.stroke();
        ctx.fill();
      });
    });
    return this;
  };

  // draw single cubic bezier curve
  function single_curve(d, ctx) {

    var centroids = compute_centroids(d);
    var cps = compute_control_points(centroids);

    ctx.moveTo(cps[0].e(1), cps[0].e(2));
    for (var i = 1; i < cps.length; i += 3) {
      if (__.showControlPoints) {
        for (var j = 0; j < 3; j++) {
          ctx.fillRect(cps[i+j].e(1), cps[i+j].e(2), 2, 2);
        }
      }
      ctx.bezierCurveTo(cps[i].e(1), cps[i].e(2), cps[i+1].e(1), cps[i+1].e(2), cps[i+2].e(1), cps[i+2].e(2));
    }
  };

  // draw single polyline
  function color_path(d, ctx) {
    ctx.beginPath();
    if ((__.bundleDimension !== null && __.bundlingStrength > 0) || __.smoothness > 0) {
      single_curve(d, ctx);
    } else {
      single_path(d, ctx);
    }
    ctx.stroke();
  };

  // draw many polylines of the same color
  function paths(data, ctx) {
    ctx.clearRect(-1, -1, w() + 2, h() + 2);
    ctx.beginPath();
    data.forEach(function(d) {
      if ((__.bundleDimension !== null && __.bundlingStrength > 0) || __.smoothness > 0) {
        single_curve(d, ctx);
      } else {
        single_path(d, ctx);
      }
    });
    ctx.stroke();
  };

  // returns the y-position just beyond the separating null value line
  function getNullPosition() {
    if (__.nullValueSeparator=="bottom") {
      return h()+1;
    } else if (__.nullValueSeparator=="top") {
      return 1;
    } else {
      console.log("A value is NULL, but nullValueSeparator is not set; set it to 'bottom' or 'top'.");
    }
    return h()+1;
  };

  function single_path(d, ctx) {
    __.dimensions.map(function(p, i) {
      if (i == 0) {
        ctx.moveTo(position(p), typeof d[p] =='undefined' ? getNullPosition() : yscale[p](d[p]));
      } else {
        ctx.lineTo(position(p), typeof d[p] =='undefined' ? getNullPosition() : yscale[p](d[p]));
      }
    });
  };

  function path_brushed(d, i) {
    if (__.brushedColor !== null) {
      ctx.brushed.strokeStyle = d3.functor(__.brushedColor)(d, i);
    } else {
      ctx.brushed.strokeStyle = d3.functor(__.color)(d, i);
    }
    return color_path(d, ctx.brushed)
  };

  function path_foreground(d, i) {
    ctx.foreground.strokeStyle = d3.functor(__.color)(d, i);
    return color_path(d, ctx.foreground);
  };

  function path_highlight(d, i) {
    ctx.highlight.strokeStyle = d3.functor(__.color)(d, i);
    return color_path(d, ctx.highlight);
  };
  pc.clear = function(layer) {
    ctx[layer].clearRect(0, 0, w() + 2, h() + 2);

    // This will make sure that the foreground items are transparent
    // without the need for changing the opacity style of the foreground canvas
    // as this would stop the css styling from working
    if(layer === "brushed" && isBrushed()) {
      ctx.brushed.fillStyle = pc.selection.style("background-color");
      ctx.brushed.globalAlpha = 1 - __.alphaOnBrushed;
      ctx.brushed.fillRect(0, 0, w() + 2, h() + 2);
      ctx.brushed.globalAlpha = __.alpha;
    }
    return this;
  };

  d3.rebind(pc, axis, "ticks", "orient", "tickValues", "tickSubdivide", "tickSize", "tickPadding", "tickFormat");

  function flipAxisAndUpdatePCP(dimension) {
    var g = pc.svg.selectAll(".dimension");

    pc.flip(dimension);

    d3.select(this.parentElement)
      .transition()
        .duration(1100)
        .call(axis.scale(yscale[dimension]));

    pc.render();
  }

  function rotateLabels() {
    var delta = d3.event.deltaY;
    delta = delta < 0 ? -5 : delta;
    delta = delta > 0 ? 5 : delta;

    __.dimensionTitleRotation += delta;
    pc.svg.selectAll("text.label")
      .attr("transform", "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")");
    d3.event.preventDefault();
  }

  function dimensionLabels(d) {
    return d in __.dimensionTitles ? __.dimensionTitles[d] : d;  // dimension display names
  }

  pc.createAxes = function() {
    if (g) pc.removeAxes();

    // Add a group element for each dimension.
    g = pc.svg.selectAll(".dimension")
        .data(__.dimensions, function(d) { return d; })
      .enter().append("svg:g")
        .attr("class", "dimension")
        .attr("transform", function(d) { return "translate(" + xscale(d) + ")"; });

    // Add an axis and title.
    g.append("svg:g")
        .attr("class", "axis")
        .attr("transform", "translate(0,0)")
        .each(function(d) { d3.select(this).call(axis.scale(yscale[d])); })
      .append("svg:text")
        .attr({
          "text-anchor": "middle",
          "y": 0,
          "transform": "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")",
          "x": 0,
          "class": "label"
        })
        .text(dimensionLabels)
        .on("dblclick", flipAxisAndUpdatePCP)
        .on("wheel", rotateLabels);

    if (__.nullValueSeparator=="top") {
      pc.svg.append("line")
        .attr("x1", 0)
        .attr("y1", 1+__.nullValueSeparatorPadding.top)
        .attr("x2", w())
        .attr("y2", 1+__.nullValueSeparatorPadding.top)
        .attr("stroke-width", 1)
        .attr("stroke", "#777")
        .attr("fill", "none")
        .attr("shape-rendering", "crispEdges");
    } else if (__.nullValueSeparator=="bottom") {
      pc.svg.append("line")
        .attr("x1", 0)
        .attr("y1", h()+1-__.nullValueSeparatorPadding.bottom)
        .attr("x2", w())
        .attr("y2", h()+1-__.nullValueSeparatorPadding.bottom)
        .attr("stroke-width", 1)
        .attr("stroke", "#777")
        .attr("fill", "none")
        .attr("shape-rendering", "crispEdges");
    }

    flags.axes= true;
    return this;
  };

  pc.removeAxes = function() {
    g.remove();
    return this;
  };

  pc.updateAxes = function() {
    var g_data = pc.svg.selectAll(".dimension").data(__.dimensions);

    // Enter
    g_data.enter().append("svg:g")
        .attr("class", "dimension")
        .attr("transform", function(p) { return "translate(" + position(p) + ")"; })
        .style("opacity", 0)
      .append("svg:g")
        .attr("class", "axis")
        .attr("transform", "translate(0,0)")
        .each(function(d) { d3.select(this).call(axis.scale(yscale[d])); })
      .append("svg:text")
        .attr({
          "text-anchor": "middle",
          "y": 0,
          "transform": "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")",
          "x": 0,
          "class": "label"
        })
        .text(dimensionLabels)
        .on("dblclick", flipAxisAndUpdatePCP)
        .on("wheel", rotateLabels);

    // Update
    g_data.attr("opacity", 0);
    g_data.select(".axis")
      .transition()
        .duration(1100)
        .each(function(d) {
          d3.select(this).call(axis.scale(yscale[d]));
        });
    g_data.select(".label")
      .transition()
        .duration(1100)
        .text(dimensionLabels)
        .attr("transform", "translate(0,-5) rotate(" + __.dimensionTitleRotation + ")");

    // Exit
    g_data.exit().remove();

    g = pc.svg.selectAll(".dimension");
    g.transition().duration(1100)
      .attr("transform", function(p) { return "translate(" + position(p) + ")"; })
      .style("opacity", 1);

    pc.svg.selectAll(".axis")
      .transition()
        .duration(1100)
        .each(function(d) { d3.select(this).call(axis.scale(yscale[d])); });

    if (flags.brushable) pc.brushable();
    if (flags.reorderable) pc.reorderable();
    if (pc.brushMode() !== "None") {
      var mode = pc.brushMode();
      pc.brushMode("None");
      pc.brushMode(mode);
    }
    return this;
  };

  // Jason Davies, http://bl.ocks.org/1341281
  pc.reorderable = function() {
    if (!g) pc.createAxes();

    g.style("cursor", "move")
      .call(d3.behavior.drag()
        .on("dragstart", function(d) {
          dragging[d] = this.__origin__ = xscale(d);
        })
        .on("drag", function(d) {
          dragging[d] = Math.min(w(), Math.max(0, this.__origin__ += d3.event.dx));
          __.dimensions.sort(function(a, b) { return position(a) - position(b); });
          xscale.domain(__.dimensions);
          pc.render();
          g.attr("transform", function(d) { return "translate(" + position(d) + ")"; });
        })
        .on("dragend", function(d) {
          // Let's see if the order has changed and send out an event if so.
          var i = 0,
              j = __.dimensions.indexOf(d),
              elem = this,
              parent = this.parentElement;

          while((elem = elem.previousElementSibling) != null) ++i;
          if (i !== j) {
            events.axesreorder.call(pc, __.dimensions);
            // We now also want to reorder the actual dom elements that represent
            // the axes. That is, the g.dimension elements. If we don't do this,
            // we get a weird and confusing transition when updateAxes is called.
            // This is due to the fact that, initially the nth g.dimension element
            // represents the nth axis. However, after a manual reordering,
            // without reordering the dom elements, the nth dom elements no longer
            // necessarily represents the nth axis.
            //
            // i is the original index of the dom element
            // j is the new index of the dom element
            if (i > j) { // Element moved left
              parent.insertBefore(this, parent.children[j - 1]);
            } else {     // Element moved right
              if ((j + 1) < parent.children.length) {
                parent.insertBefore(this, parent.children[j + 1]);
              } else {
                parent.appendChild(this);
              }
            }
          }

          delete this.__origin__;
          delete dragging[d];
          d3.select(this).transition().attr("transform", "translate(" + xscale(d) + ")");
          pc.render();
        }));
    flags.reorderable = true;
    return this;
  };

  // Reorder dimensions, such that the highest value (visually) is on the left and
  // the lowest on the right. Visual values are determined by the data values in
  // the given row.
  pc.reorder = function(rowdata) {
    var dims = __.dimensions.slice(0);
    __.dimensions.sort(function(a, b) {
      var pixelDifference = yscale[a](rowdata[a]) - yscale[b](rowdata[b]);

      // Array.sort is not necessarily stable, this means that if pixelDifference is zero
      // the ordering of dimensions might change unexpectedly. This is solved by sorting on
      // variable name in that case.
      if (pixelDifference === 0) {
        return a.localeCompare(b);
      } // else
      return pixelDifference;
    });

    // NOTE: this is relatively cheap given that:
    // number of dimensions < number of data items
    // Thus we check equality of order to prevent rerendering when this is the case.
    var reordered = false;
    dims.some(function(val, index) {
      reordered = val !== __.dimensions[index];
      return reordered;
    });

    if (reordered) {
      xscale.domain(__.dimensions);
      var highlighted = __.highlighted.slice(0);
      pc.unhighlight();

      g.transition()
        .duration(1500)
        .attr("transform", function(d) {
          return "translate(" + xscale(d) + ")";
        });
      pc.render();

      // pc.highlight() does not check whether highlighted is length zero, so we do that here.
      if (highlighted.length !== 0) {
        pc.highlight(highlighted);
      }
    }
  }

  // pairs of adjacent dimensions
  pc.adjacent_pairs = function(arr) {
    var ret = [];
    for (var i = 0; i < arr.length-1; i++) {
      ret.push([arr[i],arr[i+1]]);
    };
    return ret;
  };

  var brush = {
    modes: {
      "None": {
        install: function(pc) {},            // Nothing to be done.
        uninstall: function(pc) {},          // Nothing to be done.
        selected: function() { return []; }, // Nothing to return
        brushState: function() { return {}; }
      }
    },
    mode: "None",
    predicate: "AND",
    currentMode: function() {
      return this.modes[this.mode];
    }
  };

  // This function can be used for 'live' updates of brushes. That is, during the
  // specification of a brush, this method can be called to update the view.
  //
  // @param newSelection - The new set of data items that is currently contained
  //                       by the brushes
  function brushUpdated(newSelection) {
    __.brushed = newSelection;
    events.brush.call(pc,__.brushed);
    pc.renderBrushed();
  }

  function brushPredicate(predicate) {
    if (!arguments.length) { return brush.predicate; }

    predicate = String(predicate).toUpperCase();
    if (predicate !== "AND" && predicate !== "OR") {
      throw "Invalid predicate " + predicate;
    }

    brush.predicate = predicate;
    __.brushed = brush.currentMode().selected();
    pc.renderBrushed();
    return pc;
  }

  pc.brushModes = function() {
    return Object.getOwnPropertyNames(brush.modes);
  };

  pc.brushMode = function(mode) {
    if (arguments.length === 0) {
      return brush.mode;
    }

    if (pc.brushModes().indexOf(mode) === -1) {
      throw "pc.brushmode: Unsupported brush mode: " + mode;
    }

    // Make sure that we don't trigger unnecessary events by checking if the mode
    // actually changes.
    if (mode !== brush.mode) {
      // When changing brush modes, the first thing we need to do is clearing any
      // brushes from the current mode, if any.
      if (brush.mode !== "None") {
        pc.brushReset();
      }

      // Next, we need to 'uninstall' the current brushMode.
      brush.modes[brush.mode].uninstall(pc);
      // Finally, we can install the requested one.
      brush.mode = mode;
      brush.modes[brush.mode].install();
      if (mode === "None") {
        delete pc.brushPredicate;
      } else {
        pc.brushPredicate = brushPredicate;
      }
    }

    return pc;
  };

  // brush mode: 1D-Axes

  (function() {
    var brushes = {};

    function is_brushed(p) {
      return !brushes[p].empty();
    }

    // data within extents
    function selected() {
      var actives = __.dimensions.filter(is_brushed),
          extents = actives.map(function(p) { return brushes[p].extent(); });

      // We don't want to return the full data set when there are no axes brushed.
      // Actually, when there are no axes brushed, by definition, no items are
      // selected. So, let's avoid the filtering and just return false.
      //if (actives.length === 0) return false;

      // Resolves broken examples for now. They expect to get the full dataset back from empty brushes
      if (actives.length === 0) return __.data;

      // test if within range
      var within = {
        "date": function(d,p,dimension) {
    if (typeof yscale[p].rangePoints === "function") { // if it is ordinal
            return extents[dimension][0] <= yscale[p](d[p]) && yscale[p](d[p]) <= extents[dimension][1]
          } else {
            return extents[dimension][0] <= d[p] && d[p] <= extents[dimension][1]
          }
        },
        "number": function(d,p,dimension) {
          if (typeof yscale[p].rangePoints === "function") { // if it is ordinal
            return extents[dimension][0] <= yscale[p](d[p]) && yscale[p](d[p]) <= extents[dimension][1]
          } else {
            return extents[dimension][0] <= d[p] && d[p] <= extents[dimension][1]
          }
        },
        "string": function(d,p,dimension) {
          return extents[dimension][0] <= yscale[p](d[p]) && yscale[p](d[p]) <= extents[dimension][1]
        }
      };

      return __.data
        .filter(function(d) {
          switch(brush.predicate) {
          case "AND":
            return actives.every(function(p, dimension) {
              return within[__.types[p]](d,p,dimension);
            });
          case "OR":
            return actives.some(function(p, dimension) {
              return within[__.types[p]](d,p,dimension);
            });
          default:
            throw "Unknown brush predicate " + __.brushPredicate;
          }
        });
    };

    function brushExtents(extents) {
      if(typeof(extents) === 'undefined')
      {
        var extents = {};
        __.dimensions.forEach(function(d) {
          var brush = brushes[d];
          if (brush !== undefined && !brush.empty()) {
            var extent = brush.extent();
            extent.sort(d3.ascending);
            extents[d] = extent;
          }
        });
        return extents;
      }
      else
      {
        //first get all the brush selections
        var brushSelections = {};
        g.selectAll('.brush')
          .each(function(d) {
            brushSelections[d] = d3.select(this);

        });

        // loop over each dimension and update appropriately (if it was passed in through extents)
        __.dimensions.forEach(function(d) {
          if (extents[d] === undefined){
            return;
          }

          var brush = brushes[d];
          if (brush !== undefined) {
            //update the extent
            brush.extent(extents[d]);

            //redraw the brush
            brush(brushSelections[d]);

            //fire some events
            brush.event(brushSelections[d]);
          }
        });

        //redraw the chart
        pc.renderBrushed();
      }
    }
    function brushFor(axis) {
      var brush = d3.svg.brush();

      brush
        .y(yscale[axis])
        .on("brushstart", function() {
          if(d3.event.sourceEvent !== null) {
            d3.event.sourceEvent.stopPropagation();
          }
        })
        .on("brush", function() {
          brushUpdated(selected());
        })
        .on("brushend", function() {
          events.brushend.call(pc, __.brushed);
        });

      brushes[axis] = brush;
      return brush;
    };
    function brushReset(dimension) {
      __.brushed = false;
      if (g) {
        g.selectAll('.brush')
          .each(function(d) {
            d3.select(this).call(
              brushes[d].clear()
            );
          });
        pc.renderBrushed();
      }
      return this;
    };

    function install() {
      if (!g) pc.createAxes();

      // Add and store a brush for each axis.
      g.append("svg:g")
        .attr("class", "brush")
        .each(function(d) {
          d3.select(this).call(brushFor(d));
        })
        .selectAll("rect")
          .style("visibility", null)
          .attr("x", -15)
          .attr("width", 30);

      pc.brushExtents = brushExtents;
      pc.brushReset = brushReset;
      return pc;
    };

    brush.modes["1D-axes"] = {
      install: install,
      uninstall: function() {
        g.selectAll(".brush").remove();
        brushes = {};
        delete pc.brushExtents;
        delete pc.brushReset;
      },
      selected: selected,
      brushState: brushExtents
    }
  })();
  // brush mode: 2D-strums
  // bl.ocks.org/syntagmatic/5441022

  (function() {
    var strums = {},
        strumRect;

    function drawStrum(strum, activePoint) {
      var svg = pc.selection.select("svg").select("g#strums"),
          id = strum.dims.i,
          points = [strum.p1, strum.p2],
          line = svg.selectAll("line#strum-" + id).data([strum]),
          circles = svg.selectAll("circle#strum-" + id).data(points),
          drag = d3.behavior.drag();

      line.enter()
        .append("line")
        .attr("id", "strum-" + id)
        .attr("class", "strum");

      line
        .attr("x1", function(d) { return d.p1[0]; })
        .attr("y1", function(d) { return d.p1[1]; })
        .attr("x2", function(d) { return d.p2[0]; })
        .attr("y2", function(d) { return d.p2[1]; })
        .attr("stroke", "black")
        .attr("stroke-width", 2);

      drag
        .on("drag", function(d, i) {
          var ev = d3.event;
          i = i + 1;
          strum["p" + i][0] = Math.min(Math.max(strum.minX + 1, ev.x), strum.maxX);
          strum["p" + i][1] = Math.min(Math.max(strum.minY, ev.y), strum.maxY);
          drawStrum(strum, i - 1);
        })
        .on("dragend", onDragEnd());

      circles.enter()
        .append("circle")
        .attr("id", "strum-" + id)
        .attr("class", "strum");

      circles
        .attr("cx", function(d) { return d[0]; })
        .attr("cy", function(d) { return d[1]; })
        .attr("r", 5)
        .style("opacity", function(d, i) {
          return (activePoint !== undefined && i === activePoint) ? 0.8 : 0;
        })
        .on("mouseover", function() {
          d3.select(this).style("opacity", 0.8);
        })
        .on("mouseout", function() {
          d3.select(this).style("opacity", 0);
        })
        .call(drag);
    }

    function dimensionsForPoint(p) {
      var dims = { i: -1, left: undefined, right: undefined };
      __.dimensions.some(function(dim, i) {
        if (xscale(dim) < p[0]) {
          var next = __.dimensions[i + 1];
          dims.i = i;
          dims.left = dim;
          dims.right = next;
          return false;
        }
        return true;
      });

      if (dims.left === undefined) {
        // Event on the left side of the first axis.
        dims.i = 0;
        dims.left = __.dimensions[0];
        dims.right = __.dimensions[1];
      } else if (dims.right === undefined) {
        // Event on the right side of the last axis
        dims.i = __.dimensions.length - 1;
        dims.right = dims.left;
        dims.left = __.dimensions[__.dimensions.length - 2];
      }

      return dims;
    }

    function onDragStart() {
      // First we need to determine between which two axes the sturm was started.
      // This will determine the freedom of movement, because a strum can
      // logically only happen between two axes, so no movement outside these axes
      // should be allowed.
      return function() {
        var p = d3.mouse(strumRect[0][0]),
            dims,
            strum;

        p[0] = p[0] - __.margin.left;
        p[1] = p[1] - __.margin.top;

        dims = dimensionsForPoint(p),
        strum = {
          p1: p,
          dims: dims,
          minX: xscale(dims.left),
          maxX: xscale(dims.right),
          minY: 0,
          maxY: h()
        };

        strums[dims.i] = strum;
        strums.active = dims.i;

        // Make sure that the point is within the bounds
        strum.p1[0] = Math.min(Math.max(strum.minX, p[0]), strum.maxX);
        strum.p2 = strum.p1.slice();
      };
    }

    function onDrag() {
      return function() {
        var ev = d3.event,
            strum = strums[strums.active];

        // Make sure that the point is within the bounds
        strum.p2[0] = Math.min(Math.max(strum.minX + 1, ev.x - __.margin.left), strum.maxX);
        strum.p2[1] = Math.min(Math.max(strum.minY, ev.y - __.margin.top), strum.maxY);
        drawStrum(strum, 1);
      };
    }

    function containmentTest(strum, width) {
      var p1 = [strum.p1[0] - strum.minX, strum.p1[1] - strum.minX],
          p2 = [strum.p2[0] - strum.minX, strum.p2[1] - strum.minX],
          m1 = 1 - width / p1[0],
          b1 = p1[1] * (1 - m1),
          m2 = 1 - width / p2[0],
          b2 = p2[1] * (1 - m2);

      // test if point falls between lines
      return function(p) {
        var x = p[0],
            y = p[1],
            y1 = m1 * x + b1,
            y2 = m2 * x + b2;

        if (y > Math.min(y1, y2) && y < Math.max(y1, y2)) {
          return true;
        }

        return false;
      };
    }

    function selected() {
      var ids = Object.getOwnPropertyNames(strums),
          brushed = __.data;

      // Get the ids of the currently active strums.
      ids = ids.filter(function(d) {
        return !isNaN(d);
      });

      function crossesStrum(d, id) {
        var strum = strums[id],
            test = containmentTest(strum, strums.width(id)),
            d1 = strum.dims.left,
            d2 = strum.dims.right,
            y1 = yscale[d1],
            y2 = yscale[d2],
            point = [y1(d[d1]) - strum.minX, y2(d[d2]) - strum.minX];
        return test(point);
      }

      if (ids.length === 0) { return brushed; }

      return brushed.filter(function(d) {
        switch(brush.predicate) {
        case "AND":
          return ids.every(function(id) { return crossesStrum(d, id); });
        case "OR":
          return ids.some(function(id) { return crossesStrum(d, id); });
        default:
          throw "Unknown brush predicate " + __.brushPredicate;
        }
      });
    }

    function removeStrum() {
      var strum = strums[strums.active],
          svg = pc.selection.select("svg").select("g#strums");

      delete strums[strums.active];
      strums.active = undefined;
      svg.selectAll("line#strum-" + strum.dims.i).remove();
      svg.selectAll("circle#strum-" + strum.dims.i).remove();
    }

    function onDragEnd() {
      return function() {
        var brushed = __.data,
            strum = strums[strums.active];

        // Okay, somewhat unexpected, but not totally unsurprising, a mousclick is
        // considered a drag without move. So we have to deal with that case
        if (strum && strum.p1[0] === strum.p2[0] && strum.p1[1] === strum.p2[1]) {
          removeStrum(strums);
        }

        brushed = selected(strums);
        strums.active = undefined;
        __.brushed = brushed;
        pc.renderBrushed();
        events.brushend.call(pc, __.brushed);
      };
    }

    function brushReset(strums) {
      return function() {
        var ids = Object.getOwnPropertyNames(strums).filter(function(d) {
          return !isNaN(d);
        });

        ids.forEach(function(d) {
          strums.active = d;
          removeStrum(strums);
        });
        onDragEnd(strums)();
      };
    }

    function install() {
      var drag = d3.behavior.drag();

      // Map of current strums. Strums are stored per segment of the PC. A segment,
      // being the area between two axes. The left most area is indexed at 0.
      strums.active = undefined;
      // Returns the width of the PC segment where currently a strum is being
      // placed. NOTE: even though they are evenly spaced in our current
      // implementation, we keep for when non-even spaced segments are supported as
      // well.
      strums.width = function(id) {
        var strum = strums[id];

        if (strum === undefined) {
          return undefined;
        }

        return strum.maxX - strum.minX;
      };

      pc.on("axesreorder.strums", function() {
        var ids = Object.getOwnPropertyNames(strums).filter(function(d) {
          return !isNaN(d);
        });

        // Checks if the first dimension is directly left of the second dimension.
        function consecutive(first, second) {
          var length = __.dimensions.length;
          return __.dimensions.some(function(d, i) {
            return (d === first)
              ? i + i < length && __.dimensions[i + 1] === second
              : false;
          });
        }

        if (ids.length > 0) { // We have some strums, which might need to be removed.
          ids.forEach(function(d) {
            var dims = strums[d].dims;
            strums.active = d;
            // If the two dimensions of the current strum are not next to each other
            // any more, than we'll need to remove the strum. Otherwise we keep it.
            if (!consecutive(dims.left, dims.right)) {
              removeStrum(strums);
            }
          });
          onDragEnd(strums)();
        }
      });

      // Add a new svg group in which we draw the strums.
      pc.selection.select("svg").append("g")
        .attr("id", "strums")
        .attr("transform", "translate(" + __.margin.left + "," + __.margin.top + ")");

      // Install the required brushReset function
      pc.brushReset = brushReset(strums);

      drag
        .on("dragstart", onDragStart(strums))
        .on("drag", onDrag(strums))
        .on("dragend", onDragEnd(strums));

      // NOTE: The styling needs to be done here and not in the css. This is because
      //       for 1D brushing, the canvas layers should not listen to
      //       pointer-events.
      strumRect = pc.selection.select("svg").insert("rect", "g#strums")
        .attr("id", "strum-events")
        .attr("x", __.margin.left)
        .attr("y", __.margin.top)
        .attr("width", w())
        .attr("height", h() + 2)
        .style("opacity", 0)
        .call(drag);
    }

    brush.modes["2D-strums"] = {
      install: install,
      uninstall: function() {
        pc.selection.select("svg").select("g#strums").remove();
        pc.selection.select("svg").select("rect#strum-events").remove();
        pc.on("axesreorder.strums", undefined);
        delete pc.brushReset;

        strumRect = undefined;
      },
      selected: selected,
      brushState: function () { return strums; }
    };

  }());

  // brush mode: 1D-Axes with multiple extents
  // requires d3.svg.multibrush

  (function() {
    if (typeof d3.svg.multibrush !== 'function') {
      return;
    }
    var brushes = {};

    function is_brushed(p) {
      return !brushes[p].empty();
    }

    // data within extents
    function selected() {
      var actives = __.dimensions.filter(is_brushed),
          extents = actives.map(function(p) { return brushes[p].extent(); });

      // We don't want to return the full data set when there are no axes brushed.
      // Actually, when there are no axes brushed, by definition, no items are
      // selected. So, let's avoid the filtering and just return false.
      //if (actives.length === 0) return false;

      // Resolves broken examples for now. They expect to get the full dataset back from empty brushes
      if (actives.length === 0) return __.data;

      // test if within range
      var within = {
        "date": function(d,p,dimension,b) {
          if (typeof yscale[p].rangePoints === "function") { // if it is ordinal
            return b[0] <= yscale[p](d[p]) && yscale[p](d[p]) <= b[1]
          } else {
              return b[0] <= d[p] && d[p] <= b[1]
          }
        },
        "number": function(d,p,dimension,b) {
          if (typeof yscale[p].rangePoints === "function") { // if it is ordinal
            return b[0] <= yscale[p](d[p]) && yscale[p](d[p]) <= b[1]
          } else {
              return b[0] <= d[p] && d[p] <= b[1]
          }
        },
        "string": function(d,p,dimension,b) {
          return b[0] <= yscale[p](d[p]) && yscale[p](d[p]) <= b[1]
        }
      };

      return __.data
      .filter(function(d) {
        switch(brush.predicate) {
        case "AND":
          return actives.every(function(p, dimension) {
            return extents[dimension].some(function(b) {
              return within[__.types[p]](d,p,dimension,b);
            });
          });
        case "OR":
          return actives.some(function(p, dimension) {
            return extents[dimension].some(function(b) {
                return within[__.types[p]](d,p,dimension,b);
              });
          });
        default:
          throw "Unknown brush predicate " + __.brushPredicate;
        }
      });
    };

    function brushExtents() {
      var extents = {};
      __.dimensions.forEach(function(d) {
        var brush = brushes[d];
        if (brush !== undefined && !brush.empty()) {
          var extent = brush.extent();
          extents[d] = extent;
        }
      });
      return extents;
    }

    function brushFor(axis) {
      var brush = d3.svg.multibrush();

      brush
        .y(yscale[axis])
        .on("brushstart", function() {
          if(d3.event.sourceEvent !== null) {
            d3.event.sourceEvent.stopPropagation();
          }
        })
        .on("brush", function() {
          brushUpdated(selected());
        })
        .on("brushend", function() {
        // d3.svg.multibrush clears extents just before calling 'brushend'
        // so we have to update here again.
        // This fixes issue #103 for now, but should be changed in d3.svg.multibrush
        // to avoid unnecessary computation.
        brushUpdated(selected());
          events.brushend.call(pc, __.brushed);
        })
        .extentAdaption(function(selection) {
          selection
          .style("visibility", null)
            .attr("x", -15)
            .attr("width", 30);
        })
        .resizeAdaption(function(selection) {
         selection
           .selectAll("rect")
           .attr("x", -15)
           .attr("width", 30);
        });

      brushes[axis] = brush;
      return brush;
    }

    function brushReset(dimension) {
      __.brushed = false;
      if (g) {
        g.selectAll('.brush')
          .each(function(d) {
            d3.select(this).call(
              brushes[d].clear()
            );
          });
        pc.renderBrushed();
      }
      return this;
    };

    function install() {
      if (!g) pc.createAxes();

      // Add and store a brush for each axis.
      g.append("svg:g")
        .attr("class", "brush")
        .each(function(d) {
          d3.select(this).call(brushFor(d));
        })
        .selectAll("rect")
          .style("visibility", null)
          .attr("x", -15)
          .attr("width", 30);

      pc.brushExtents = brushExtents;
      pc.brushReset = brushReset;
      return pc;
    }

    brush.modes["1D-axes-multi"] = {
      install: install,
      uninstall: function() {
        g.selectAll(".brush").remove();
        brushes = {};
        delete pc.brushExtents;
        delete pc.brushReset;
      },
      selected: selected,
      brushState: brushExtents
    }
  })();
  // brush mode: angular
  // code based on 2D.strums.js

  (function() {
    var arcs = {},
        strumRect;

    function drawStrum(arc, activePoint) {
      var svg = pc.selection.select("svg").select("g#arcs"),
          id = arc.dims.i,
          points = [arc.p2, arc.p3],
          line = svg.selectAll("line#arc-" + id).data([{p1:arc.p1,p2:arc.p2},{p1:arc.p1,p2:arc.p3}]),
          circles = svg.selectAll("circle#arc-" + id).data(points),
          drag = d3.behavior.drag(),
          path = svg.selectAll("path#arc-" + id).data([arc]);

      path.enter()
        .append("path")
        .attr("id", "arc-" + id)
        .attr("class", "arc")
        .style("fill", "orange")
        .style("opacity", 0.5);

      path
        .attr("d", arc.arc)
        .attr("transform", "translate(" + arc.p1[0] + "," + arc.p1[1] + ")");

      line.enter()
        .append("line")
        .attr("id", "arc-" + id)
        .attr("class", "arc");

      line
        .attr("x1", function(d) { return d.p1[0]; })
        .attr("y1", function(d) { return d.p1[1]; })
        .attr("x2", function(d) { return d.p2[0]; })
        .attr("y2", function(d) { return d.p2[1]; })
        .attr("stroke", "black")
        .attr("stroke-width", 2);

      drag
        .on("drag", function(d, i) {
          var ev = d3.event,
            angle = 0;

          i = i + 2;

          arc["p" + i][0] = Math.min(Math.max(arc.minX + 1, ev.x), arc.maxX);
          arc["p" + i][1] = Math.min(Math.max(arc.minY, ev.y), arc.maxY);

          angle = i === 3 ? arcs.startAngle(id) : arcs.endAngle(id);

          if ((arc.startAngle < Math.PI && arc.endAngle < Math.PI && angle < Math.PI) ||
              (arc.startAngle >= Math.PI && arc.endAngle >= Math.PI && angle >= Math.PI)) {

            if (i === 2) {
              arc.endAngle = angle;
              arc.arc.endAngle(angle);
            } else if (i === 3) {
              arc.startAngle = angle;
              arc.arc.startAngle(angle);
            }

          }

          drawStrum(arc, i - 2);
        })
        .on("dragend", onDragEnd());

      circles.enter()
        .append("circle")
        .attr("id", "arc-" + id)
        .attr("class", "arc");

      circles
        .attr("cx", function(d) { return d[0]; })
        .attr("cy", function(d) { return d[1]; })
        .attr("r", 5)
        .style("opacity", function(d, i) {
          return (activePoint !== undefined && i === activePoint) ? 0.8 : 0;
        })
        .on("mouseover", function() {
          d3.select(this).style("opacity", 0.8);
        })
        .on("mouseout", function() {
          d3.select(this).style("opacity", 0);
        })
        .call(drag);
    }

    function dimensionsForPoint(p) {
      var dims = { i: -1, left: undefined, right: undefined };
      __.dimensions.some(function(dim, i) {
        if (xscale(dim) < p[0]) {
          var next = __.dimensions[i + 1];
          dims.i = i;
          dims.left = dim;
          dims.right = next;
          return false;
        }
        return true;
      });

      if (dims.left === undefined) {
        // Event on the left side of the first axis.
        dims.i = 0;
        dims.left = __.dimensions[0];
        dims.right = __.dimensions[1];
      } else if (dims.right === undefined) {
        // Event on the right side of the last axis
        dims.i = __.dimensions.length - 1;
        dims.right = dims.left;
        dims.left = __.dimensions[__.dimensions.length - 2];
      }

      return dims;
    }

    function onDragStart() {
      // First we need to determine between which two axes the arc was started.
      // This will determine the freedom of movement, because a arc can
      // logically only happen between two axes, so no movement outside these axes
      // should be allowed.
      return function() {
        var p = d3.mouse(strumRect[0][0]),
            dims,
            arc;

        p[0] = p[0] - __.margin.left;
        p[1] = p[1] - __.margin.top;

        dims = dimensionsForPoint(p),
        arc = {
          p1: p,
          dims: dims,
          minX: xscale(dims.left),
          maxX: xscale(dims.right),
          minY: 0,
          maxY: h(),
          startAngle: undefined,
          endAngle: undefined,
          arc: d3.svg.arc().innerRadius(0)
        };

        arcs[dims.i] = arc;
        arcs.active = dims.i;

        // Make sure that the point is within the bounds
        arc.p1[0] = Math.min(Math.max(arc.minX, p[0]), arc.maxX);
        arc.p2 = arc.p1.slice();
        arc.p3 = arc.p1.slice();
      };
    }

    function onDrag() {
      return function() {
        var ev = d3.event,
            arc = arcs[arcs.active];

        // Make sure that the point is within the bounds
        arc.p2[0] = Math.min(Math.max(arc.minX + 1, ev.x - __.margin.left), arc.maxX);
        arc.p2[1] = Math.min(Math.max(arc.minY, ev.y - __.margin.top), arc.maxY);
        arc.p3 = arc.p2.slice();
  //      console.log(arcs.angle(arcs.active));
  //      console.log(signedAngle(arcs.unsignedAngle(arcs.active)));
        drawStrum(arc, 1);
      };
    }

    // some helper functions
    function hypothenuse(a, b) {
      return Math.sqrt(a*a + b*b);
    }

    var rad = (function() {
      var c = Math.PI / 180;
      return function(angle) {
        return angle * c;
      };
    })();

    var deg = (function() {
      var c = 180 / Math.PI;
      return function(angle) {
        return angle * c;
      };
    })();

    // [0, 2*PI] -> [-PI/2, PI/2]
    var signedAngle = function(angle) {
      var ret = angle;
      if (angle > Math.PI) {
      ret = angle - 1.5 * Math.PI;
      ret = angle - 1.5 * Math.PI;
      } else {
        ret = angle - 0.5 * Math.PI;
        ret = angle - 0.5 * Math.PI;
      }
      return -ret;
    }

    /**
     * angles are stored in radians from in [0, 2*PI], where 0 in 12 o'clock.
     * However, one can only select lines from 0 to PI, so we compute the
     * 'signed' angle, where 0 is the horizontal line (3 o'clock), and +/- PI/2
     * are 12 and 6 o'clock respectively.
     */
    function containmentTest(arc) {
      var startAngle = signedAngle(arc.startAngle);
      var endAngle = signedAngle(arc.endAngle);

      if (startAngle > endAngle) {
        var tmp = startAngle;
        startAngle = endAngle;
        endAngle = tmp;
      }

      // test if segment angle is contained in angle interval
      return function(a) {

        if (a >= startAngle && a <= endAngle) {
          return true;
        }

        return false;
      };
    }

    function selected() {
      var ids = Object.getOwnPropertyNames(arcs),
          brushed = __.data;

      // Get the ids of the currently active arcs.
      ids = ids.filter(function(d) {
        return !isNaN(d);
      });

      function crossesStrum(d, id) {
        var arc = arcs[id],
            test = containmentTest(arc),
            d1 = arc.dims.left,
            d2 = arc.dims.right,
            y1 = yscale[d1],
            y2 = yscale[d2],
            a = arcs.width(id),
            b = y1(d[d1]) - y2(d[d2]),
            c = hypothenuse(a, b),
            angle = Math.asin(b/c); // rad in [-PI/2, PI/2]
        return test(angle);
      }

      if (ids.length === 0) { return brushed; }

      return brushed.filter(function(d) {
        switch(brush.predicate) {
        case "AND":
          return ids.every(function(id) { return crossesStrum(d, id); });
        case "OR":
          return ids.some(function(id) { return crossesStrum(d, id); });
        default:
          throw "Unknown brush predicate " + __.brushPredicate;
        }
      });
    }

    function removeStrum() {
      var arc = arcs[arcs.active],
          svg = pc.selection.select("svg").select("g#arcs");

      delete arcs[arcs.active];
      arcs.active = undefined;
      svg.selectAll("line#arc-" + arc.dims.i).remove();
      svg.selectAll("circle#arc-" + arc.dims.i).remove();
      svg.selectAll("path#arc-" + arc.dims.i).remove();
    }

    function onDragEnd() {
      return function() {
        var brushed = __.data,
            arc = arcs[arcs.active];

        // Okay, somewhat unexpected, but not totally unsurprising, a mousclick is
        // considered a drag without move. So we have to deal with that case
        if (arc && arc.p1[0] === arc.p2[0] && arc.p1[1] === arc.p2[1]) {
          removeStrum(arcs);
        }

        if (arc) {
          var angle = arcs.startAngle(arcs.active);

          arc.startAngle = angle;
            arc.endAngle = angle;
            arc.arc
              .outerRadius(arcs.length(arcs.active))
              .startAngle(angle)
              .endAngle(angle);
        }


        brushed = selected(arcs);
        arcs.active = undefined;
        __.brushed = brushed;
        pc.renderBrushed();
        events.brushend.call(pc, __.brushed);
      };
    }

    function brushReset(arcs) {
      return function() {
        var ids = Object.getOwnPropertyNames(arcs).filter(function(d) {
          return !isNaN(d);
        });

        ids.forEach(function(d) {
          arcs.active = d;
          removeStrum(arcs);
        });
        onDragEnd(arcs)();
      };
    }

    function install() {
      var drag = d3.behavior.drag();

      // Map of current arcs. arcs are stored per segment of the PC. A segment,
      // being the area between two axes. The left most area is indexed at 0.
      arcs.active = undefined;
      // Returns the width of the PC segment where currently a arc is being
      // placed. NOTE: even though they are evenly spaced in our current
      // implementation, we keep for when non-even spaced segments are supported as
      // well.
      arcs.width = function(id) {
        var arc = arcs[id];

        if (arc === undefined) {
          return undefined;
        }

        return arc.maxX - arc.minX;
      };

      // returns angles in [-PI/2, PI/2]
      angle = function(p1, p2) {
          var a = p1[0] - p2[0],
            b = p1[1] - p2[1],
            c = hypothenuse(a, b);

          return Math.asin(b/c);
      }

      // returns angles in [0, 2 * PI]
      arcs.endAngle = function(id) {
        var arc = arcs[id];
        if (arc === undefined) {
              return undefined;
          }
        var sAngle = angle(arc.p1, arc.p2),
          uAngle = -sAngle + Math.PI / 2;

        if (arc.p1[0] > arc.p2[0]) {
          uAngle = 2 * Math.PI - uAngle;
        }

        return uAngle;
      }

      arcs.startAngle = function(id) {
        var arc = arcs[id];
        if (arc === undefined) {
              return undefined;
          }

        var sAngle = angle(arc.p1, arc.p3),
          uAngle = -sAngle + Math.PI / 2;

        if (arc.p1[0] > arc.p3[0]) {
          uAngle = 2 * Math.PI - uAngle;
        }

        return uAngle;
      }

      arcs.length = function(id) {
        var arc = arcs[id];

          if (arc === undefined) {
            return undefined;
          }

          var a = arc.p1[0] - arc.p2[0],
            b = arc.p1[1] - arc.p2[1],
            c = hypothenuse(a, b);

          return(c);
      }

      pc.on("axesreorder.arcs", function() {
        var ids = Object.getOwnPropertyNames(arcs).filter(function(d) {
          return !isNaN(d);
        });

        // Checks if the first dimension is directly left of the second dimension.
        function consecutive(first, second) {
          var length = __.dimensions.length;
          return __.dimensions.some(function(d, i) {
            return (d === first)
              ? i + i < length && __.dimensions[i + 1] === second
              : false;
          });
        }

        if (ids.length > 0) { // We have some arcs, which might need to be removed.
          ids.forEach(function(d) {
            var dims = arcs[d].dims;
            arcs.active = d;
            // If the two dimensions of the current arc are not next to each other
            // any more, than we'll need to remove the arc. Otherwise we keep it.
            if (!consecutive(dims.left, dims.right)) {
              removeStrum(arcs);
            }
          });
          onDragEnd(arcs)();
        }
      });

      // Add a new svg group in which we draw the arcs.
      pc.selection.select("svg").append("g")
        .attr("id", "arcs")
        .attr("transform", "translate(" + __.margin.left + "," + __.margin.top + ")");

      // Install the required brushReset function
      pc.brushReset = brushReset(arcs);

      drag
        .on("dragstart", onDragStart(arcs))
        .on("drag", onDrag(arcs))
        .on("dragend", onDragEnd(arcs));

      // NOTE: The styling needs to be done here and not in the css. This is because
      //       for 1D brushing, the canvas layers should not listen to
      //       pointer-events.
      strumRect = pc.selection.select("svg").insert("rect", "g#arcs")
        .attr("id", "arc-events")
        .attr("x", __.margin.left)
        .attr("y", __.margin.top)
        .attr("width", w())
        .attr("height", h() + 2)
        .style("opacity", 0)
        .call(drag);
    }

    brush.modes["angular"] = {
      install: install,
      uninstall: function() {
        pc.selection.select("svg").select("g#arcs").remove();
        pc.selection.select("svg").select("rect#arc-events").remove();
        pc.on("axesreorder.arcs", undefined);
        delete pc.brushReset;

        strumRect = undefined;
      },
      selected: selected,
      brushState: function () { return arcs; }
    };

  }());

  pc.interactive = function() {
    flags.interactive = true;
    return this;
  };

  // expose a few objects
  pc.xscale = xscale;
  pc.yscale = yscale;
  pc.ctx = ctx;
  pc.canvas = canvas;
  pc.g = function() { return g; };

  // rescale for height, width and margins
  // TODO currently assumes chart is brushable, and destroys old brushes
  pc.resize = function() {
    // selection size
    pc.selection.select("svg")
      .attr("width", __.width)
      .attr("height", __.height)
    pc.svg.attr("transform", "translate(" + __.margin.left + "," + __.margin.top + ")");

    // FIXME: the current brush state should pass through
    if (flags.brushable) pc.brushReset();

    // scales
    pc.autoscale();

    // axes, destroys old brushes.
    if (g) pc.createAxes();
    if (flags.brushable) pc.brushable();
    if (flags.reorderable) pc.reorderable();

    events.resize.call(this, {width: __.width, height: __.height, margin: __.margin});
    return this;
  };

  // highlight an array of data
  pc.highlight = function(data) {
    if (arguments.length === 0) {
      return __.highlighted;
    }

    __.highlighted = data;
    pc.clear("highlight");
    d3.selectAll([canvas.foreground, canvas.brushed]).classed("faded", true);
    data.forEach(path_highlight);
    events.highlight.call(this, data);
    return this;
  };

  // clear highlighting
  pc.unhighlight = function() {
    __.highlighted = [];
    pc.clear("highlight");
    d3.selectAll([canvas.foreground, canvas.brushed]).classed("faded", false);
    return this;
  };

  // calculate 2d intersection of line a->b with line c->d
  // points are objects with x and y properties
  pc.intersection =  function(a, b, c, d) {
    return {
      x: ((a.x * b.y - a.y * b.x) * (c.x - d.x) - (a.x - b.x) * (c.x * d.y - c.y * d.x)) / ((a.x - b.x) * (c.y - d.y) - (a.y - b.y) * (c.x - d.x)),
      y: ((a.x * b.y - a.y * b.x) * (c.y - d.y) - (a.y - b.y) * (c.x * d.y - c.y * d.x)) / ((a.x - b.x) * (c.y - d.y) - (a.y - b.y) * (c.x - d.x))
    };
  };

  function position(d) {
    var v = dragging[d];
    return v == null ? xscale(d) : v;
  }
  pc.version = "0.7.0";
    // this descriptive text should live with other introspective methods
    pc.toString = function() { return "Parallel Coordinates: " + __.dimensions.length + " dimensions (" + d3.keys(__.data[0]).length + " total) , " + __.data.length + " rows"; };

    return pc;
  };

  d3.renderQueue = (function(func) {
    var _queue = [],                  // data to be rendered
        _rate = 10,                   // number of calls per frame
        _clear = function() {},       // clearing function
        _i = 0;                       // current iteration

    var rq = function(data) {
      if (data) rq.data(data);
      rq.invalidate();
      _clear();
      rq.render();
    };

    rq.render = function() {
      _i = 0;
      var valid = true;
      rq.invalidate = function() { valid = false; };

      function doFrame() {
        if (!valid) return true;
        if (_i > _queue.length) return true;

        // Typical d3 behavior is to pass a data item *and* its index. As the
        // render queue splits the original data set, we'll have to be slightly
        // more carefull about passing the correct index with the data item.
        var end = Math.min(_i + _rate, _queue.length);
        for (var i = _i; i < end; i++) {
          func(_queue[i], i);
        }
        _i += _rate;
      }

      d3.timer(doFrame);
    };

    rq.data = function(data) {
      rq.invalidate();
      _queue = data.slice(0);
      return rq;
    };

    rq.rate = function(value) {
      if (!arguments.length) return _rate;
      _rate = value;
      return rq;
    };

    rq.remaining = function() {
      return _queue.length - _i;
    };

    // clear the canvas
    rq.clear = function(func) {
      if (!arguments.length) {
        _clear();
        return rq;
      }
      _clear = func;
      return rq;
    };

    rq.invalidate = function() {};

    return rq;
  });
