Ext.onReady(function(){
		var selected_node;
		var selected_node_lower;
		var control_node;
		var control_view;
		var is_lower = false;
		
		// create the required templates
		var image_template = new Ext.Template(
			'<div id="{name}" class="thumb_wrapper">'
			+ '<div class="thumbnail"><img src="{src}" title="{name}" width="110"></div>'
			+ '</div>'
		);
		image_template.compile();
		
		var detail_template = new Ext.Template(
			'<div style="text-align: center;"><img src="{src}" title="{name}"></div>'
		);
		detail_template.compile();
		
		var image_template_lower = new Ext.Template(
			'<div id="{name}" class="thumb_wrapper">'
			+ '<div class="thumbnail"><img src="{src}" title="{name}" width="110"></div>'
			+ '</div>'
		);
		image_template_lower.compile();
		
		var detail_template_lower = new Ext.Template(
			'<div style="text-align: center;"><img src="{src}" title="{name}"></div>'
		);
		detail_template_lower.compile();
		
		// initialize the View		
		var view = new Ext.JsonView('image_list', image_template, {
			singleSelect: true,
			jsonRoot: 'images',
			emptyText : '<div style="padding:10px;">No images match the specified filter</div>'
		});
		
		view.load({
			url: '/scripts/photo_gallery.json.php',
			callback: function() {
				//view.select(0);
			}
		});
		
		view.on('selectionchange', function(view, nodes) {
			is_lower = false;
			selected_node = nodes[0];
			if(selected_node && view.getCount() > 0){
				var data = image_data[selected_node.id];

				detail_template.overwrite(dialog_bd, data);

				dialog.show(selected_node.id);
			}
		});
		
		var view_lower = new Ext.JsonView('image_list_lower', image_template, {
			singleSelect: true,
			jsonRoot: 'images_lower',
			emptyText : '<div style="padding:10px;">No images match the specified filter</div>'
		});
		
		view_lower.load({
			url: '/scripts/photo_gallery_lower.json.php',
			callback: function() {
				//view.select(0);
			}
		});
		
		view_lower.on('selectionchange', function(view_lower, nodes) {
			is_lower = true;
			selected_node_lower = nodes[0];
			if(selected_node_lower && view_lower.getCount() > 0){
				var data = image_data_lower[selected_node_lower.id];

				detail_template_lower.overwrite(dialog_bd, data);

				dialog.show(selected_node_lower.id);
			}
		});
		
		// Get all the image information into an array, so we can use it later
		var image_data = {};
		var image_data_lower = {};
		
		view.prepareData = function(data){
			image_data[data.name] = data;
			return data;
		};
		
		view_lower.prepareData = function(data){
			image_data_lower[data.name] = data;
			return data;
		};
		
		
		var dialog_div = Ext.DomHelper.append(document.body, {tag: 'div', id: 'dialog'});
		//var dialog_hd = Ext.DomHelper.append(dialog_div, {tag: 'div', cls: 'x-dlg-hd'});
		var dialog_bd = Ext.DomHelper.append(dialog_div, {tag: 'div', cls: 'x-dlg-bd'});
		
		var dialog = new Ext.BasicDialog(dialog_div, {
			//title: 'Image',
			//width: 500,
			//height: 333,
			autoCreate: true,
			closable: true,
			collapsible: false,
			draggable: true,
			resizable: false,
			proxyDrag: true,
			shadow: true,
			modal: true,
			fixedCenter: true
		});
		
		dialog.addButton("Previous", function() {
			if(is_lower){
				control_node = selected_node_lower;
				control_view = view_lower;
			} else {
				control_node = selected_node;
				control_view = view;
			}
			dialog.hide(function () {
				var previous_node = control_view.indexOf(control_node) - 1;
				if (previous_node < 0) {
					previous_node = control_view.getCount() - 1;
				}
				control_view.select(previous_node);
			});
		});
		
		dialog.addButton("Next", function() {
			if(is_lower){
				control_node = selected_node_lower;
				control_view = view_lower;
			} else {
				control_node = selected_node;
				control_view = view;
			}
			dialog.hide(function() {
				var next_node = control_view.indexOf(control_node) + 1;
				if (next_node == control_view.getCount()) {
					next_node = 0;
				}
				control_view.select(next_node);
			});
		});
		
		dialog.addButton("Close Window", function() {
			dialog.hide();
		});
		
		dialog.setContentSize(500, 333);
		dialog.center();
		
		//dialog.on("hide", function() {
		//	this.destroy(true);
		//});
	});