Ext.ns("app");

app.ProductDataView = Ext.extend(Ext.DataView,
	{
		//Defaults
		autoHeight:true,
		
		singleSelect: true,
		
		overClass:'prod-wrap-over',
		
		selectedClass: "prod-wrap-selected",
		
		itemSelector:'div.prod-wrap',
		
		loadingText: "Producten worden opgehaald...",
		
		emptyText: 'Geen producten om weer te geven',
		
		url: "productDataSmall.json",
		
		productPageUrl: "",
		
		initComponent: function()
			{
				this.store = this.store || new Ext.data.JsonStore(
					{
						root: "items",
						url: this.url,
						remoteSort: true,
						fields:
						[
							"id",
							"title",
							"price",
							"image",
							"description",
							"manufacturerName"
						]
					}
				);
				
				/*
				this.tpl = new Ext.XTemplate(
					'<tpl for=".">',   
						'<div class="prod-wrap" id="prod-{id}">',
							'<div class="prod-image-wrap"><div class="prod-image-clipwrap"><img class="prod-image" src="http://www.autorevista.nl/img/aanbiedingen/thumb_medium/{image}" title="{manufacturerName} {title}"></div></div>',   
							'<a href="' + this.productPageUrl + '" title="{manufacturerName} {title} pagina" class="prod-more-link"></a>',
							'<div class="prod-title" title="{manufacturerName} {title}">{shortTitle}</div>',
							'<div class="prod-price">&euro; {price}</div>',
							'<div class="product-badge-new"></div>',
						'</div>',
					'</tpl>'
				);
				*/
				this.tpl = new Ext.XTemplate(
					'<tpl for=".">',   
						'<div class="prod-wrap" id="prod-{id}">',
							'<a href="producten/{id}/"><div class="prod-image-wrap"><div class="prod-image-clipwrap"><img class="prod-image" src="http://www.autorevista.nl/img/aanbiedingen/thumb_medium/{image}" title="{manufacturerName} {title}"></div></div></a>',   
							'<a href="producten/{id}/"><div class="prod-title" title="{manufacturerName} {title}">{shortTitle}</div></a>',
							'<div class="prod-price">&euro; {price}</div>',
							//'<div class="product-badge-new"></div>',
						'</div>',
					'</tpl>'
				);
				
				app.ProductDataView.superclass.initComponent.call(this);
			},
		
		prepareData: function(data)
			{
				data.shortTitle = Ext.util.Format.ellipsis(data.manufacturerName + " " + data.title, 65);
				//data.shortTitle = data.manufacturerName + " " + data.title;
				data.urlTitle = data.manufacturerName + " " + data.title;
				//data.sizeString = Ext.util.Format.fileSize(data.size);   
				//data.dateString = data.lastmod.format("m/d/Y g:i a");   
				return data;
			}
	}
);