$jQuery(function () {
  var values = [],
        labels = [],
        links = [],
        title = [],
        titleLink = [],
        selected = [],
        pieSlices = $jQuery('.primary li').length;

  modifyMarkup();

  $jQuery(".primary li").each(function () {
    values.push(360 / pieSlices);
    labels.push($jQuery.trim($jQuery("a .ServiceTitle", this).html().replace('&amp;', '\n&').replace(/<br>/i, '\n')));
    links.push($jQuery('a', this).attr('href'));
    selected.push($jQuery(this).attr('class'));
  });

  title.push($jQuery.trim($jQuery('.primary .SectionTitle a', this).text()));
  titleLink.push($jQuery('.primary .SectionTitle a', this).attr('href'));

  var containerWidth = $jQuery('.primary').parent().width();
  $jQuery(".primary").remove();

  if ($jQuery('#Regions').find('#holder').length > 0)
    Raphael("holder", containerWidth, containerWidth).pieChart((containerWidth / 2) * 0.9, values, labels, links, title, titleLink, selected);
});

/**********************************
Drawing the pie chart
**********************************/
Raphael.fn.pieChart = function (radius, values, labels, links, title, titleLink, selected) {
  var paper = this,
        rad = Math.PI / 180,
        chart = this.set(),
        cx = radius,
        cy = cx,
        r = cy;
  function sector(cx, cy, r, startAngle, endAngle, params) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
  }
  var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
          var value = values[j],
              angleplus = 360 * value / total,
              popangle = angle + (angleplus / 2),
              textPosition = 1.5,
              fontSize = 21 * (r / 220),
              centerRadius = 80 * (r / 220),
              bcolor = (selected[j] == 'selected') ? ((j % 2 == 0) ? 'rgb(52,134,177)' : 'rgb(74,155,197)') : ((j % 2 == 0) ? 'rgb(220,220,221)' : 'rgb(228,228,229)'),
              labelColor = (selected[j] == 'selected') ? '#fff' : '#bbb',
              p = sector(cx, cy, r, angle, angle + angleplus, { fill: bcolor, stroke: 'none' }),
              c = sector(cx, cy, centerRadius, 0.1, 360, { fill: '#fff', stroke: '#fff', 'stroke-width': 2 }),
              cTxt = paper.text(cy, cx, title).attr({ fill: '#999', stroke: "none", opacity: 1, "font-size": fontSize * 1.5 }),
              txt = paper.text(cx + (r / textPosition) * Math.cos(-popangle * rad), cy + (r / textPosition) * Math.sin(-popangle * rad), labels[j]).attr({ fill: labelColor, stroke: "none", opacity: 1, "font-size": fontSize });

          p.click(function () {
            window.location = links[j];
          });
          txt.click(function () {
            window.location = links[j];
          });
          cTxt.click(function () {
            window.location = titleLink;
          });
          c.click(function () {
            window.location = titleLink;
          });

          p.mouseover(function () {
            p.stop().attr({ fill: toogleColor(p.attr('fill')) });
          }).mouseout(function () {
            p.stop().attr({ fill: toogleColor(p.attr('fill')) });
          });

          txt.mouseover(function () {
            p.stop().attr({ fill: toogleColor(p.attr('fill')) });
          }).mouseout(function () {
            p.stop().attr({ fill: toogleColor(p.attr('fill')) });
          });

          c.mouseover(function () {
            c.stop().attr({ fill: toogleColor(c.attr('fill')), stroke: toogleColor(c.attr('stroke')) });
          }).mouseout(function () {
            c.stop().attr({ fill: toogleColor(c.attr('fill')), stroke: toogleColor(c.attr('stroke')) });
          });

          cTxt.mouseover(function () {
            c.stop().attr({ fill: toogleColor(c.attr('fill')), stroke: toogleColor(c.attr('stroke')) });
          }).mouseout(function () {
            c.stop().attr({ fill: toogleColor(c.attr('fill')), stroke: toogleColor(c.attr('stroke')) });
          });

          angle += angleplus;
          chart.push(p);
          chart.push(txt);
          chart.push(c);
          chart.push(cTxt);
          start += .1;
        };
  for (var i = 0, ii = values.length; i < ii; i++) {
    total += values[i];
  }
  for (i = 0; i < ii; i++) {
    process(i);
  }
  return chart;
};

/**********************************
Modify markup for frontpage
**********************************/
function modifyMarkup() {
  var section = $jQuery('.primary').closest('.Section');
  
//  if (section.html() != null) {
//    //Since we are on the frontpage, remove selected class
//    section.find('.primary li').each(function () {
//      if ($jQuery(this).attr('class') == 'selected')
//        $jQuery(this).removeAttr('class');
//    });
//  }

  $jQuery('.primary').after("<div id='holder'></div>");

  $jQuery(".primary").hide();
};

/**********************************
Toogle the pieslice hover
**********************************/
function toogleColor(oColor) {
  var originalColor = oColor;
  var newColor = '';

  if (originalColor == 'rgb(52,134,177)') {
    newColor = 'rgb(72,146,185)';
  } else if (originalColor == 'rgb(72,146,185)') {
    newColor = 'rgb(52,134,177)';
  } else if (originalColor == 'rgb(74,155,197)') {
    newColor = 'rgb(92,165,203)';
  } else if (originalColor == 'rgb(92,165,203)') {
    newColor = 'rgb(74,155,197)';
  } else if (originalColor == '#fff') {
    newColor = '#f3f3f3';
  } else if (originalColor == '#f3f3f3') {
    newColor = "#fff";
  } else if (originalColor == 'rgb(220,220,221)') {
    newColor = 'rgb(213,213,214)';
  } else if (originalColor == 'rgb(213,213,214)') {
    newColor = 'rgb(220,220,221)';
  } else if (originalColor == 'rgb(228,228,229)') {
    newColor = 'rgb(231,231,232)';
  } else if (originalColor == 'rgb(231,231,232)') {
    newColor = 'rgb(228,228,229)';
  }

  return newColor;
};