var labelStyle = 'rgba(30,30,30,1)';
var assignedEvents = false;
var focusTimer = null;

var bodyType = {
	sedan: {
		tire1: 80,
		tire2: 396,
		tireR: 26,
		tireW: 24,
		midpoint: 63,
		bottom: 190,
		coords: [
			['m', 26, 190],
			['b', 6, 186, 4, 180, 3, 175],
			['b', -4, 95, -5, 80, 130, 68],
			['b', 188, 7, 200, 6, 210, 2],
			['b', 220, 0, 310, -1, 345, 5],
			['b', 355, 8, 367, 12, 413, 63],
			['l', 486, 68],
			['b', 492, 80, 506, 100, 496, 175],
			['b', 490, 180, 480, 188, 452, 190]			
		]
	},
	hatch: {
		tire1: 85,
		tire2: 396,
		tireR: 26,
		tireW: 24,
		midpoint: 68,
		bottom: 190,
		coords: [
			['m', 26, 190],
			['b', 6, 186, 4, 180, 3, 175],
			['b', -4, 95, -5, 80, 130, 68],
			['b', 188, 7, 200, 6, 210, 6],
			['b', 220, 0, 310, -1, 455, 7],
			['l', 450, 13],
			['b', 481, 50, 483, 58, 492, 72],
			['b', 493, 80, 506, 100, 496, 175],
			['b', 490, 180, 480, 188, 452, 190]			
		]
	},	
	van: {
		tire1: 85,
		tire2: 396,
		tireR: 27,
		tireW: 25,
		midpoint: 68,
		bottom: 190,
		coords: [
			['m', 26, 190],
			['b', 6, 186, 4, 180, 3, 175],
			['b', -4, 103, -5, 88, 110, 68],
			['b', 168, 7, 180, 6, 190, 4],
			['b', 220, 0, 310, -1, 467, 6],
			['b', 480, 10, 493, 60, 496, 74],
			['b', 498, 80, 502, 100, 496, 175],
			['b', 490, 180, 480, 188, 452, 190]			
		]
	},
	coupe: {
		tire1: 84,
		tire2: 396,
		tireR: 26,
		tireW: 26,
		midpoint: 70,
		bottom: 200,
		coords: [
			['m', 36, 200],
			['b', 23, 199, 4, 195, 3, 193],
			['b', -7, 135, 10, 90, 152, 70],
			['b', 190, 30, 200, 10, 230, 3],
			['b', 300, -3, 350, 0, 430, 70],
			['b', 480, 100, 512, 32, 495, 185],
			['b', 500, 185, 460, 199, 420, 200]			
		]
	},
	suv: {
		tire1: 82,
		tire2: 396,
		tireR: 29,
		tireW: 28,
		midpoint: 63,
		bottom: 180,
		coords: [
			['m', 28, 180],
			['b', 3, 180, 2, 170, 0, 130],
			['l', 6, 126],
			['b', 10, 90, 15, 80, 50, 73],
			['l', 148, 63],
			['b', 195, -2, 215, 0, 225, 1],
			['l', 452, 1],			
			['b', 460, 0, 470, 10, 490, 75],
			['b', 492, 80, 495, 120, 495, 128],
			['l', 500, 130],
			['b', 500, 175, 494, 180, 450, 180]			
		]
	},
	truck: {
		tire1: 82,
		tire2: 388,
		tireR: 29,
		tireW: 28,
		midpoint: 68,
		bottom: 180,
		coords: [
			['m', 28, 180],
			['b', 3, 180, 2, 170, 0, 130],
			['l', 6, 126],
			['b', 10, 90, 15, 80, 50, 73],
			['l', 138, 63],
			['b', 185, -2, 205, 0, 215, 1],
			['l', 288, 1],			
			['b', 292, 1, 300, 2, 305, 68],
			['l', 486, 68],
			['b', 496, 80, 495, 120, 495, 128],
			['l', 500, 130],
			['b', 500, 175, 494, 180, 450, 180]			
		]
	}
}

function drawGraph(ctx, align, width, img) {
	//clear ctx
	ctx.clearRect(0,0,width,180);
	//draw axes
	ctx.strokeStyle = labelStyle;
	ctx.beginPath();
	switch (align) {
	case 'horizontal':
		ctx.moveTo(9,1);
		ctx.lineTo(9,180);
		ctx.moveTo(10,175);
		ctx.lineTo(width,175);
		ctx.moveTo(parseInt(width/2-1)+8,176);
		ctx.lineTo(parseInt(width/2-1)+8,180);
		ctx.moveTo(width-1,176);
		ctx.lineTo(width-1,180);
		break;
	case 'both':
		ctx.moveTo(45,1);
		ctx.lineTo(49,1);
		ctx.moveTo(50,0);
		ctx.lineTo(50,174);
		ctx.moveTo(45,90);
		ctx.lineTo(49,90);
		ctx.moveTo(49,176);
		ctx.lineTo(47,178);
		ctx.moveTo(49,175);
		ctx.lineTo(width,175);
		ctx.moveTo(parseInt((width+45)/2-1),176);
		ctx.lineTo(parseInt((width+45)/2-1),180);
		ctx.moveTo(width-1,176);
		ctx.lineTo(width-1,180);
		
		break;		
	default:
		ctx.moveTo(0,1);
		ctx.lineTo(4,1);
		ctx.moveTo(5,0);
		ctx.lineTo(5,180);
		ctx.moveTo(6,179);
		ctx.lineTo(width,179);
		ctx.moveTo(0,90);
		ctx.lineTo(4,90);
		ctx.moveTo(0,179);
		ctx.lineTo(4,179);
		break;
	}
	ctx.stroke();
	//title
	for (var i = 0; i < img.length; i++) {
		img[i].obj = new Image();
		img[i].obj.src = img[i].src;
		img[i].obj.setAttribute('x', img[i].x);
		img[i].obj.setAttribute('y', img[i].y);
		img[i].obj.onload = function() {
			ctx.drawImage(this, this.getAttribute('x'), this.getAttribute('y'));	
		}
	}
}

function drawData(ctx, i, data, max, align, canvas) {
	var altFill;
	switch(i) {
		case 0:
			ctx.fillStyle = 'rgb(255,101,49)';
			altFill = 'rgba(255,101,49,0.5)';
			break;
		case 1:
			ctx.fillStyle = 'rgb(99,207,33)';
			altFill = 'rgba(99,207,33,0.5)';
			break;
		case 2:
			ctx.fillStyle = 'rgb(33,101,255)';
			altFill = 'rgba(33,101,255,0.5)';
			break;
	}
	var factor, label1x, label2x, label1y, label2y, labelNx, labelNy;	
	/*
		These are ONLY needed for charts. 
	*/
	if (align == 'both') {
		factor = [(canvas.w-5)/max[0], (canvas.h-5)/max[1]];
		label1x = 50+factor[0]*data[0].v;
		label1y = canvas.h-factor[1]*data[1].v;
		ctx.beginPath();
		ctx.arc(label1x, label1y, 8, 0, 2*Math.PI, true);
		ctx.fill();
		
		var plotLabel1 = document.getElementById(data[0].l + 'D0' + i);
		plotLabel1.style.top = (label1y - 41) + 'px';
		plotLabel1.style.left = (label1x - 9) + 'px';
		plotLabel1.className = '';
	} else {
		var offsetX = (align == 'horizontal') ? 10 : data.length > 1 ? 71 : 65;
		var width = data.length > 1 ? 30 : (align == 'horizontal') ? 35 : 50;
		var spacing = 0.2*width;	
		if (align == 'horizontal') {
			factor = canvas.w/max[0];
			ctx.fillRect(offsetX,42+spacing*(i+1)+(data.length*width*i),factor*data[0].v, width);
			label1x = factor*data[0].v - 40;
			label1y = (i+1)*width + (i+1)*spacing + 13;
			labelNx = offsetX-1;
			labelNy = 42+spacing*(i+1)+(data.length*width*i) + width/2;
		} else {
			factor = canvas.h/max[0];
			ctx.fillRect(offsetX+spacing*(i+1)+(data.length*width*i),canvas.h-1-factor*data[0].v,width,factor*data[0].v-1);
			label1x = offsetX+spacing*(i+1)+(data.length*width*i);
			label1y = canvas.h-1-factor*data[0].v;
			labelNx = label1x + width/2;
			labelNy = canvas.h-1;
			if (data.length > 1) {
				ctx.fillStyle = altFill;
				ctx.fillRect(offsetX+spacing*(i+1)+(data.length*width*i)+width,canvas.h-1-factor*data[1].v,width,factor*data[1].v-1);
				label2x = offsetX+spacing*(i+1)+(data.length*width*i) + width;
				label2y = canvas.h-1-factor*data[1].v;
				labelNx = label2x;
				labelNy = canvas.h-1;
			}
		}
		//draw 'number' label
		ctx.fillStyle = 'rgba(140,140,140,1)';
		ctx.beginPath();
		ctx.arc(labelNx, labelNy, 8, 0, 2*Math.PI, true);
		ctx.fill();
		document.getElementById(data[0].l + 'N' + i).className = 'showNumber';
		
		var barLabel1 = document.getElementById(data[0].l + 'D0' + i);
		barLabel1.innerHTML = data[0].v;
		barLabel1.style.top = (label1y + 4) + 'px';
		barLabel1.style.left = label1x + 'px';
		barLabel1.className = 'showChartData';
		if (data.length > 1) {
			var barLabel2 = document.getElementById(data[1].l + 'D1' + i);
			barLabel2.innerHTML = data[1].v;
			barLabel2.style.top = (label2y + 4) + 'px';
			barLabel2.style.left = label2x + 'px';
			barLabel2.className = 'showChartData';
		}
	}

}

function drawCostPerFill(e) {
	var cpg = new Array();
	if (e) {
		if (e.target) {
			cpg[0] = e.target;
		} else if (e.srcElement) {
			cpg[0] = e.srcElement;
		}
		if (cpg[0].id && cpg[0].id.indexOf('0') > -1) {
			cpg[1] = document.getElementById('costPerGallon1');
		} else {
			cpg[1] = cpg[0];
			cpg[0] = document.getElementById('costPerGallon0');
		}
	} else {
		for (var i = 0; i < 2; i++) {
		cpg[i] = document.getElementById('costPerGallon' + i);
		}
	}
	var canvas = document.getElementById('fuelCost');
	var ctx = canvas.getContext('2d');
	
	var cpgData = cpg[0].options[cpg[0].selectedIndex].text;
	cpgData += '.' + cpg[1].options[cpg[1].selectedIndex].text;
	var maxCost = Math.round((32*cpgData)/10)*10;	//based on 32gallons being largest tank
	maxCost = (maxCost < cpgData*32) ? maxCost + 10 : maxCost;

	drawGraph(ctx, 'vertical', 255, [{src: 'img/cpf_example.gif', x: 15, y: 45}]);
	
	//show labels
	var costMax = document.getElementById('fuelCostL0Max');
	costMax.innerHTML = maxCost;
	var costHalf = document.getElementById('fuelCostL0Half');
	costHalf.innerHTML = parseInt(maxCost/2);
	//draw data
	for (var i = 0; i < cars.length; i++) {
		if (cars[i] != null) {
			drawData(
				ctx,i,[{l: 'fuelCost', v: (cars[i].fuel*cpgData).toFixed(2)}], [maxCost],'vertical', {w: 255, h: 180}
			);
		}
	}
	
	if (assignedEvents == false) {
		for (var i = 0; i < cpg.length; i++) {
			cpg[i].onchange = drawCostPerFill;
		}
	}
}

function showPlotDataWeight() {
	var id = this.id;
	var i = parseInt(id.charAt(id.length-1));
	this.className = 'showPlotData' + i;
	var data = [cars[i].hp, cars[i].weight, Math.round((cars[i].weight/cars[i].hp)*10)/10];
	this.innerHTML = data[0] + ' HP<br>' + data[1] + ' LBS';
	this.innerHTML += '<br>' + data[2] + ' LBS/HP';
}

function showPlotDataMpg() {
	var id = this.id;
	var i = parseInt(id.charAt(id.length-1));
	this.className = 'showPlotData' + i;
	var data = [cars[i]['hp'], cars[i]['mpgc']];
	this.innerHTML = data[0] + ' HP<br>' + data[1] + ' MPG (C)';
}

function hidePlotData() {
	var number = parseInt(this.id.charAt(this.id.length-1)) + 1;
	this.className = '';
	this.innerHTML = number;
}

function drawEachDimensions(ctx, i, focus) {
	var alpha = (i == focus) ? 0.7 : 0.3;
	
	//draw circles
	clearTimeout(focusTimer);
	ctx.beginPath();
	if (i != focus) {
		ctx.fillStyle = 'rgba(140,140,140,1)';
	} else {
		switch(i) {
			case 0:
				ctx.fillStyle = 'rgba(255,101,49,1)';
				break;
			case 1:
				ctx.fillStyle = 'rgba(99,207,33,1)';
				break;
			case 2:
				ctx.fillStyle = 'rgba(33,101,255,1)';
				break;
		}
	}
	ctx.arc(35+i*50, 20, 20, 0, 2*Math.PI, true);
	ctx.fill();
	
	switch(i) {
		case 0:
			ctx.fillStyle = 'rgba(255,101,49,' + alpha + ')';
			break;
		case 1:
			ctx.fillStyle = 'rgba(99,207,33,' + alpha + ')';
			break;
		case 2:
			ctx.fillStyle = 'rgba(33,101,255,' + alpha + ')';
			break;
	}
		
	var sx = cars[i].length / 275;
	var sy = cars[i].height / 110;
	var sz = cars[i].width / 99;
	
	var top = (1-sy)*200;
	var left = (1-sx)*500;	
	
	if (i == focus) {
		/*begin labels*/
		ctx.strokeStyle = labelStyle;
		//height
		ctx.beginPath();
		ctx.moveTo(522,200);
		ctx.lineTo(528,200);
		ctx.moveTo(525,200);
		ctx.lineTo(525,top);
		ctx.moveTo(522,top);
		ctx.lineTo(528,top);
		ctx.stroke();
		document.getElementById('dimHeight').style.top = parseInt((200 + top) / 2 - 12) + 'px';		
		//length
		ctx.beginPath();
		ctx.moveTo(500,213);
		ctx.lineTo(500,219);
		ctx.moveTo(500,216);
		ctx.lineTo(left,216);
		ctx.moveTo(left,213);
		ctx.lineTo(left,219);
		ctx.stroke();
		document.getElementById('dimLength').style.left = parseInt((500 + left) / 2 - 25) + 'px';
		//width
		ctx.beginPath();
		ctx.moveTo(640 - (sz*90), 213);
		ctx.lineTo(640 - (sz*90), 219);
		ctx.moveTo(640 - (sz*90), 216);
		ctx.lineTo(640 + (sz*90), 216);
		ctx.moveTo(640 + (sz*90), 213);
		ctx.lineTo(640 + (sz*90), 219);
		ctx.stroke();
	}
	
	ctx.save();
	ctx.translate(left, top);
	ctx.save();
	ctx.beginPath();
	var tire1, tire2, tireR, tireH, tireW, midpoint, bottom, syT;
	tire1 = bodyType[cars[i].body].tire1;
	tire2 = bodyType[cars[i].body].tire2;
	tireR = bodyType[cars[i].body].tireR;
	tireW = bodyType[cars[i].body].tireW;
	midpoint = bodyType[cars[i].body].midpoint;
	bottom = bodyType[cars[i].body].bottom;
	//begin side view
	syT = sy*(400-tireR-bottom)/200;
	ctx.scale(sx, syT);
	var coords;
	for (var j = 0; j < bodyType[cars[i].body].coords.length; j++) {
		coords = bodyType[cars[i].body].coords[j];
		if (coords[0] == 'b') {
			ctx.bezierCurveTo(coords[1],coords[2],coords[3],coords[4],coords[5],coords[6]);
		} else if (coords[0] == 'l') {
			ctx.lineTo(coords[1],coords[2]);
		} else {
			ctx.moveTo(coords[1],coords[2]);
		}
	}
	ctx.closePath();
	ctx.scale(1/sx,1/syT);		// 1:1 scale
	ctx.translate(0, -top);
	var axle = 200 - tireR;
	ctx.moveTo(sx*tire1,axle);
	ctx.arc(sx*tire1, axle, tireR, 0, Math.PI, false);
	ctx.moveTo(sx*tire2,axle);
	ctx.arc(sx*tire2, axle, tireR, 0, Math.PI, false);	
	ctx.fill();
	
	ctx.restore();	// 1:1 scale
	ctx.restore();	// (0,0)
	ctx.save();	
	//begin front view..
	ctx.translate(640 - (sz*90), top);
	ctx.save();
	ctx.scale(sz, syT);
	ctx.beginPath();
	ctx.moveTo(1,bottom);
	ctx.lineTo(0,1.8*midpoint);
	ctx.bezierCurveTo(0,1.5*midpoint,2,1.35*midpoint,12,midpoint);
	ctx.bezierCurveTo(25,9,32,6,36,5);
	ctx.bezierCurveTo(45, 0, 135,0,135,5);
	ctx.bezierCurveTo(148,6,155,9,168,midpoint);
	ctx.bezierCurveTo(180,1.5*midpoint,178,1.35*midpoint,180,1.8*midpoint);
	ctx.lineTo(179,bottom);
	ctx.fill();
	
	tireH = tireR - sy*bottom + syT*axle;
	//tires...
	ctx.restore();
	ctx.beginPath();
	ctx.moveTo(1, syT*bottom);
	ctx.lineTo(1, sy*200);
	ctx.lineTo(1+sz*tireW, sy*200);
	ctx.lineTo(1+sz*tireW, syT*bottom);
	ctx.fill();
	ctx.beginPath();
	ctx.moveTo(sz*179-(sz*tireW), syT*bottom);
	ctx.lineTo(sz*179-(sz*tireW), sy*200);
	ctx.lineTo(sz*179, sy*200);
	ctx.lineTo(sz*179, syT*bottom);
	ctx.fill();
	ctx.restore();
}

function drawDimensions(e) {
	var focus = null;
	var focusing = false;
	if (window.event) e = window.event;
	if (e) {
		if (e.target) {
			focus = e.target.id;
		} else if (e.srcElement) {
			focus = e.srcElement.id;
		}
		if (focus != null) {
			focus = parseInt(focus.charAt(focus.length-1));
		} 
	}
	var canvas = document.getElementById('dimDisplay');
	var ctx = canvas.getContext('2d');
	
	ctx.clearRect(0,0,800,230);
	ctx.save();
	//human
	ctx.strokeStyle = 'rgb(160,160,160)';
	ctx.beginPath();
	ctx.moveTo(0,79);
	ctx.lineTo(800,79);
	ctx.stroke();
	ctx.restore();
	ctx.fillStyle = 'rgb(160,160,160)';
	ctx.beginPath();
	ctx.moveTo(765,200);
	ctx.lineTo(763,145);
	ctx.lineTo(760,145);
	ctx.bezierCurveTo(760,100,760,100,770,97);
	ctx.lineTo(780,97);
	ctx.bezierCurveTo(790,100,790,100,790,145);
	ctx.lineTo(787,145);
	ctx.lineTo(785,200);
	ctx.closePath();
	ctx.fill();
	ctx.beginPath();
	ctx.arc(775, 88, 9, 0, 2*Math.PI,true);
	ctx.closePath();
	ctx.fill();
	
	var datalabels = ['dimHeight', 'dimWidth', 'dimLength'];
	
	for (var i = 0; i < cars.length; i++) {
		if (cars[i] != null) {
			//focus in if it's just one car
			if (carsReady == 1) focus = i;
			if (i == focus) {
				focusing = true;
				continue;
			}
			
			
			drawEachDimensions(ctx, i, focus);
		}
	}
	if (focusing) {
		
		drawEachDimensions(ctx, focus, focus);
		//show the labels
		document.getElementById('dimHeight').innerHTML = cars[focus].height + '"';
		document.getElementById('dimLength').innerHTML = cars[focus].length + '"';
		document.getElementById('dimWidth').innerHTML = cars[focus].width + '"';
	}
	for  (var i = 0; i < datalabels.length; i++) {
		document.getElementById(datalabels[i]).className = focusing ? 'showLabel' : 'hide';
	}

}

function draw(){
	var canvas, ctx;
	//hide all labels
	var shownLabels = document.getElementById('output').getElementsByTagName('div');
	for (var i = 0; i < shownLabels.length; i++) {
		if (shownLabels[i].className && shownLabels[i].className.indexOf('show') > -1) {
			shownLabels[i].className = 'hide';
		}
	}

	/*	Dimensions
	
		500px = 275in.
		avg human height ~ 66.55 inches (USA) ~ 121px
		175 + 50/2 = 200 ~ 110 in --> sx sy
		
		canvas:
			height: 200px (max height) + 30px (label height)
			width: 500px (max side view width) + 50px (label width) + 180px (wax front view width) + 70px (human & space)
	*/	
	var focusControl = document.getElementById('dimFocus');
	focusControl.className = '';
	var focusLinks = focusControl.getElementsByTagName('a');
	carsReady = 0;
	for (i = 0; i < focusLinks.length; i++) {
		focusLinks[i].className = (i < cars.length && cars[i] != null) ? '' : 'blur';
		//increment the counter of 'valid' cars
		if (cars[i] != null) carsReady++;
		if (assignedEvents == false) {
			focusLinks[i].onmouseover = drawDimensions;
			focusLinks[i].onmouseout = function() {focusTimer = setTimeout('drawDimensions()', 250)};
		}
	}
	if (carsReady > 1) {
		document.getElementById('dimInst').className = 'show';
	}

	//person label
	document.getElementById('dimPerson').className = 'showLabel';
	drawDimensions();
	
	/*	Fuel Economy	*/
	//	mpg c/h
	document.getElementById('fuelMpgBox').className = 'show';
	canvas = document.getElementById('fuelMpg');
	ctx = canvas.getContext('2d');
	var maxMpg = 60;
	drawGraph(ctx, 'vertical', 275, [{src: 'img/mpg_example.gif', x: 11, y: 90}]);
	for (var i = 0; i < cars.length; i++) {
		if (cars[i] != null) {
			drawData(
				ctx,i,[{l: 'fuelMpg', v: cars[i].mpgc}, {l: 'fuelMpg', v: cars[i].mpgh}], [maxMpg],'vertical', {w: 275, h: 180}
			);
		}
	}
	
	//	cost per fill
	document.getElementById('fuelCostBox').className = 'show';
	drawCostPerFill();
	document.getElementById('fuelCostControl').className = '';
	
	//	range
	document.getElementById('fuelRangeBox').className = 'show';
	canvas = document.getElementById('fuelRange');
	ctx = canvas.getContext('2d');
	var maxRange = 800;
	drawGraph(ctx, 'horizontal', 263, [{src: 'img/range_example.gif', x: 9, y: 7}]);
	for (var i = 0; i < cars.length; i++) {
		if (cars[i] != null) {
			drawData(
				ctx,i,[{l: 'fuelRange', v: parseInt(cars[i].fuel*cars[i].mpgh)}], [maxRange],'horizontal', {w: 255, h: 180}
			);
		}
	}	
	
	/*	Performance	*/
	//	hp & torque
	document.getElementById('perfHpTorqueBox').className = 'showBox';
	canvas = document.getElementById('perfHpTorque');
	ctx = canvas.getContext('2d');
	var maxHp = 500;
	drawGraph(ctx, 'vertical', 275, [{src: 'img/hp_example.gif', x: 11, y: 72}]);
	for (var i = 0; i < cars.length; i++) {
		if (cars[i] != null) {
			drawData(
				ctx,i,[{l: 'perfHpTorque', v: cars[i].hp}, {l: 'perfHpTorque', v: cars[i].torque}], [maxHp],'vertical', {w: 275, h: 180}
			);
		}
	}	
	
	//	hp/weight
	document.getElementById('perfWeightBox').className = 'showBox';
	canvas = document.getElementById('perfWeight');
	ctx = canvas.getContext('2d');
	var maxHp = 500;
	var maxWeight = 7000;
	drawGraph(ctx, 'both', 300, [{src: 'img/perfHp.gif', x: 0, y: 51}, {src: 'img/perfWeight.gif', x: 133, y: 204}]);
	//set up event handler and hide data point details
	var plotLabel;
	for (var i = 0; i < 3; i++) {
		plotLabel = document.getElementById('perfWeightD0' + i);
		//necessary for multiple calls to draw()
		plotLabel.className = 'hide';
		if (!assignedEvents) {			
			plotLabel.onmouseover = showPlotDataWeight;
			plotLabel.onmouseout = hidePlotData;
			plotLabel.onclick = hidePlotData;
		}
	}	
	for (var i = 0; i < cars.length; i++) {
		if (cars[i] != null) {	
			drawData(
				ctx,i,[{l: 'perfWeight', v: cars[i].weight}, {v: cars[i].hp}], [maxWeight, maxHp], 'both', {w: 255, h: 180}
			);
		}
	}
	

	//	hp/mpg ratio
	document.getElementById('perfMpgBox').className = 'showBox';
	canvas = document.getElementById('perfMpg');
	ctx = canvas.getContext('2d');
	var maxHp = 500;
	var maxMpg = 60;
	drawGraph(ctx, 'both', 300, [{src: 'img/perfHp.gif', x: 0, y: 51}, {src: 'img/perfMpg.gif', x: 144, y: 204}]);
	//set up event handler and hide data point details
	var plotLabel;
	for (var i = 0; i < 3; i++) {
		plotLabel = document.getElementById('perfMpgD0' + i);
		//necessary for multiple calls to draw()
		plotLabel.className = 'hide';
		if (!assignedEvents) {			
			plotLabel.onmouseover = showPlotDataMpg;
			plotLabel.onmouseout = hidePlotData;
			plotLabel.onclick = hidePlotData;
		}
	}	
	for (var i = 0; i < cars.length; i++) {
		if (cars[i] != null) {	
			drawData(
				ctx,i,[{l: 'perfMpg', v: cars[i].mpgc}, {v: cars[i].hp}], [maxMpg, maxHp], 'both', {w: 255, h: 180}
			);
		}
	}
	
	assignedEvents = true;
}