d3.n1n9 = {};

d3.n1n9.toggleNavigation = function module() {

    var navWidth = 960,
        navHeight = 60,
        navMarginWidth = 50,
        buttonSize = 6,
        fontSize = 10;
    var indexNum = 0;
    var btnColorOut = "#999",
        btnColorOver = "#333",
        btnColorSelected = "#333";
    var dispatch = d3.dispatch("customClick");
    var _svg, _container;

    function _my(_selection) {

        _selection.each(function(_data) {

            if (!_svg) {
                _svg = d3.select(this)
                    .append("svg")
                    .attr({width: navWidth, height: navHeight});

                _container = _svg.append("g").classed("g-navigation", true)
                                    .attr("transform", "translate(" + navMarginWidth/2 + ",0)");
                _container.append("g").classed("g-chart", true);
                _container.append("g").classed("g-focus", true);
                _container.append("g").classed("g-label", true);
            }

            /* button */
            var btns = _container.select(".g-chart")
                    .selectAll(".btn")
                    .data(_data);

            btns
                .enter().append("circle")
                .classed("btn", true)
                .on("mouseover", function(){
                    d3.select(this).attr("fill", btnColorOver);
                })
                .on("click", function(d,i){

                    indexNum = i;

                    d3.selectAll(".btn").attr("fill", btnColorOut);
                    d3.select(this).attr("fill", btnColorSelected);

                    d3.select("#focus").transition().duration(750).attr({
                        cx: d3.select(this).attr("cx")
                    });

                    dispatch.customClick();
                })
                .on("mouseout", function(d,i){
                    if (indexNum != i) {
                        d3.select(this).attr("fill", btnColorOut);
                    } else {
                        d3.select(this).attr("fill", btnColorSelected);
                    }
                });

            btns
                .transition()
                .attr("id", function(d) {
                      return d.value;
                })
                .attr({
                    cx: function(d,i) { return i * navMarginWidth;},
                    cy: buttonSize*2,
                    r: buttonSize,
                    stroke: "none"
                })
                .style("fill", function(d,i) {
                    if (indexNum == i) {
                        d3.select(this).attr("fill", btnColorSelected);
                    } else {
                        d3.select(this).attr("fill", btnColorOut); 
                    }
                });

            btns
                .exit().remove();

            /* label */
            var labels = _container.select(".g-label")
                    .selectAll(".label")
                    .data(_data);

            labels
                .enter().append("text")
                .attr("class", "label");

            labels
                .transition()
                .attr({
                    x: function(d,i) { return i * navMarginWidth;},
                    y: (buttonSize*6),
                    fill: btnColorOut,
                    "text-anchor": "middle",
                    "font-size": fontSize,
                    pointerEvents: "none"
                })
                .text(function(d) {
                    return d.label;
                });

            labels
                .exit().remove();

            /* focus */
            var focus = _container.select(".g-focus")
                    .selectAll(".focusCircle")
                    .data([0]);

            focus
                .enter().append("circle")
                .attr("class", "focusCircle")
                .attr("id", "focus")
                .attr({
                    cx: indexNum * navMarginWidth,
                    cy: buttonSize*2,
                    r: buttonSize+2,
                    fill: "none",
                    "stroke-width": 2,
                    stroke: btnColorSelected
                });

        });
    }

    _my.navWidth = function(_value) {
        if (!arguments.length) return navWidth;
        navWidth = parseFloat(_value);
        return this;
    };

    _my.navHeight = function(_value) {
        if (!arguments.length) return navHeight;
        navHeight = parseFloat(_value);
        return this;
    };

    _my.navMarginWidth = function(_value) {
        if (!arguments.length) return navMarginWidth;
        navMarginWidth = parseFloat(_value);
        return this;
    };

    _my.buttonSize = function(_value) {
        if (!arguments.length) return buttonSize;
        buttonSize = parseFloat(_value);
        return this;
    };

    _my.fontSize = function(_value) {
        if (!arguments.length) return fontSize;
        fontSize = parseFloat(_value);
        return this;
    };

    _my.indexNum = function(_value) {
        if (!arguments.length) return indexNum;
        indexNum = parseInt(_value);
        return this;
    };

    _my.btnColorOut = function(_value) {
        if (!arguments.length) return btnColorOut;
        btnColorOut = _value;
        return this;
    };

    _my.btnColorOver = function(_value) {
        if (!arguments.length) return btnColorOver;
        btnColorOver = _value;
        return this;
    };

    _my.btnColorSelected = function(_value) {
        if (!arguments.length) return btnColorSelected;
        btnColorSelected = _value;
        return this;
    };

    d3.rebind(_my, dispatch, "on");
    return _my;

};