document.observe('dom:loaded', function() {	
	var gallery = new Gallery(groups, $('thumbnail-group'), $('main-content'));
	
	$('previous').observe('click', gallery.previous.bindAsEventListener(gallery));
	$('next').observe('click', gallery.next.bindAsEventListener(gallery));
	
	$('gallery-controls').show();
});

var Gallery = Class.create({
	
	selected_group: 0,
	selected_image: 0,
	groups: null,
	image_template: new Template('<img src="#{src}" width="700" height="484" />'),
	thumbnail_template: new Template('<a href="#"><img src="#{src}" /></a>'),
	
	initialize: function(groups, thumbnail_target, image_target){
		this.groups = groups;
		this.thumbnail_container = thumbnail_target;
		this.image_container = image_target;
		
		var query_string = this.get_hash().toQueryParams();
		if(query_string.group) this.selected_group = Number(query_string.group);
		if(query_string.id) this.selected_image = Number(query_string.id);
		this.insert_thumbnail_group();
		this.insert_image();
		this.set_hash();
	},
	
	get_group_path: function(){
		return 'group_'+this.selected_group+'/';
	},
	
	get_image_path: function(){
		return this.groups[this.selected_group][this.selected_image];
	},
	
	insert_image: function(){
		var path = this.get_group_path() + this.get_image_path() + '.jpg';
		this.image_container.update(this.image_template.evaluate({src: path}));
		this.update_location();
	},
	
	get_hash: function(){
		var url_hash = top.location.hash.substring(1);
		if(url_hash && url_hash != ''){
			return url_hash;
		}
		return '';
	},
	
	set_hash: function(){
		var group = (this.selected_group != 0)? this.selected_group:null;
		var id = (this.selected_image != 0)? this.selected_image:null;
		var hash = [];
		if(group) hash.push('group='+group);
		if(id) hash.push('id='+id);
		if(hash.length > 0){
			top.location.hash = '#local?'+hash.join('&');
		}else{
			top.location.hash = '#';
		}
	},
	
	update_location: function(){
		this.set_hash();
	},
	
	insert_thumbnail_group: function(){		
		this.thumbnail_container.update(); // clear current content
		var this_group = this.groups[this.selected_group];
		var self = this;
		this_group.each(function(name, index){
			var path = self.get_group_path() + name;
			self.thumbnail_container.insert(self.create_thumbnail(path));
			var link = self.thumbnail_container.childElements().last();
			link.index = index;
			link.observe('click', self.thumbnail_selected.bindAsEventListener(self));
		});		
	},
	
	create_thumbnail: function(path){
		var options = {src: path+'_thumb.jpg'};
		return this.thumbnail_template.evaluate(options);
	},
	
	thumbnail_selected: function(event){
		var link = Event.findElement(event, 'a');
		this.selected_image = link.index;
		this.insert_image();
		event.stop();
	},
	
	next: function(event){
		var	last_item = this.groups.length-1;
		if(++this.selected_group > last_item){
			this.selected_group = last_item;
		}else{
			this.insert_thumbnail_group();
		}
		event.stop();
	},
	
	previous: function(event){
		if(--this.selected_group < 0){
			this.selected_group = 0;
		}else{
			this.insert_thumbnail_group();
		}
		event.stop();
	}
	
});