$(document).ready(function(){
    if ($.browser.msie) {
        $("#mission .counter").textDropShadow('shadow_mission');
        $("#mission .title").textDropShadow('shadow_title');
        $("#mission .description").textDropShadow('shadow_description');
        $('body').addClass('ie');
        if($.browser.version.substr(0,1) == 7) { $('body').addClass('ie7')}
        else if($.browser.version.substr(0,1) == 8) { $('body').addClass('ie8')}
    }
    var r = Raphael("graph1");
    r.customAttributes.segment = function (x, y, r, a1, a2, color) {
        var flag = (a2 - a1) > 180;
        a1 = (a1 % 360) * Math.PI / 180;
        a2 = (a2 % 360) * Math.PI / 180;
        return {
                path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
                fill: color
        };
    };

    function animate(ms) {
        var start = 0,
            val;
        for (i = 0; i < ii; i++) {
            val = 360 / total * data[i];
            paths[i].animate({segment: [dimX, dimY, 60, start, start += val, color[i]]}, 0, "bounce");
            paths[i].angle = start - val / 2;
        }
    }

    var data = window.foodBeveragesData,
        color = ["#2a265a", "#354277","#d14642", "#585b88"],
        dimX = 70,
        dimY = 70,
        paths = r.set(),
        total,
        start,

    total = 0;
    for (var i = 0, ii = data.length; i < ii; i++) {
        total += data[i];
    }
    start = 0;
    for (i = 0; i < ii; i++) {
        var val = 360 / total * data[i];
        (function (i, val) {
                 paths.push(r.path().attr({segment: [2, 2, 1, start, start + val], stroke: "#fff", "stroke-width": 0}));
        })(i, val);
        start += val;
    }
    animate();
    var   bg = r.circle(dimX, dimY, 30).attr({stroke: "#fff", "stroke-width": 30});
    bg.animate({r: 15});
    
    var z = Raphael("barchart"),
        top = window.visitsData.top,
        zwidth = 180,
        zheight = 100,
        zdata = window.visitsData.visits;
    z.path("M0 1 L180 1").attr({ stroke:"#281455", "stroke-width": 2, "opacity": .5})
    z.path("M0 50 L180 50").attr({ stroke: "#281455", "stroke-width": 2, "opacity": .5})
    z.path("M0 99 L180 99 ").attr({ stroke: "#281455", "stroke-width": 2, "opacity": .5})
    var zx = 3, zy = 100, val = Math.round(zheight - zheight / top * zdata[0]);
    for (i = 0; i < zdata.length; i++) {
        var val = Math.round(zheight - zheight / top * zdata[i]);
        z.path("M" +zx + " 100 L" + zx + " " + val).attr({ stroke: "#d24641","stroke-width": 4 });
        zx += 6;
    }
        

});

(function($) {
    $.fn.textDropShadow = function(ShdwClass){
        $(this).css('position','relative').html('<span class='+ShdwClass+'>'+$(this).html()+'</span><span style="position:relative;">'+$(this).html()+'</span>');
        return $(this);
    }
})(jQuery);