var PhotoBrowser = {
	images: [],
	throbber: null,

	init: function() {
		$$('img.thumb').each(PhotoBrowser.setupThumb);
	},

	setupThumb: function(thumb) {
		PhotoBrowser.images.push(thumb);
		Event.observe(thumb, 'click', PhotoBrowser.showLightbox.bindAsEventListener(thumb));
	},

	showThrobber: function (img) {
		img.up('a').blur();
		PhotoBrowser.hideThrobber();
		var throbber = new Element('img', {'src': '/assets/images/throbber.gif', 'id': 'throbber'});
		throbber.setStyle({
			left: (img.offsetLeft + img.offsetWidth/2 - 8) + 'px',
			top: (img.offsetTop + img.offsetHeight/2 - 8) + 'px'
		});
		img.insert({after: throbber});
		PhotoBrowser.throbber = throbber;
		return throbber;
	},

	hideThrobber: function () {
		if (PhotoBrowser.throbber) {
			PhotoBrowser.throbber.remove();
			PhotoBrowser.throbber = null;
		}
	},

	showLightbox: function(ev) {
		Event.stop(ev);
		PhotoBrowser.close();
		PhotoBrowser.showThrobber(this);

		var container = new Element('div', {id: 'lightboximage'});
		var full_image = new Element('img', {'id': 'fullsizeimage'});
		container.appendChild(full_image);

		var topbar = new Element('div', {'id': 'photo_topbar'});
		container.appendChild(new Element('p', {'class': 'caption', 'id': 'fullsizeimagecaption'}).update(this.title));
		container.appendChild(topbar);
		container.appendChild(new Element('img', {'src': '/assets/images/right_button.png', 'id': 'right_button'}));
		container.appendChild(new Element('img', {'src': '/assets/images/left_button.png', 'id': 'left_button'}));
		topbar.appendChild(new Element('img', {'src': '/assets/images/close_button.png', 'id': 'close_button'}));

		container.setStyle({display: 'none'});
		document.body.appendChild(container);

		if (PhotoBrowser.images.length < 2) {
			$('left_button').hide();
			$('right_button').hide();
		}		 

		Event.observe(full_image, 'load', function () {
			if (!PhotoBrowser.throbber)
				return;
			PhotoBrowser.hideThrobber();
			Lightbox.show(container, PhotoBrowser.close);

			Event.observe('close_button', 'click', Lightbox.hide);
			Event.observe('left_button', 'click', PhotoBrowser.prev);
			Event.observe('right_button', 'click', PhotoBrowser.next);
			Event.stopObserving(full_image, 'load', container.on_load);
		});
		full_image.src = this.up('a').href; //set src after load handler is registered to commence loading
		PhotoBrowser.container = container;
	},

	current_index: function () {
		var im = $('fullsizeimage');
		for (var i = 0; i < PhotoBrowser.images.length; i++)
			if (PhotoBrowser.images[i].up('a').href == im.src)
				return i;
		return 0;
	},

	changePhoto: function(new_index) {
		var im = PhotoBrowser.images[new_index];
		var full = $('fullsizeimage');
		full.recenter_handler = function () {
			Lightbox.recenter($('lightboximage'));
			Event.stopObserving(full, 'load', full.recenter_handler);
			delete full.recenter_handler;
		}
		Event.observe(full, 'load', full.recenter_handler);
		$('fullsizeimage').src = im.up('a').href;
		$('fullsizeimagecaption').update(im.title);
	},

	prev: function () {
		var next = (PhotoBrowser.current_index() + PhotoBrowser.images.length - 1) % PhotoBrowser.images.length;
		PhotoBrowser.changePhoto(next);
	},

	next: function () {
		var next = (PhotoBrowser.current_index() + 1) % PhotoBrowser.images.length;
		PhotoBrowser.changePhoto(next);
	},

	close: function() {
		if (PhotoBrowser.container) {
			PhotoBrowser.container.remove();
			PhotoBrowser.container = null;
		}
	}
};

Event.observe(document, 'dom:loaded', PhotoBrowser.init);