var aFrames = [2006, 2007, 2008, 2009, 2010],
			rg = new RaphaGraph({
				container:'container',
				type:'pie',
				names:{
					group:['Fred', 'John', 'Sally'], 
					cat:['Grains', 'Fruits', 'Vegetables']
				},
				title:'Total Sales',
				h:425,
				frameInterval:2500,
				frames: {
					fnPre: fnPre,
					aData:[
						[[20, 23, 41], [11, 8, 10], [13, 21, 24]],
						[[22, 23, 45], [18, 18, 23], [17, 25, 28]],
						[[30, 33, 53], [31, 35, 30], [24, 34, 39]],
						[[37, 38, 55], [39, 42, 38], [35, 41, 44]],
						[[43, 46, 58], [45, 48, 49], [43, 48, 53]]
					]
				}	
			});
		function fnPre(frame){
			var s;
			$('#control li').removeClass('selected');
			$('#f'+aFrames[frame]).addClass('selected');
			if (frame + 1 < rg.o.frames.a.length) {
				s = '<table id="tracker"><th></th><th>'
					+aFrames[frame]+'</th><th>'
					+aFrames[frame+1]+'</th><th>Precent Change</th></tr><tr>';
				rg.o.frames.a[frame].forEach(function(oGraph, i){
					var delta = rg.fnSigFigs((rg.o.frames.a[frame+1][i].total- oGraph.total)/oGraph.total, 3);
					s += '<tr><td>' 
						+ [oGraph.o.title, oGraph.total, rg.o.frames.a[frame+1][i].total, delta].join('</td><td>') 
						+ '</td></tr>';
				});
			} else {
				s = '<table id="tracker"><th></th><th>'+aFrames[frame]
					+'</th><th></th><th>Precent Change</th></tr><tr>';
				rg.o.frames.a[frame].forEach(function(oGraph, i){
					s += '<tr><td>' 
						+ [oGraph.o.title, oGraph.total, '-', '-'].join('</td><td>') 
						+ '</td></tr>';
				});
			}
			$('#update').html(s);
		}
		$('#stop').on('click', function(){
			rg.stop();
		});
		$('#play').on('click', function(){
			if ($(this).hasClass('pause')){
				rg.pause();
			} else {
				rg.resume();
			}
		});