!!(function($) {
    function drawTwoFactorDoughnut( selector ) {
        var data = JSON.parse($(selector).attr("data-graphData"));
        var label = $(selector).attr("data-graphLabel");

        $(selector)
            .append( $('<svg style="width: 100%; height: 100%;" />' ) )
            .append( $('<div />' ).text( label ) );

        var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);

        var arc = d3.svg.arc()
                    .innerRadius(30)
                    .outerRadius(40)
                    .startAngle(function(d){ return cScale( d[0] ); })
                    .endAngle(function(d){ return cScale( d[1] ); });

        d3.select( $(selector).children("svg")[0] )
            .selectAll("path")
            .data( data )
            .enter()
            .append("path")
            .attr("d", arc)
            .style("fill", function(d, i) { return i == 0 ? "#2B3990" : "#cccccc"; })
            .attr("transform", "translate(40,40)");
    }

    function drawRatioTable ( selector ){
        $me = $(selector);
        var cells = parseInt($me.attr("data-ratio"));

        var columns = Math.ceil(Math.sqrt(cells));
        var newHeight = Math.max(25 - (2*columns), 4);

        var $row;
        for (var i=1; i<= cells; i++){
            if ( i % columns == 1 ){ $row = $('<tr style="height: ' + newHeight + 'px;" />'); }
            $row.append('<td style="border: none; background-color: #2B3990; padding: 1px;" />');
            if ( i % columns == 0 || i == cells ){ $me.append($row); }
        }
    }

    $(function(){
        $(".twofactorpieBehavior").each(function(){ drawTwoFactorDoughnut( $(this) ); });
        $(".ratioBehavior").each(function(){ drawRatioTable( $(this) ); });
    });
}).call(this, jQuery);