(function($){
	$.fn.extend({
		pieChart : function(url){
			var self = $(this)
			var hai_name = {
				'man_1':'1萬', 'man_2':'2萬', 'man_3':'3萬', 'man_4':'4萬', 'man_5':'5萬', 'man_6':'6萬', 'man_7':'7萬', 'man_8':'8萬', 'man_9':'9萬',
				'pin_1':'1筒','pin_2':'2筒','pin_3':'3筒','pin_4':'4筒','pin_5':'5筒','pin_6':'6筒','pin_7':'7筒','pin_8':'8筒','pin_9':'9筒',
				'sou_1':'1索','sou_2':'2索','sou_3':'3索','sou_4':'4索','sou_5':'5索','sou_6':'6索','sou_7':'7索','sou_8':'8索','sou_9':'9索', 
				'kaze_ton':'東','kaze_nan':'南','kaze_sha':'西','kaze_pei':'北', 
				'sangen_haku':'白','sangen_hatu':'發','sangen_chun':'中', 
				'aka_man_5':'赤5萬','aka_pin_5':'赤5筒','aka_sou_5':'赤5索' 
			}
		
			self.css('background', 'url(/img/ajax-loader.gif) 50% 50% no-repeat');
			
			$.ajax({
				url     : url,
				type    : 'GET',
				dataType: 'xml',
				cache   : false,
				success : function (r) {
					var time = $.browser.msie ? 1000 : 0;
					setTimeout(function(){
				
						self.css('background', 'none');
						if($('answer', r).length == 0){
							self.html('<div class="message_text">まだ解答はありません</div>');
							return;
						}
						
						$('div.graph', self).css('background', 'url(/img/result/graph_bg.gif) no-repeat');
						
						var c = 0;
						var sum = 0;
						var list = [];
						var percent = [];
						var list_html = [];
	
						$('answer answer', r).each(function(){
							var obj  = {};
							obj.answer = $(this).text()
							obj.count  = $(this).next().text()
							sum += Number(obj.count);
							list.push(obj);
						})
						
						var per = 100/sum;
						var len = list.length < 5 ? list.length : 5;					
						var total = 0;
						
						for(var i=0; i<len; i++) {
							percent.push(Math.round(list[i].count*per));
							total += Math.round(list[i].count*per);
							list_html.push([
								'<tr class="rank'+ (i+1) +'">',
								'<th><img src="/img/result/icon_rank'+(i+1)+'.gif" alt="'+(i+1)+'位" width="35" height="35" /></th>',
								'<th><span class="haiga_'+ list[i].answer +'"></span></th>',
								'<th>' + hai_name[list[i].answer] +'</th>',
								'<td>' + list[i].count +'<span class="s">票</span></td>',
								'<td>' + Math.round(list[i].count*per) +'<span class="s">%</span></td>',
								'</tr>'
							].join(''));
						}
						
						percent.push(100 - total);
			
						self.prepend([
							'<div class="result"><table width="100%">',
							list_html.join(''),
							'</table></div>'
						].join(''));
						
						var canvas = document.getElementById('piechart');
						var ctx = canvas.getContext('2d');
						var fillColor = ['#ff6600', '#ff9900', '#009933', '#66c285', '#99d6ad', '#efefef'];
						var strokeColor = '#ffffff';
						var start = 270;
						var f = 360/100;
						var counts =[];
						var countsTotal = 0;
						var countsPos = 0;
						var chartCount = 0;
												
						for (var i = 0, len = percent.length; i < len; i++) {
							countsTotal += percent[i]
							counts.push(countsTotal-1);
						}
						
						if(!$.browser.msie){
							ctx.globalCompositeOperation = "destination-over";
							drawPie(ctx, 110, 110, 30, 0, 360);
							ctx.fillStyle = "#fff";
							ctx.strokeStyle = fillColor[countsPos];
							ctx.fill();
							timerID = setInterval(function(){drawChart(function(){
								clearInterval(timerID);
							})}, 10);
							
						}else{
							for (var i = 0; i < 100; i++) drawChart();
							ctx.beginPath();
							drawPie(ctx, 110, 110, 30, 0, 360);
							ctx.fillStyle = "#fff";
							ctx.fill();
						}
						
						
						function drawChart(fn){
							if(counts[countsPos] < chartCount) countsPos++;
							drawPie(ctx, 110, 110, 104, chartCount*f+start, chartCount*f+f+start);
							ctx.fillStyle = fillColor[countsPos];
							ctx.strokeStyle = fillColor[countsPos];
							ctx.fill();
							ctx.stroke();
							chartCount++;
							if(chartCount > 99) {
								if(fn) fn();
							}
						}
						
						function drawPie(ctx, x, y, radius, startAngle, endAngle) {
							ctx.beginPath();
							var start = startAngle * Math.PI / 180;
							var end = endAngle * Math.PI / 180;
							ctx.arc(x, y, radius, start, end, false);
							var start_x = x + (radius * Math.cos(start));
							var start_y = y + (radius * Math.sin(start));
							var end_x = x + (radius * Math.cos(end));
							var end_y = y + (radius * Math.sin(end));
							ctx.moveTo(start_x, start_y);
							ctx.lineTo(x, y);
							ctx.lineTo(end_x, end_y);
							ctx.closePath();
						}
					},time);

				}
			});
					
		}
	});
})(jQuery);