Ext.onReady(function(){
	var image_data = {};
	var selected_node;
	
	var store = new Ext.data.JsonStore({
		url: '/scripts/exhibition_data.json.php',
		baseParams: {id: '27'},
		root: 'images',
		fields: [
			'id',
			'name',
			'src',
			'image_text',
			'artist_text',
		]
	});
	store.load({
		callback: function() {
			view.select(0);
		}
	});
	
	// 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"></div>',
		'</div><br />',
		'</tpl>'
	);
	image_template.compile();
	
	var detail_template = new Ext.XTemplate(
		'<tpl for=".">',
		'<table width="100%" border="0" cellspacing="0" cellpadding="0">',
		'<tr>',
		'<td class="borderbottom" style="padding-bottom:10px;">',
			'<table width="100%" border="0" cellspacing="0" cellpadding="0">',
			'<tr>',
			'<td width="50" style="padding-right:10px;"><img id="image" src="{src}" style="margin-top: 4px;" /></td>',
			'<td style="padding-left:10px; border-left:1px solid #000000; vertical-align:bottom;">',
			'<span class="arial10reg">{image_text}</span>',
			'</td>',
			'</tr>',
			'</table>',
		'</td>',
		'</tr>',
		'</table>',
		'<br /><br />',
		'{artist_text}',
		'</tpl>'
	);
	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) {
			data.image_text = unescape(String(data.image_text).replace(/\+/g, " "));
			data.artist_text = unescape(String(data.artist_text).replace(/\+/g, " "));
			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];
					Ext.get('image_details').hide();
					detail_template.overwrite('image_details', data);
					Ext.get('image_details').show();
				}
			}
		}
	});
});