/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
Ext.onReady(function() { // create the Data Store
	var store = new Ext.data.Store({ // load using HTTP
		proxy: new Ext.data.HttpProxy({
			url: xcart_web_dir + '/venues-ajax.php',
			method: 'GET'
		}),
		baseParams: {
			task: "LISTING",
      cat: 1,
      state: "GETALL",
			request: "customer"
                         
		},
		// this parameter is passed for any HTTP request
		// the return will be JSON, so lets set up a reader
		reader: new Ext.data.JsonReader({ // records will have an "Item" tag
			root: 'venues',
			id: 'venueid',
			totalProperty: 'results'
		},
		[ // set up the fields mapping into the xml doc
		// The first needs mapping, the others are very basic
		{
			name: 'Title',
			mapping: 'title'
		},
		{
			name: 'venueid',
			mapping: 'venueid'
		},
		{
			name: 'Price',
			mapping: 'price'
		},
		{
			name: 'Teacher',
			mapping: 'teacher'
		},
		{
			name: 'Start',
			mapping: 'start'
		},
		{
			name: 'Venue',
			mapping: 'vname'
		},
		{
			name: 'Phone',
			mapping: 'phone'
		},
		{
			name: 'State',
			mapping: 'state'
		},
		{
			name: 'Address',
			mapping: 'address'
		},
		{
			name: 'City',
			mapping: 'city'
		},
		{
			name: 'Zipcode',
			mapping: 'zipcode'
		}])
	});
        
       /* alternative to above. but need GET so use above
        var store = new Ext.data.JsonStore({ 
	url: xcart_web_dir + '/products-ajax.php',
	root: 'products',
	baseParams: [{task: "LISTING"}, {cat: 1},{state: ""}],
	fields: [
  {	name: 'Hostsite',	mapping: 'p_data.company'},
	{	name: 'Title', 	mapping: 'product'},
	{	name: 'productid',mapping: 'productid'},
	{	name: 'Price',	mapping: 'price'},
	{	name: 'Teacher',	mapping: 'extra_fields.teacher'},
	{	name: 'Start',	mapping: 'extra_fields.start'},
	{	name: 'State',	mapping: 'p_data.b_state'},
	{	name: 'Avail',	mapping: 'avail'},
	{	name: 'Address',mapping: 'p_data.b_address'},
	{	name: 'City',	mapping: 'p_data.b_city'},
  {	name: 'Zipcode',	mapping: 'p_data.b_zipcode'}
	]
});
       */ 
        //Define paging toolbar
	var pagingBar = new Ext.PagingToolbar({
		pageSize: 15,
		store: store,
		displayInfo: true,
		displayMsg: 'Displaying classes {0} - {1} of {2}',
		emptyMsg: "No classes to display"
	}); // create the grid
	var grid = new Ext.grid.GridPanel({
		store: store,
		columns: [
		{
			header: "City/Town",
			width: 80,
			dataIndex: 'City',
			sortable: true
		},
		{
			header: "Venue",
			width: 160,
			dataIndex: 'Venue',
			sortable: true
		},
		{
			header: "Phone",
			width: 100,
			dataIndex: 'Phone',
			sortable: true
		}
		
		],
		sm: new Ext.grid.RowSelectionModel({
			singleSelect: true
		}),
		viewConfig: {
			forceFit: true,
			emptyText: '<span style=\'font-size:14px;\'>There are no locations found.<br/>Please check back soon as we are adding new hostsites regularly.</span>',
			deferEmptyText:true
		},
		height: 370,
		split: true,
		region: 'center',
		// paging bar on the bottom
		bbar: pagingBar,
		loadMask:true
	});

        // define a template to use for the detail view
	var bookTplMarkup = ['Title: {Title}<br/>', 'Teacher: {Teacher}<br/>', 'Price: ${Price}<br/>', 'Address: {Address}<br/>', 'City: {City}<br/>', 'State: {State}<br/>', 'Zipcode: {Zipcode}<br/>', 'Description: This is the {[values.Title.substr(6,1)]}', '<tpl if="values.Title == \'Class 1\'">', 'st', '</tpl>', '<tpl if="values.Title == \'Class 2\'">', 'nd', '</tpl>', '<tpl if="values.Title != \'Class 1\' && values.Title != \'Class 2\'">', 'rd', '</tpl>', ' eight week session of the \'Play Piano In A Flash\' classes<br/><br/>', '<input type="button" value="Register" id="cart-btn" style="margin-right:5px;"/><input type="button" value="Get me a Map" id="show-btn"/><br/><br/>','<input type="hidden" id="pid" value="{productid}" /><input type="hidden" id="geoLoc" value="{Address},{City},{State},{Zipcode}" /><input type="hidden" id="hostSite" value="{Hostsite}" />'];
	var bookTpl = new Ext.XTemplate(bookTplMarkup);
	var ct = new Ext.Panel({
		renderTo: 'grid-classes',
		frame: true,
		title: 'Class Locations <span style=\'font-size:9px;\'>(click on a specific line to see classes available at that Venue)</span>',
		width: 540,
		height: 450,
		layout: 'border',
		items: [grid
		/*, {
			id: 'detailPanel',
			region: 'center',
			bodyStyle: {
				background: '#ffffff',
				padding: '7px'
			},
			html: 'Please select a location to see additional details.'
		}
		*/]
	});
  grid.getSelectionModel().on('rowselect',
	function(sm, rowIdx, r) {
		/*var detailPanel = Ext.getCmp('detailPanel');
		bookTpl.overwrite(detailPanel.body, r.data);
		Ext.map.showBtn();
		showCartBtn();*/
		var el = grid.getEl();  //get underlying grid element 
		el.mask("Loading...");
		document.location.href = current_location + '/home.php?cat=1&vid='+r.data.venueid;
		
	});
	//store.load();   
	//store.load({params:{start:0, limit:15}});

	//store.setDefaultSort('City', 'ASC');
	
	var showCartBtn = function() {
		var cartButton = Ext.get('cart-btn');
		cartButton.on('click', function(){
			var pid = Ext.get('pid').dom.value;
			var cartURL= current_location + '/cart.php?mode=add&productid='+pid+'&amount=1';
			//alert (cartURL);
			document.location.href = cartURL;
		});
	};
	
	        //state selector
	var fstate = new Ext.FormPanel({
		frame: true,
		//title: 'Search for your local host site',
		title: 'Select state',
		labelAlign: 'right',
		labelWidth: 85,
		width: 340,
		waitMsgTarget: true,
		items: [
      
			new Ext.form.FieldSet({
			//title: 'Select state',
			defaultType: 'textfield',
			autoHeight: true,
			items: [
      
			new Ext.form.ComboBox({
				fieldLabel: 'State',
				hiddenName: 'state',
				store: new Ext.data.SimpleStore({
					fields: ['abbr', 'state'],
					data: Ext.exampledata.states // from states.js
				}),
				valueField: 'abbr',
				displayField: 'state',
				typeAhead: true,
				mode: 'local',
				triggerAction: 'all',
				emptyText: 'Select a state...',
				selectOnFocus: true,
				width: 190
			})]
		})]
	});
        
	fstate.items.items[0].items.items[0].on('select', function() {
             
    Ext.get('grid-classes').dom.style.visibility = 'visible';
	Ext.get('gmap-display').dom.style.display = 'none';
    
    store.baseParams.state = this.value;
    store.load({params:{start:0, limit:15}});
    //grid.getView().refresh();  causes issues with the grid deferEmptyText:true
  });
	fstate.render('state-selector'); // end state selector
	
});