Ext.onReady(function(){
	if (Ext.get('image_list')) {
		var image_data = {};
		var selected_node;
		
		var store = new Ext.data.JsonStore({
			url: '/scripts/photo_gallery.json.php',
			root: 'images',
			fields: [
				'id',
				'name',
				'src'
			]
		});
		store.load();
		
		// create the required templates
		var image_template = new Ext.XTemplate(
			'<tpl for=".">',
			'<div id="{name}" class="thumb_wrapper">',
			'<div class="thumbnail"><img src="{src}" title="{name}" width="120" style="border: 1px solid #000000;"></div>',
			'</div>',
			'</tpl>'
		);
		image_template.compile();
		
		var detail_template = new Ext.XTemplate(
			'<div style="text-align: center;"><img src="{src}" title="{name}"></div>'
		);
		detail_template.compile();
		
		// initialize the View
		var view = new Ext.DataView({
			renderTo: 'image_list',
			store: store,
			tpl: image_template,
			multiSelect: true,
			autoHeight: true,
			overClass: 'x-view-over',
			itemSelector: 'div.thumb_wrapper',
			emptyText: 'No images match the specified filter',
			prepareData: function(data) {
				image_data[data.name] = data;
				return data;
			},
			listeners: {
				'selectionchange': function(view, nodes) {
					selected_node = nodes[0];
					
					if (selected_node) {
						var data = image_data[selected_node.id];
						detail_template.overwrite(Ext.get(popup.body), data);
						popup.show(selected_node.id);
					}
				}
			}
		});
		
		var popup = new Ext.Window({
			renderTo: document.body,
			width: 557,
			height: 365,
			resizable: false,
			closeAction: 'hide'
			/*buttons: [{
				text: 'Previous',
				handler: function() {
					popup.hide(selected_node.id, function() {
						var previous_node = store.find('name', selected_node.id) - 1;
						if (previous_node < 0) {
							previous_node = store.getCount() - 1;
						}
						view.select(previous_node);
					});
				}
			},{
				text: 'Next',
				handler: function() {
					//popup.hide(selected_node.id, function() {
						var next_node = store.find('name', selected_node.id) + 1;
						if (next_node == store.getCount()) {
							next_node = 0;
						}
						view.select(next_node);
					//});
				}
			}]*/
		});
	}
});