Raphael.fn.drawWheel = function (cx, cy, r, w, values, opts) {
    opts = opts || {};

    var 
        paper = this,
        rad = Math.PI / 180,
        sectors = [],
        series = this.set(),
        chart = this.set(),
        len = values.length,
        angle = 0,
        total = 0;

    var sector = function (cx, cy, r, w, sa, ea) {
        var 
            r1 = r, r2 = r + w,
            x1 = cx + r1 * Math.sin(sa * rad), y1 = cy - r1 * Math.cos(sa * rad),
            x2 = cx + r2 * Math.sin(sa * rad), y2 = cy - r2 * Math.cos(sa * rad),
            x3 = cx + r2 * Math.sin(ea * rad), y3 = cy - r2 * Math.cos(ea * rad),
            x4 = cx + r1 * Math.sin(ea * rad), y4 = cy - r1 * Math.cos(ea * rad),
            xm = cx + r1 / 2 * Math.sin(-(sa + (ea - sa) / 2) * rad),
            ym = cy + r1 / 2 * Math.cos(-(sa + (ea - sa) / 2) * rad),
            res = [
                'M', x1, y1,
                'L', x2, y2,
                'A', r2, r2, 0, +(ea - sa > 180), 1, x3, y3,
                'L', x4, y4,
                'A', r1, r1, 0, +(ea - sa > 180), 0, x1, y1
            ];

        res.middle = { x: xm, y: ym };
        return res;
    };

    for (var i = 0; i < len; i++) {
        total += values[i];
    }
    for (var i = 0; i < len; i++) {
        var 
            mangle = angle - 360 * values[i] / total / 2,
            path = sector(cx, cy, r, w, angle, angle += 360 * values[i] / total),
            p = this.path(path).attr({
                'fill': opts.colors && opts.colors[i] || 'hsb(' + i / 10 + ', 1, .95)',
                'stroke': opts.stroke || 'none',
                'stroke-width': (opts.strokewidth == null ? 1 : opts.strokewidth)
            });

        p.value = values[i];
        p.middle = path.middle;
        p.mangle = mangle;
        sectors.push(p);
        series.push(p);
    }

    chart.hover = function (fin, fout) {
        fout = fout || function () { };
        var that = this;
        for (var i = 0; i < len; i++) {
            (function (sector, j) {
                var o = {
                    sector: sector,
                    cx: cx,
                    cy: cy,
                    mx: sector.middle.x,
                    my: sector.middle.y,
                    mangle: sector.mangle,
                    r: r,
                    value: values[j],
                    total: total
                };
                sector.mouseover(function () {
                    fin.call(o);
                }).mouseout(function () {
                    fout.call(o);
                });
            })(series[i], i);
        }
        return this;
    };

    chart.each = function (f) {
        var that = this;
        for (var i = 0; i < len; i++) {
            (function (sector, j) {
                var o = {
                    sector: sector,
                    cx: cx,
                    cy: cy,
                    x: sector.middle.x,
                    y: sector.middle.y,
                    mangle: sector.mangle,
                    r: r,
                    value: values[j],
                    total: total
                };
                f.call(o);
            })(series[i], i);
        }
        return this;
    };

    chart.click = function (f) {
        var that = this;
        for (var i = 0; i < len; i++) {
            (function (sector, j) {
                var o = {
                    sector: sector,
                    cx: cx,
                    cy: cy,
                    mx: sector.middle.x,
                    my: sector.middle.y,
                    mangle: sector.mangle,
                    r: r,
                    value: values[j],
                    total: total
                };
                sector.click(function () { f.call(o); });
            })(series[i], i);
        }
        return this;
    };

    chart.push(series);
    chart.series = series;
    return chart;
};

function displayFlavors() {
    jQuery('div.flavor').each(function () {
        var $flavor = jQuery(this),
        values = [],
        colors = [];

        var $styleTemplate = $('<span id="flavorWheelStyleTemplate" class="flavorWheelStyleTemplate" />').appendTo($flavor), textColor = $styleTemplate.css('color');
        $styleTemplate.remove();

        $flavor.find('dt').each(function () {
            var $dt = jQuery(this);
            var input = $dt.find('input');
            colors.push(($dt.css('color').length > 0) ? $dt.css('color') : null);
            values.push(parseInt($dt.next('dd').text(), 10));
        });
        if (!values.length) return;

        var $flavorWheelWrapper = $flavor.parent().parent().find('.flavorWheelWrapper');
        var container = $flavorWheelWrapper[0];

        var w = 140, h = 140;
        var cx = 70, cy = h / 2;
        var radius = 30;

        var p = Raphael(container, w, h);
        p.paperWidth = w;
        p.paperHeight = h;

        var wheel = p.drawWheel(cx, cy, radius, 30, values, { colors: colors });

        wheel.hover(function () {
            this.sector.stop();
            this.sector.animate({ scale: [1.1, 1.1, this.cx, this.cy] }, 500, 'elastic');
        }, function () {
            this.sector.animate({ scale: [1, 1, this.cx, this.cy] }, 500, 'bounce');
        });
    });
};