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

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

	setupThumb: function(thumb) {
		if (/\.(jpg|png|gif)$/i.match(thumb.up('a').href)) {
			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 close = new Element('div', {'id': 'close-button'}).update('Close X');
		container.appendChild(close);
		container.setStyle({display: 'none'});
		document.body.appendChild(container);

		PhotoBrowser.maximizeImage();

		Event.observe(full_image, 'load', function () {
			if (!PhotoBrowser.throbber)
				return;
			PhotoBrowser.hideThrobber();
			Lightbox.show(container, PhotoBrowser.close, PhotoBrowser.onwindowresize);
			document.body.setStyle({overflow: 'hidden'});

			Event.stopObserving(full_image, 'load', container.on_load);
			Event.observe('close-button', 'click', Lightbox.hide);
		});

		full_image.src = this.up('a').href; //set src after load handler registered

		PhotoBrowser.container = container;
	},

	maximizeImage: function() {
		$('fullsizeimage').setStyle({
			maxWidth: (document.documentElement.clientWidth - 20) + 'px',
			maxHeight: (document.documentElement.clientHeight - 40) + 'px'
		});
	},

	onwindowresize: function() {
		PhotoBrowser.maximizeImage();
		Lightbox._onresize();
	},

	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];
		$('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;
		}
		Lightbox.onwindowresize = Lightbox.defaultonwindowresize;
		document.body.setStyle({overflow: 'visible'});
	}
};

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