Ext.namespace('lor');

lor.CalendarPanel = Ext.extend(Ext.DataView, {
	
	url: null,
	
	itemSelector: 'div.lor-event-entry',
	
	initComponent: function()
	{
		var sc = {
			autoDestroy: true,
			autoLoad: true,
			root: 'events',
			idProperty: 'name',
			sortInfo: {
				field: 'date',
				direction: 'ASC'
			},
			fields: [
			{name: 'date', type: 'date', dateFormat: 'Y-m-d'},
			'name',
			'url',
			'location',
			'prov',
			'mapUrl',
			'resultUrl',
			'photoUrl',
			'videoUrl',
			{name: 'cancelled', type: 'boolean'},
			{name: 'valid', type: 'auto'}
			]
		};
		
		if(this.seasonData)
			sc.data = this.seasonData;
		else
			sc.url = this.url;
		
		this.store = new Ext.data.JsonStore(sc);
		
		if(this.daysWindow)
		{
			
			this.store.filterBy(function(record){
				var now = new Date();
				var ms = this.daysWindow * 24 * 60 * 60 * 1000;
				var from = new Date(now.getTime() - ms);
				var to = new Date(now.getTime() + ms);
				var d = record.get('date');
				return Ext.isDate(d) && d.between(from, to);
			},this);
		}
		
		this.tpl = new Ext.XTemplate(
		'<table class="lor-calendar-table">',
		'<tpl for=".">',
		'<tr class="lor-event-entry">',
		'<td class="lor-calendar-date" style="padding-top: 3px">{[values.date.format("d/m/y")]}</td>',
		'<td class="lor-calendar-text">',
		'<a href="{url}" target="_blank" style="font-weight: bold <tpl if="cancelled">; text-decoration: line-through</tpl>">{name}</a>',
		'<br>{location} ({prov})<br>',
		'<tpl if="resultUrl"><a href="{resultUrl}" target="_blank">Classifica</a>&nbsp;</tpl>',
		'<tpl if="photoUrl"><a href="{photoUrl}" target="_blank">Foto</a>&nbsp;</tpl>',
		'<tpl if="videoUrl"><a href="{videoUrl}" target="_blank">Video</a>&nbsp;</tpl>',
		'</td></tr>',
		'</tpl>',
		'</table>',
		{
			compiled: true
		}
		);
		
		lor.CalendarPanel.superclass.initComponent.call(this);
	}
	
});