// our loading events
Event.observe(window, 'load', function() {
	setup_lightbox()
})
 
var setup_lightbox = function() {
	// create our lightbox background container
	var lightbox = document.createElement('div')
	lightbox.setAttribute('id', 'lightbox')
	// hide it away - don't use CSS otherwise prototype can't override
	lightbox.style.display = 'none'
	// when people click it, it disappears
	Event.observe(lightbox, 'click', hide_lightbox)
	// create our lightbox image
	var lightbox_img = document.createElement('img')
	// whenever a new image is loaded - show the lightbox
	Event.observe(lightbox_img, 'load', function() { Effect.Appear('lightbox', { duration: 0.5 }) })
	// put the image within our lightbox
	lightbox.insert({ bottom: lightbox_img })
	// insert the lightbox into the body
	document.body.insert({ bottom: lightbox })
}
 
var show_lightbox = function(image_src) {
	$('lightbox').down('img').src = image_src
}
 
var hide_lightbox = function() { $('lightbox').down('img').src = null; Effect.Fade('lightbox', { duration: 0.25 }) }