Ext.namespace('lor');

lor.NewsPanel = Ext.extend(Ext.DataView, {
	
	itemSelector: '.lor-news-entry',
	
	newsData: null,
	
	overClass: 'lor-news-mouseover',
	
	expandClass: 'lor-news-body-expand',
	
	reduceClass: 'lor-news-body-reduce',
	
	hideImages: false,
	
	hideLinks: false,
	
	reduceBody: true,
	
	reduceLimits: ['</p>'],
	
	expandNews: true,
	
	getReducedBody: function(html)
	{
		if(Ext.isEmpty(html) || !this.reduceBody)
					return html;
				
		var index = -1;
		var limit = null;
		for(var i=0;i<this.reduceLimits.length && index <= 0;i++)
		{
			index = html.indexOf(this.reduceLimits[i]);
			if(index > 0)
				limit = this.reduceLimits[i];
		}
		
		if(index <= 0)
			return html;
		
		var red = html.substring(0,(index + limit.length));
		if(this.expandNews)
		{
			red += '<div class="'+this.expandClass+'">Visualizza il resto del testo &raquo;</div>';
		}
		return red;
	},
	
	getExpandedBody: function(html)
	{
		html += '<div class="'+this.reduceClass+'">&laquo; Riduci</div>';
		return html;
	},
	
	onNewsClick: function(dw, number, el, event)
	{
		el = Ext.get(el);
		var body = el.child('.lor-news-body');
		var record = this.store.getAt(number);
		var target = Ext.get(event.getTarget());
		if(target.hasClass(this.expandClass))
		{
			var txt = record.get('html');
			body.update(this.getExpandedBody(txt));
		}
		else if(target.hasClass(this.reduceClass))
		{
			var txt = record.get('html');
			body.update(this.getReducedBody(txt));
		}
	},
	
	initComponent: function()
	{
		var sc = {
			autoDestroy: true,
			sortInfo: {
				field: 'date',
				direction: 'DESC'
			},
			fields: [
				{name: 'date', type: 'date', dateFormat: 'Y-m-d'},
				{name: 'toBlank', type: 'boolean'},
				'title',
				'url',
				'img',
				'html',
				'imgUrl',
				'links',
				'tooltip',
				'bodyCls'
			]
		};
		
		if(this.newsData)
			sc.data = [].concat(this.newsData);
		
		this.store = new Ext.data.JsonStore(sc);
		
		var bodyExtraCls = '';
		var bodyStyle = '';
		
		this.tpl = new Ext.XTemplate(
		'<table class="lor-news-table">',
		'<tpl for=".">',
		'<tr>',
  		'<td>',
  		'<table class="lor-news-entry">',
  		'<tr>',
  		'<tpl if="imgUrl && !this.env.hideImages">',
  		'<td class="lor-news-img"><tpl if="url"><a href="{url}" {[this.getTarget(values)]}></tpl><img src="{imgUrl}"><tpl if="url"></a></tpl></td></tpl>',
  		'<td class="lor-news-cell">',
  		'<table style="width: 100%">',
  		'<tr><td class="lor-news-title"><tpl if="url"><a href="{url}" {[this.getTarget(values)]}></tpl>{title}<tpl if="url"></a></tpl></td><td class="lor-news-date">Pubblicato il {[values.date.format("d/m/y")]}</td><tr>',
  		'<tr><td colspan="2"><div class="lor-news-body <tpl if="bodyCls">{bodyCls}</tpl>" <tpl if="tooltip">ext:qtip="{tooltip}"</tpl>>{[this.getBody(values)]}</div></td></tr>',
  		'<tpl if="links && !this.env.hideLinks">',
  		'<tr><td colspan="2" class="lor-news-links">',
  		'<tpl for="links">',
  		'<tpl if="xindex &gt; 1">&nbsp;|&nbsp;</tpl>',
  		'<a href="{url}" {[this.getTarget(values)]}>{html}</a>',
  		'</tpl>',
  		'</td></tr>',
  		'</tpl>',
  		'</table>',
  		'</td>',
  		'</tr>',
  		'</table>',
  		'</td>',
  		'</tr>',
  		'</tpl>',
  		'</table>',
		{
			compiled: true,
			
			env: this,
			
			getTarget: function(values)
			{
				var target = values.target;
				if(values.toBlank)
					target = '_blank';
				return Ext.isEmpty(target) ? '' : 'target="'+target+'"';
			},
			
			getBody: function(values)
			{
				return this.env.getReducedBody.call(this.env, values.html);
			}
		}
		);
		
		this.on({
			scope: this,
			click: this.onNewsClick
		});
		
		lor.NewsPanel.superclass.initComponent.call(this);
	}
});