/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
Ext.BLANK_IMAGE_URL = '../scripts/resources/images/default/s.gif';

function loadPetGrid(petFile) {
	var dataFile = petFile;

// create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
		sortInfo: { field: "name", direction: "ASC" },
        url: dataFile,
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
        	record: 'pet'
           }, [ {	name: 'animalID'},
			   	{   name: 'species'},
           		{	name: 'name'},
           		{	name: 'breed'},
			   	{	name: 'primaryBreed'},
				{	name: 'secondaryBreed'},
				{	name: 'sex'},
				{	name: 'age'},
				{   name: 'altered'},
				{   name: 'declawed'},
				{	name: 'size'},
				{	name: 'color'},
				{	name: 'description'},
				{	name: 'pictmn1'}
           ])
    });
	
	function thumbInsert(val, p, record) {
		var imgSrc = record.data.pictmn1;
		var newSrc = imgSrc.replace("rgtest","rescuegroups");
		return '<a href="pet_info.html?type=' + record.data.species + '&pet=' + record.data.animalID + '"><img src="' + newSrc + '" /></a>';
	}
	
	function petLink(val, p, record) {
		return '<a href="pet_info.html?type=' + record.data.species + '&pet=' + record.data.animalID + '">' + val + '</a>';
	}

	function paraStripper(val, p, record) {
		var origBreed = val;
		var newBreed = origBreed.replace('&amp;#40;','(');
		origBreed = newBreed.replace('&amp;#41;',')');
		return origBreed;
	}
		
    // create the grid
		var grid = new Ext.grid.GridPanel({
			store: store,
			columns: [
				{header: "", width: 120, dataIndex: 'animalID', sortable: false, renderer: thumbInsert},
				{header: "Name", width: 125, dataIndex: 'name', sortable: true, renderer: petLink},
				{header: "Breed", width: 260, dataIndex: 'breed', sortable: true, renderer: paraStripper},
				{header: "Declawed", width: 76, dataIndex: 'declawed', sortable: true, renderer: paraStripper},
				{header: "Gender", width: 68, dataIndex: 'sex', sortable: true},
				{header: "Age", width: 65, dataIndex: 'age', sortable: true},
				{header: "Color", width: 120, dataIndex: 'color', sortable: true, renderer: paraStripper}
			],
			renderTo:'pet-grid',
			border: false,
			loadMask: true,
			enableHdMenu: false,
			autoExpand: "name",
			stripeRows: true,
			autoHeight: true,
			width: 836,

			listeners:{
    			render: function(grid){   //load the store when the grid is rendered
           		grid.loadMask.show();
           		var store = grid.getStore();
           		store.load.defer(20,store);  //give the mask a chance to render
    		},
    			delay : 100, //also give the loadMask time to init (afterRender).
   				single : true
			}
		});
}