var aFrames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
			rg = new RaphaGraph({
				container:'container',
				additive:true,
				names:{
					group:['Fred', 'John', 'Sally'], 
					cat:['Grains', 'Fruits', 'Vegetables'],
					var:['door to door', 'cold call']
				},
				title:'Total Sales',
				frameInterval:5000,
				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();
			}
		});