var aFrames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
			rg = new RaphaGraph({
				container:'container',
				additive:true,
				type:'pie',
				names:{
					group:['Fred', 'John', 'Sally'], 
					cat:['Grains', 'Fruits', 'Vegetables'],
					var:['door to door', 'cold call']
				},
				title:'Total Sales',
				w:800, h:450,
				frameInterval:2000,
				groups:true,
				frames: {
					fnPost: fnPost,
					aData:[
						[[[11, 9], [11,8], [5,13]], [[2,1], [6,14], [8,8]], [[5,4], [7,14], [12,4]]],
						[[[13,14], [15,21], [11, 25]], [[9,9], [2,13], [15,24]], [[12,5], [15,10], [20,8]]],
						[[[4,2], [3,4], [2,6]], [[8,9], [11,12], [9,2]], [[4,0], [7,2], [6,9]]],
						[[[3,3], [1,2], [4,5]], [[10,10], [8,10], [6,0]], [[2,1], [5,3], [2,10]]],
						[[[2,9], [5,8], [4,7]], [[4,11], [1,15], [7,5]], [[6,3], [4,5], [5,14]]]
					]
				}	
			});
		
	function fnPost(frame){
		var s;
		$('#control li').removeClass('selected');
		$('#f'+aFrames[frame]).addClass('selected');
		if (frame !== aFrames.length - 1) {
			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></th><th>'
				+aFrames[frame]
				+'</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();
		}
	});