/*
 * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function() {
	var xd = Ext.data;

	var store = new Ext.data.JsonStore({
				url : 'get-images.php',
				root : 'images',
				fields : ['name', 'url', {
							name : 'size',
							type : 'float'
						}, {
							name : 'lastmod',
							type : 'date',
							dateFormat : 'timestamp'
						}]
			});
	store.load();

	var tpl = new Ext.XTemplate('<tpl for=".">',
			'<div class="thumb-wrap" id="{name}">',
			'<div class="thumb"><img src="{url}" title="{name}"></div>',
			'<span class="x-editable">{shortName}</span></div>', '</tpl>',
			'<div class="x-clear"></div>');

	var panel = new Ext.Panel({
		id : 'images-view',
		frame : true,
		width : 535,
		autoHeight : true,
		collapsible : true,
		layout : 'fit',
		title : 'Simple DataView with editable labels, multi and drag selection',

		items : new Ext.DataView({
					store : store,
					tpl : tpl,
					autoHeight : true,
					multiSelect : true,
					overClass : 'x-view-over',
					itemSelector : 'div.thumb-wrap',
					emptyText : 'No images to display',

					plugins : [new Ext.DataView.DragSelector(),
							new Ext.DataView.LabelEditor({
										dataIndex : 'name'
									})],

					prepareData : function(data) {
						data.shortName = Ext.util.Format
								.ellipsis(data.name, 15);
						data.sizeString = Ext.util.Format.fileSize(data.size);
						data.dateString = data.lastmod.format("m/d/Y g:i a");
						return data;
					}
				})
	});
	panel.render(document.body);

});