var members_store;

Ext.onReady(function(){
	Ext.QuickTips.init();
	
	var members_tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'<div class="member_div" id="member_{sf_id}">',
			'<div class="member">',
				'<div class="member_picture">',
					'<img src="{sf_picture}" />',
				'</div>',
				'<div class="member_text">',
					'<div class="members_title">',
						'<a href="{sf_link}">{sf_name}</a>',
					'</div>',
					'<div class="members_stats">',
						'<span>{sf_friends}</span> Friends',
						'<tpl if="sf_interests">',
							',  <span >{sf_interests}</span> Interests',
						'</tpl>',
						'<tpl if="sf_photos">',
							',  <span>{sf_photos}</span> Photos',
						'</tpl>',
						'<tpl if="sf_activities">',
							',  <span>{sf_activities}</span> Activities',
						'</tpl>',
						'<br />',
						'<tpl if="sf_common">',
							'<span>In Common:</span>',
						'</tpl>',
						'<tpl if="sf_common_friends">',
							'<span>{sf_common_friends}</span> Friends',
							'<tpl if="sf_common_interests">',
								',  ',
							'</tpl>',
						'</tpl>',
						'<tpl if="sf_common_interests">',
							'<span>{sf_common_interests}</span> Interests',
						'</tpl>',
					'</div>',
				'</div>',
			'</div>',
		'</div>',
		'</tpl>'
	);
	
	members_store = new Ext.data.JsonStore({
		url: location.href+'&attending',
		root: 'members',
		totalProperty: 'totalCount',
		fields:[
			'sf_id',
			'sf_picture',
			'sf_name',
			'sf_link',
			'sf_friends',
			'sf_interests',
			'sf_photos',
			'sf_activities',
			'sf_common',
			'sf_common_friends',
			'sf_common_interests',
		]
	});

	var members_panel = new Ext.Panel({
		id:'members_view',
		frame: false,
		border: false,
		width: 608,
		autHeight: true,
		collapsible: false,
		layout: 'fit',
		tbar: new Ext.PagingToolbar({
			cls: 'paging_bar',
			id: 'paging_top_popup',
			pageSize: 12,
		    displayMsg : '{0}-{1} of {2} Friends Attending',
		    displayInfo: true,
			emptyMsg: 'No One Attending',
			store: members_store
		}),
		bbar: new Ext.PagingToolbar({
			cls: 'paging_bar',
			id: 'paging_bottom_popup',
			pageSize: 12,
		    displayMsg : '{0}-{1} of {2} Friends Attending',
		    displayInfo: true,
			emptyMsg: 'No One Attending',
			store: members_store
		}),
		items: new Ext.DataView({
			store: members_store,
			autoHeight:true,
			tpl: members_tpl,
			id: 'attending_dataview',
			multiSelect: false,
			overClass:'member-over',
			itemSelector: 'div.member',
			emptyText: 'No One Attending',
			loadingText: 'Loading... Please wait...'
		})
	});

   	members_panel.render('display_attending');
});