function loadJSON(url) {
		// Loads a JSON file using Ajax - note that asynchronous is set
		// to false so that it has to load before the function returns
		// You only want to do this when loading 'static' data from a file
		var json = null;		
		var request = new Ajax.Request(url, {
			method: 'get',
			onComplete: function(transport) {
				json = transport.responseText.evalJSON();
			},
			asynchronous: false
		});
		return json;
	}



	function drawExonMap(panel_id) {

		var transcripts = loadJSON('brca1_exons_data.js');
		// ought to set these from the data itself
		var exon_offset_hi = 38530994;
		var exon_offset_lo = 38449840;
		
		var map_lo = 38449000;
		var map_hi = 38531000;

		var panelHeight = 170;
		var panelWidth  = 700;
		var panel = new orthoPanel(panel_id, 0, 0, panelWidth, panelHeight);
	    var objList = new Array();

		var x_offset = 20;
		var y_offset = 30;

		var dataWidth = map_hi - map_lo + 1;
		var scale = (panelWidth-2*x_offset) / dataWidth;

		// Add a horizontal ruler
		var minor_tick_interval = Math.round(scale * 1000);
		var ruler_tick_interval = minor_tick_interval *10;
			// rework the scale parameter based on the integer tick intervals
		scale = minor_tick_interval / 1000;
		var ruler_tick_height = 8;
		
        var ruler = new orthoRuler(panel, x_offset, panelHeight - 25, 'horizontal', panelWidth - (2*x_offset),
					{ major_tick_placement: 'below',
					  major_tick_interval: ruler_tick_interval,
					  major_tick_height:   ruler_tick_height,
					  major_label_low: 0,
					  major_label_interval: 10000,
					  minor_tick_placement: 'below',
					  minor_tick_interval: minor_tick_interval,
					  minor_tick_height:   ruler_tick_height/2
					});
		var title = new orthoLabel(panel, panelWidth/2, 15, 'Map of Exons in Transcripts of the Human BRCA1 Gene','center');
		
		// Draw the exon maps
		var x = 0;
		var y = y_offset;
		var width = 0;
		var height = 10;
//		var i = 0;
		var exonClass = 'exon-rectangle-0';	
			
		transcripts.each( function(dataset) {

			// Flip the BRCA exon start and end coordinates
			dataset.exons.each( function(exon)  {
				var tmp = exon['start'];
				exon['start'] = exon['end'];
				exon['end'] = tmp;
				exon['start'] = - (exon['start'] - exon_offset_hi);
				exon['end']   = - (exon['end'] - exon_offset_hi);
			});

			width = Math.round(dataWidth * scale);
			var line = new orthoLine(panel, x_offset, y+(height/2), width, 1, {cssClass: 'transcript-line-horizontal'});
		
			var label = new orthoLabel(panel, x_offset, y-10, dataset['name'], 'right');
			objList.push(line);
			objList.push(label);
			dataset.exons.each( function(exon) {
				x = Math.round(exon['start'] * scale) + x_offset;
				width = Math.round((exon['end'] - exon['start']) * scale);
				// Pad the width so the it can be printed and it is visible
				if(width <= 3) {
					width = 3;
				}
				var rect = new orthoRectangle(panel, x, y, width, height, {cssClass: exonClass});
			objList.push(rect);
			});

			y+= 30;
		});

	}