Ext.onReady(function(){
	transcriptView();
	classificationView();
	domainView();
	strView();
	sapView();
});

function repeatView(type, title) {
	var form_id = 'form';
	var form_name = getValue('form_name');
	var id = getValue('id');

	var ds = new Ext.data.Store({
        proxy: getHttpProxy('xml_gene.htm'),
		baseParams: {
			form_name: form_name,
			id: id,
			type: type
		},
		// the return will be XML, so lets set up a reader
		reader: new Ext.data.XmlReader({
			// records will have an "Item" tag
			record: 'repeat',
			id: 'id',
			totalRecords: 'total_results'
			}, 
			getRepeatSeqRecordConfig()
		),
		remoteSort: true
	});
	ds.setDefaultSort('division','asc');

    var cm = new Ext.grid.ColumnModel([
		{header: "Region", dataIndex: 'division', sortable: true},
		{header: "Position in Transcript", dataIndex: 'transcript_start', renderer: renderTranscriptPosition, sortable: true},
		{header: "Repeat Unit", dataIndex: 'unit', sortable: true},
		{header: "Repeat Number", dataIndex: 'repeat_number', sortable: true},
		{header: "Polymorphism", dataIndex: 'polymorphism', sortable: true}
	]);
	cm.defaultSortable = true;

	var paging = getPagingToolbar(ds);

	// create the grid
	var grid = new Ext.grid.GridPanel({
		title: title,
		trackMouseOver:false,
		ds: ds,
		cm: cm,
		loadMask: true,
		renderTo:type,
		autoSizeColumns:true,
		autoScroll:true,
		width:945,
		height:150,
        frame:true,
		bbar: paging
	});

	grid.render();

	ds.load({params:{start:0, limit:100}});
}
function strView() {
	repeatView('str', 'STR');
}

function sapView() {
	repeatView('sap', 'SAR');
}

function domainView() {
	var form_id = 'form';
	var form_name = getValue('form_name');
	var id = getValue('id');

	var ds = new Ext.data.Store({
        proxy: getHttpProxy('xml_gene.htm'),
		baseParams: {
			form_name: form_name,
			id: id,
			type: 'domain'
		},
		// the return will be XML, so lets set up a reader
		reader: new Ext.data.XmlReader({
			// records will have an "Item" tag
			record: 'interpro',
			id: 'interpro > id',
			totalRecords: 'total_results'
		}, [
			// set up the fields mapping into the xml doc
			// The first needs mapping, the others are very basic
			{name: 'domain_id', mapping: 'interpro_id'},
			{name: 'transcript_start', mapping: 'start'},
			{name: 'transcript_end', mapping: 'end'},
			{name: 'name', mapping: 'name'}
		]),
		remoteSort: true
	});
	ds.setDefaultSort('domain_id','asc');
	
    var cm = new Ext.grid.ColumnModel([
		{header: "Position in Transcript", dataIndex: 'transcript_start', renderer: renderTranscriptPosition},
		{header: "InterPro", dataIndex: 'domain_id', renderer: renderDomain},
		{header: "Name", dataIndex: 'name', width:200}
	]);
	cm.defaultSortable = true;

	var paging = getPagingToolbar(ds);

	// create the grid
	var grid = new Ext.grid.GridPanel({
		title: 'Domain',
		trackMouseOver:false,
		ds: ds,
		cm: cm,
		loadMask: true,
		renderTo:'domain',
		autoSizeColumns:true,
		autoScroll:true,
		width:945,
		height:200,
		frame:true,
		bbar: paging
	});

	grid.render();

	ds.load({params:{start:0, limit:100}});
}

function classificationView() {
	var form_id = 'form';
	var form_name = getValue('form_name');
	var id = getValue('id');

	var ds = new Ext.data.Store({
        proxy: getHttpProxy('xml_gene.htm'),
		baseParams: {
			form_name: form_name,
			id: id,
			type: 'classification'
		},
		// the return will be XML, so lets set up a reader
		reader: new Ext.data.XmlReader({
			// records will have an "Item" tag
			record: 'polymorphism',
			id: 'polymorphism > mapped > id',
			totalRecords: 'total_results'
		}, [
			// set up the fields mapping into the xml doc
			// The first needs mapping, the others are very basic
			{name: 'polymorphism_id', mapping: 'id'},
			'rs_number',
			{name: 'chromosome', mapping: 'chromosome'},
			{name: 'chr_start', mapping: 'start'},
			{name: 'chr_end', mapping: 'end'},
			{name: 'chr_position'},
			'strand',
			'allele',
			'validation',
			'heterozygosity',
			{name: 'hit', mapping: 'transcript > hit'},
			{name: 'transcript_start', mapping: 'mapped > start'},
			{name: 'transcript_end', mapping: 'mapped > end'},
			{name: 'hit_allele', mapping: 'mapped > allele'},
			{name: 'division', mapping: 'mapped > range'},
			{name: 'classification', mapping: 'mapped > classification'},
			{name: 'codon', mapping: 'mapped > amino_asid > codon'},
			{name: 'id', mapping: 'mapped > id'},
			{name: 'interpro_id', mapping: 'interpro_id'},
			{name: 'psv', mapping: 'mapped > psv > type'},
			{name: 'omim_av', mapping: 'mapped > omim > id'},
			{name: 'link'},
			{name: 'chr_position'}
		]),
		remoteSort: true
	});
	ds.setDefaultSort('rs_number','asc');

    var cm = new Ext.grid.ColumnModel([
		{header: "dbSNP ID", dataIndex: 'rs_number', renderer: renderPolymorphism, sortable: true},
		{header: "Position", dataIndex: 'chr_position', renderer: renderChrPosition, sortable: true},
		{header: "Allele", dataIndex: 'allele', sortable: true},
		{header: "Strand", dataIndex: 'strand', sortable: true},
		{header: "Validation", dataIndex: 'validation', sortable: true},
		{header: "Heterozygosity", dataIndex: 'heterozygosity', sortable: true},
		{header: "Position in Transcript", dataIndex: 'transcript_start', renderer: renderTranscriptPosition, sortable: true},
		{header: "Region", dataIndex: 'division', sortable: true},
		{header: "Type", dataIndex: 'classification', sortable: true},
		{header: "Codon", dataIndex: 'codon', sortable: true},
		{header: "Effect on Domain", dataIndex: 'interpro_id', renderer: renderInterProClass, sortable: false},
		{header: "Effect on Protein 3D", dataIndex: 'psv', renderer: renderPsv, sortable:false},
		{header: "OMIM Allelic Valiant", dataIndex: 'omim_av', sortable:false},
		{header: "Link", renderer: renderdbSNPLink, sortable:false}
	]);
	cm.defaultSortable = true;

	var paging = getPagingToolbar(ds);

	// create the grid
	var grid = new Ext.grid.GridPanel({
		title: 'Classification',
		trackMouseOver:false,
		ds: ds,
		cm: cm,
		loadMask: true,
		renderTo:'classification',
		autoSizeColumns:true,
		autoScroll:true,
		width:945,
		height:200,
		frame:true,
		bbar: paging
	});

	grid.render();

	ds.load({params:{start:0, limit:100}});
}

function transcriptView() {
	var form_id = 'form';
	var form_name = getValue('form_name');
	var id = getValue('id');

	var ds = new Ext.data.Store({
        proxy: getHttpProxy('xml_gene.htm'),
		baseParams: {
			form_name: form_name,
			id: id,
			type: 'transcript'
		},
		// the return will be XML, so lets set up a reader
		reader: new Ext.data.XmlReader({
			// records will have an "Item" tag
			record: 'transcript',
			id: 'id',
			totalRecords: 'total_results'
		}, getTranscriptRecordConfig()),
		remoteSort: true
	});
	ds.setDefaultSort('hit','asc');
	
    var cm = new Ext.grid.ColumnModel([
		{header: "H-Inv ID", dataIndex: 'hit', renderer: renderTranscript, sortable: true},
		{header: "Position", dataIndex: 'chr_position', renderer: renderChrPosition, sortable: true},
		{header: "Accession No.", dataIndex: 'accession', sortable: true},
		{header: "H-Inv cluster ID", dataIndex: 'hix', sortable: true},
		{header: "Representative Transcript", dataIndex: 'representative', sortable: true},
		{header: "Gene Name", dataIndex: 'gene_name', sortable: true},
		{header: "Category", dataIndex: 'category', sortable: true},
		{header: "Definition", dataIndex: 'definition', sortable: true},
		{header: "Link", dataIndex: 'id', renderer: renderTranscriptLink, width: 400, sortable: false}
	]);
	cm.defaultSortable = true;

	var paging = getPagingToolbar(ds);

	// create the grid
	var grid = new Ext.grid.GridPanel({
		title: 'Transcript',
		trackMouseOver:false,
		ds: ds,
		cm: cm,
		loadMask: true,
		renderTo:'transcript',
		autoSizeColumns:true,
		autoScroll:true,
		width:945,
		height:110
//		frame:true,
//		bbar: paging
	});

	grid.render();

	ds.load({params:{start:0, limit:100}});
}