/*
 * 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 + '/products-ajax.php',
			method: 'GET' 			
		}),
		/*sortInfo: {field:"Start" , direction:"DESC"},  this will only sort per page*/
		baseParams: {
			task: "LISTING",
      cat: 1,
      state: "", 
			venueid: vid
                         
		},
		// this parameter is passed for any HTTP request
		// the return will be JSON, so lets set up a reader
		reader: new Ext.data.JsonReader({ 
			root: 'products',
			id: 'productid',
			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: 'productid',
			mapping: 'productid'
		},
		{
			name: 'Price',
			mapping: 'price'
		},
		{
			name: 'Teacher',
			mapping: 'teacher'
		},
		{
			name: 'Start',
			mapping: 'start'
		},
		{
			name: 'Venue',
			mapping: 'venue'
		},
		{
			name: 'State',
			mapping: 'state'
		},
		{
			name: 'Address',
			mapping: 'address'
		},
		{
			name: 'City',
			mapping: 'city'
		},
		{
			name: 'Zipcode',
			mapping: 'zipcode'
		}
		,
		{
			name: 'Phone',
			mapping: 'phone'
		}
		,
		{
			name: 'Time',
			mapping: 'time'
		},
		{
		name: 'Day',
		mapping: 'day'
		
		},
		{
			name: 'descr',
			mapping: 'descr'
		}
		
		])
	});
        
       /* 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: "Venue",
			width: 160,
			dataIndex: 'Venue',
			sortable: true
		},
		{
			header: "Title",
			width: 100,
			dataIndex: 'Title',
			sortable: true
		},
		{
			header: "Start Date",
			width: 115,
			dataIndex: 'Start',
			sortable: true
		},
				{
			header: "Time",
			width: 115,
			dataIndex: 'Time',
			sortable: true
		},
		{
			header: "Phone",
			width: 170,
			dataIndex: 'Phone',
			sortable: true
		},
		{
			header: "City/Town",
			width: 100,
			dataIndex: 'City',
			sortable: true
		},
		{
			header: "State",
			width: 80,
			dataIndex: 'State',
			sortable: true
		}],
		sm: new Ext.grid.RowSelectionModel({
			singleSelect: true
		}),
		viewConfig: {
			forceFit: true,
			//
			emptyText: '<span style=\'font-size:14px;\'>Currently there are no new classes scheduled to start in the near future. <br />Please call the host site directly for more information on upcoming Play Piano in a Flash classes.</span>',
			deferEmptyText:true
		},
		height: 260,
		split: true,
		region: 'north',
		// paging bar on the bottom
		bbar: pagingBar,
		loadMask:true
	
	});
		//grid.getView().deferEmptyText = true;
   //grid.getView().emptyText = '<span style=\'font-size:14px;\'>There are no classes found for this state.<br/>Please check back soon as we are adding new hostsites regularly.</span>';
        
        // define a template to use for the detail view
	var bookTplMarkup = ['Title: {Title}<br/>', 'Teacher: {Teacher}<br/>','Day of week class meets: {Day}	<br/>', 'Start date: {Start}<br/>','Time: {Time}<br/>','Price: ${Price} (for the entire course which meets once a week for 8 weeks)<br/>', 'Address: {Address}<br/>', 'City: {City}<br/>', 'State: {State}<br/>', 'Zipcode: {Zipcode}<br/>', 'Phone: {Phone}<br/>','Description: This is the {[values.Title.substr(6,1)]}', '<tpl if="values.Title == \'Level 1\'">', 'st', '</tpl>', '<tpl if="values.Title == \'Level 2\'">', 'nd', '</tpl>', '<tpl if="values.Title != \'Level 1\' && values.Title != \'Level 2\'">', 'rd', '</tpl>', ' eight week session of the \'Play Piano In A Flash\' classes<br/>{descr}<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 List <span style=\'font-size:9px;\'>(click on a column title to sort)</span>',
		width: 700,
		height: 570,
		layout: 'border',
		items: [grid, {
			id: 'detailPanel',
			region: 'center',
			bodyStyle: {
				background: '#ffffff',
				padding: '7px'
			},
			html: 'Please select a class 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();
	});
	//store.load({params:{start:0, limit:15}});
        
        //state selector
	var fstate = new Ext.FormPanel({
		frame: true,
		title: 'Search for your local host site',
		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.state.on('change', this.onChange, this, {
            single: false,
            delay: 100,
            forumId: 4
        });
       */
       fstate.items.items[0].items.items[0].on('select', function() {
             
             Ext.get('grid-classes').dom.style.visibility = 'visible';
             
             store.baseParams.state = this.value;
             store.load({params:{start:0, limit:15}});
             //grid.getView().refresh();
        });
	//AH 2.19.11 can render venue choice from selecting state. show link instead
	//fstate.render('state-selector'); // end state selector
	
	
	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;
		});
	};
	
	if (vid) {
		 Ext.get('grid-classes').dom.style.visibility = 'visible';
		 store.load({params:{start:0, limit:15}});
     grid.getView().refresh();
	
	}

});