var DevSolutionSkill = {
    init: function (e, t) {
        this.diagram(e)
    },
    diagram: function (e) {
        var t = e,
            n = 160,
            r = 160,
            i = n / 2,
            s = r / 2,
            o = jQuery("#" + e).data("forground") ? jQuery("#" + e).data("forground") : "#fff",
            u = jQuery("#" + e).data("background") ? jQuery("#" + e).data("background") : "#007aff",
            ho = jQuery("#" + e).data("border") ? jQuery("#" + e).data("border") : "#dfdfdf",
            ho2 = jQuery("#" + e).data("border") ? jQuery("#" + e).data("border") : "#dfdfdf",
            f = 13,
            how=1,
            l = jQuery("#" + e).data("percent"),
            c = 30,
            h = jQuery("#" + e).data("fontsize") ? jQuery("#" + e).data("fontsize") : "35px",
            p = jQuery("#" + e).data("percentsize") ? jQuery("#" + e).data("percentsize") : "35px",
            d = jQuery("#" + e).data("fontcolor") ? jQuery("#" + e).data("fontcolor") : "#cccccc",
            v = jQuery("#" + e).data("font") ? jQuery("#" + e).data("font") : "Open Sans";
        if (l == 100) {
            c = 45
        } else if (l < 10) {
            c = 20
        } else if (l > 100) {
            alert("you can't set more then 100");
            return false
        }
        var m = Raphael(t, n, r);
        m.customAttributes.arc = function (e, t, n) {
            var r = 3.6 * e,
                o = r == 360 ? 359.99 : r,
                u = 90;
            a = (u - o) * Math.PI / 180, b = u * Math.PI / 180, sx = i + n * Math.cos(b), sy = s - n * Math.sin(b), x = i + n * Math.cos(a), y = s - n * Math.sin(a), path = [
                ["M", sx, sy],
                ["A", n, n, 0, +(o > 180), 1, x, y]
            ];
            return {
                path: path,
                stroke: t
            }
        };
        var g = m.path().attr({
            arc: [100, o, 70],
            "stroke-width": f - 1
        });
        var ko = m.path().attr({
            arc: [100, ho, 64],
            "stroke-width": how
        });
        var ko = m.path().attr({
            arc: [100, ho2, 76],
            "stroke-width": how
        });
        var w = m.path().attr({
            arc: [l, u, 70],
            "stroke-width": f
        });
        w.animate({
            transform: "r360" + "," + 80 + "," + 80
        }, 2e3);
        var E = m.text(n, r, l).attr({
            font: h + " " + v,
            fill: d,
            cx: 0,
            cy: 0,
            x: i - 10,
            y: s
        }).toFront();
        E.stop().animate({
            opacity: 0
        }, 0, ">", function () {
            this.attr({
                text: l
            }).animate({
                opacity: 1
            }, 2e3, "<")
        });
        var S = m.text(n, r, "%").attr({
            font: p + " " + v,
            fill: d,
            cx: 0,
            cy: 0,
            x: i + c,
            y: s + 5
        }).toFront();
        S.stop().animate({
            opacity: 0
        }, 0, ">", function () {
            this.attr({
                text: "%"
            }).animate({
                opacity: 1
            }, 2e3, "<")
        })
    }
}