var Flipper = function(d, i){
    var size = [300, 300],
        margin = [0, 0, 0, 0],
        flipSpeed = 0.6,
        frontParent, backParent;
    var dispatch = d3.dispatch("hover");

    function exports(_selector){
        var parent = d3.select(_selector)
        var contentWidth = size[0] - margin[0] - margin[2];
        var contentHeight = size[1] - margin[1] - margin[3];
        var root = parent.selectAll("div.flipper-root").data([0]);
        root.enter().append("div").attr("class", "flipper-root")
            .html('<div class="flipper"><div class="front"></div><div class="back"></div></div>');
        root.exit().remove();

        if (frontParent){
            var frontDiv = parent.selectAll('.front').style({
                    width: contentWidth[0] + 'px',
                    height: contentHeight[1] + 'px'
                });
            var frontContent = d3.select(frontParent);
            frontDiv.node().appendChild(frontContent.node());
        }
        if (backParent){
            var backDiv = parent.selectAll('.back').style({
                    width: contentWidth[0] + 'px',
                    height: contentHeight[1] + 'px'
                })
            var backContent = d3.select(backParent);
            backDiv.node().appendChild(backContent.node());
        }

        parent.selectAll('.flipper-root').style({
                '-webkit-perspective': 1000,
                '-moz-perspective': 1000,
                perspective: 1000
            })
            .on('mouseover', function(d, i){
                d3.select(this).select('.flipper')
                    .style({
                        '-webkit-transform': 'rotateY(180deg)',
                        '-moz-transform': 'rotateY(180deg)',
                        transform: 'rotateY(180deg)'
                    });
                dispatch.hover(d, i);
            })
            .on('mouseout', function(){
                d3.select(this).select('.flipper')
                    .style({
                        '-webkit-transform': null,
                        '-moz-transform': null,
                        transform: null
                    });
            });

        parent.selectAll('.flipper-root, .front, .back').style({
                width: size[0] + 'px',
                height: size[1] + 'px'
            });

        parent.selectAll('.flipper').style({
                '-webkit-transition': flipSpeed + 's',
                '-webkit-transform-style': 'preserve-3d',
                '-moz-transition': flipSpeed + 's',
                '-moz-transform-style': 'preserve-3d',
                transition: flipSpeed + 's',
                'transform-style': 'preserve-3d',
                position: 'relative'
            });

        parent.selectAll('.front, .back').style({
                '-webkit-backface-visibility': 'hidden',
                '-moz-backface-visibility': 'hidden',
                'backface-visibility': 'hidden',
                position: 'absolute',
                top: 0,
                left: 0
            });

        parent.selectAll('.front').style({
                'z-index': 2
            });

        parent.selectAll('.back').style({
                '-webkit-transform': 'rotateY(180deg)',
                '-moz-transform': 'rotateY(180deg)',
                transform: 'rotateY(180deg)'
            });

    }

    exports.size = function(_x) {
        if (!arguments.length) return size;
        size = _x;
        return this;
    };

    exports.flipSpeed = function(_x) {
        if (!arguments.length) return flipSpeed;
        flipSpeed = _x;
        return this;
    };

    exports.frontParent = function(_x) {
        if (!arguments.length) return frontParent;
        frontParent = _x;
        return this;
    };

    exports.backParent = function(_x) {
        if (!arguments.length) return backParent;
        backParent = _x;
        return this;
    };

    d3.rebind(exports, dispatch, "on");

    return exports;
}