viz.plot.axis = viz_Axis;

function viz_Axis(parent, props) {
    this.parent = parent;
    this.props = props;
    var trans = {
        bottom: [0, parent.height],
        top: [0, 0],
        left: [0, 0],
        right: [parent.width, 0]
    };
    var xy = {
        bottom: 'x',
        top: 'x',
        left: 'y',
        right: 'y'
    }

    this.transform = "translate(" + trans[this.props.position] + ")";
    this.props.xy = xy[this.props.position];
    this.cssclass = "viz-" + this.props.xy + "-axis";
    this.scale = parent[this.props.xy + "scale"];

    // We create header-level CSS to style these elements, because
    // zooming/panning creates new elements with these classes.
    insert_css("." + this.cssclass + " line, " + " ." + this.cssclass + " path", {
        "shape-rendering": "crispEdges",
        "stroke": this.props.axiscolor,
        "fill": "none"
    });
    insert_css("." + this.cssclass + " text", {
        "font-family": "sans-serif",
        "font-size": this.props.fontsize,
        "fill": this.props.fontcolor,
        "stroke": "none"
    });
}

viz_Axis.prototype.draw = function(canvas) {
    this.axis = d3.svg.axis()
        .scale(this.scale)
        .orient(this.props.position)
        .ticks(this.props.nticks)
        .tickValues(this.props.tickvalues)
        .tickFormat(this.props.tickformat);

    this.elem = canvas.select("g." + this.cssclass)
        .attr("transform", this.transform)
        .call(this.axis);
}

viz_Axis.prototype.getGrid = function() {
    var gridprop = {
        nticks: this.props.nticks,
        zorder: this.props.zorder,
        tickvalues: this.props.tickvalues,
        xy: this.props.xy
    }
    if (this.props.grid) {
        for (var key in this.props.grid) {
            gridprop[key] = this.props.grid[key];
        }
    }
    return new viz_Grid(this.parent, gridprop);
};