$(function() {
		
		var datasets = {
			"d1":{
				"arrow_drop": {
					label: "350 FPS",
					data: [[10, .75], [20, 0], [30, -3.81], [40, -10.81], [50, -21.13]],
					unit: 'inches'
				},
				"terminal_velocity": {
					label: "350 FPS",
					data: [[10, 343.3], [20, 336.72], [30, 330.27], [40, 323.94], [50, 317.72]],
					unit: 'FPS'
				},
				"kinetic_energy": {
					label: "350 FPS",
					data: [[10, 105], [20, 101], [30, 97], [40, 93], [50, 90]],
					unit: 'ft. lb.'
				}
			},
			"d2": {
				"arrow_drop": {
					label: "300 FPS",
					data: [[10, 1.32], [20, 0], [30, -5.5], [40, -15.36], [50, -29.75]],
					unit: 'inches'
				},
				"terminal_velocity": {
					label: "300 FPS",
					data: [[10, 294.13], [20, 288.37], [30, 282.73], [40, 277.19], [50, 271.75]],
					unit: 'FPS'
				},
				"kinetic_energy": {
					label: "300 FPS",
					data: [[10, 77], [20, 74], [30, 71], [40, 66], [50, 65]],
					unit: 'ft. lb.'
				}
			},
			"d3": {
				"arrow_drop": {
					label: "250 FPS",
					data: [[10, 2.28], [20, 0], [30, -8.32], [40, -22.93], [50, -44.13]],
					unit: 'inches'
				},
				"terminal_velocity": {
					label: "250 FPS",
					data: [[10, 244.98], [20, 240.06], [30, 235.24], [40, 230.51], [50, 225.88]],
					unit: 'FPS'
				},
				"kinetic_energy": {
					label: "250 FPS",
					data: [[10, 53], [20, 51], [30, 49], [40, 47], [50, 45]],
					unit: 'ft. lb.'
				}
			},
			"d4": {
				"arrow_drop": {
					label: "200 FPS",
					data: [[10, 4.04], [20, 0], [30, -13.52], [40, -36.98], [50, -70.87]],
					unit: 'inches'
				},
				"terminal_velocity": {
					label: "200 FPS",
					data: [[10, 195.86], [20, 191.8], [30, 187.83], [40, 183.93], [50, 180.12]],
					unit: 'FPS'
				},
				"kinetic_energy": {
					label: "200 FPS",
					data: [[10, 34], [20, 32], [30, 31], [40, 30], [50, 29]],
					unit: 'ft. lb.'
				}
			}
		};
		
		function makePlot(which) {
			var data = [];
			if(which)
			{
				$.each(datasets, function(key, val) {
					data.push(val[which]);
				});
			}
			//set the default plot to show
			if(data.length < 1) {
				$.each(datasets, function(key, val) {
					data.push(val["arrow_drop"]);
				});
				$('#chart h2').text('Arrow Drop');
			}
			
			if(data.length > 0)
				$.plot($("#placeholder"), data,
				{
					lines: { show: true },
					points: { show: true},
					grid: { hoverable: true, clickable: true },
					legend: { show:true, container:$('#legend') }					
				});
		}
		
				
		function showTooltip(x, y, contents) {
			$('<div id="tooltip">' + contents + '</div>').css( {
			    position: 'absolute',
			    display: 'none',
			    top: y + 10,
			    left: x + 10,
			    border: '1px solid #ccc',
			    padding: '10px',
			    'background-color': '#000',
			    opacity: 0.80,
			    color: "#fff",
			    'font-weight': 'bold',
			    'font-size' : '12px'
			}).appendTo("body").fadeIn(200);
		}
				
		var previousPoint = null;
		$("#placeholder").bind("plothover", function(event, pos, item) {
			$("#x").text(pos.x.toFixed(2));
			$("#y").text(pos.y.toFixed(2));

			if(item) {
				if(previousPoint != item.datapoint) {
					previousPoint = item.datapoint;
					$("#tooltip").remove();
					var x = item.datapoint[0].toFixed(2), 
					y = item.datapoint[1].toFixed(2);
					
					showTooltip(item.pageX, item.pageY, y + ' ' + item.series.unit + '<br />' + item.series.label );
				}
			}
			else {
				$("#tooltip").remove();
				previousPoint = null;
			}
			
		
		});
		
		
		makePlot();
		
		//need to create functionality to switch out datasets...
		$.each( $('#chart li'), function() {
		
			$(this).css({'cursor' : 'pointer' })
			
			$(this).click(function() {
				makePlot($(this).attr('class'));
				$('#chart h2').text($(this).attr('title'));
			});
		});
		
		$('#chart li').hover(function(){
			$(this).css({'color' : '#ffed99'});
			
		},
		function() {
			$(this).css({'color':'#FFFFFF'});
		}
	);
	
	
	
});