/*
 * 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 loadPlanGrid(communityData) {
	
	var dataFile = 'data/plans.xml';

// create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: dataFile,
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
        	record: 'plans'
           }, [ {	name: 'plan'},
           		{	name: 'plan_id'},
			   	{	name: 'sqft'},
				{	name: 'bed'},
				{	name: 'bath'},
				{	name: 'garage'},
				{	name: 'master_location'},
				{   name: 'townhome'}
           ])
    });

	store.on("load", function(e,r,t) {
		if(e.data.length <=4)
			grid.setWidth(608);
		else {
			var winPos = $('pos').value;
			if(winPos >0 ) {
				window.scroll(0,(winPos * 156) + 320);
				grid.getSelectionModel().selectRow(winPos);
			}
		}
	}, this, true);
	
	function thumbInsert(val, p, record) {
		var linkLocation = 'plans/' + record.data.plan_id;
		var imageLocation = linkLocation + '/' + record.data.plan_id + '_thumb.jpg';
		return '<a href="plans?plan=' + record.data.plan_id + '"><img src="' + imageLocation + '" width="200px" height="155px" /></a>';
	}
	
	function formatComma( num ) {
        var isNegative = false;
   
        if( isNaN( num ) ) {
          num = "0";
        }
        if ( num < 0 ) {
          num = Math.abs( num );
          isNegative = true;
        }

        for ( i = 0; i < Math.floor( ( num.length - ( 1 + i ) ) / 3 ); i++) {
          num = num.substring( 0 ,num.length - ( 4 * i + 3 ) ) + ',' + num.substring( num.length - ( 4 * i + 3 ) );
        }

        var result = num;
        if ( isNegative ) {
          result = "-" + result;
        }
        
        if ( num == 0 )
        	result = "TBD";
        	
        return result;
	}

	function communityLink(val, p, record) {
		var link = '<a href="plans?plan=' + record.data.plan_id + '">' + val + '</a>';
		return link;
	}
	
	// create the grid
		var grid = new Ext.grid.GridPanel({
			store: store,
			columns: [
				{header: "", width: 210, dataIndex: 'plan_id', sortable: false, renderer: thumbInsert},
				{header: "Plan", width: 150, dataIndex: 'plan', sortable: true, renderer: communityLink},
				{header: "SqFt", width: 55, dataIndex: 'sqft', sortable: true, renderer: formatComma},
				{header: "Beds", width: 55, align: 'center', dataIndex: 'bed', sortable: true},
				{header: "Baths", width: 55, align: 'center', dataIndex: 'bath', sortable: true},
				{header: "Garage", width: 63, align: 'center', dataIndex: 'garage', sortable: true},
				{header: "Master", width: 65, align: 'center', dataIndex: 'master_location', sortable: true}
			],
			renderTo:'home-grid',
			border: false,
			loadMask: true,
			enableHdMenu: false,
			autoExpand: "plan",
			stripeRows: true,
			width: 655,
			autoHeight: true,
			listeners: {
            	scope: this,
            	render: function() {
                	store.load();
            	}
        	}
		});
		
		grid.on('rowclick', function(grid, rowIndex, e) {
			$('pos').set('value',rowIndex);
		});  
}