/* ---------------------------------------
	copyright Colin Rotherham 2008
--------------------------------------- */
	
	function fixPNG(){$$('img, div, a, h1, h2').each(function(node)
	{
		// process it using 'behavior', applies to IE only
		document.styleSheets[0].addRule(node.tagName, 'behavior: url(/includes/javascript/png.htc)');

	});}
	
	var lightbox = 
	{
		first : true,
	
		init: function()
		{
			// preload the loading image
			lightbox.animation = new Element('img', { id: 'loading', src: '/media/images/loading.gif' });
		
			// assign objects
			lightbox.container = new Element('div', { id: 'lightbox', 'opacity': 0 });
			lightbox.overlay = new Element('div', { id: 'overlay', 'opacity': 0});
			lightbox.controls = new Element('p', { html : '<span></span> <a></a>', 'opacity': 0 });
			
			// set up the close button
			lightbox.controls.getElement('a').set({ html : 'Close', href : '#', events : { 'click' : lightbox.finish } });
			
			// add them to the page
			$$('body')[0].appendChild(lightbox.overlay);
			$$('body')[0].appendChild(lightbox.container);
			lightbox.container.appendChild(lightbox.controls);
			
			// add event listeners
			window.addEvent ('resize', lightbox.position);
			window.addEvent ('scroll', lightbox.position);
		},
		
		grab : function(event)
		{
			// workaround for IE events
			event = event || window.event;
			lightbox.target = (event.target || event.srcElement);
			
			// workaround for IE click target
			if (lightbox.target.tagName == 'IMG') lightbox.target = lightbox.target.parentNode;

			// dull the image, add loading animation
			lightbox.target.getElement('img').setStyle('opacity', 0.1);
			lightbox.target.parentNode.appendChild(lightbox.animation);

			// update the description
			lightbox.controls.getElement('span').set('html', lightbox.target.title);

			// set the new image
			lightbox.image = new Element('img', { 'opacity': 0, 'title': lightbox.target.title});

			// when the preload image has loaded
			lightbox.image.onload = lightbox.start;
			
			// start the preloading
			lightbox.image.src = lightbox.target.href;
			return false;
		},
		
		start : function()
		{
			lightbox.dimensions = [lightbox.image.width, lightbox.image.height + 15];
		
			// remove the loading animation
			lightbox.target.parentNode.removeChild(lightbox.animation);
		
			// define effect configuration
			lightbox.overlay.set ('morph', {duration: 400, transition: 'expo:out'});
			lightbox.container.set ('morph', {duration: 500, transition: 'quint:in'});

			// expand upwards on first run
			if (lightbox.first == true) lightbox.container.setStyle('margin-top', lightbox.dimensions[1] / 4);

			// the fade in
			lightbox.overlay.morph ({ 'opacity': [0, 0.8], 'background-color' : ['#B9FF00', '#000']});
			lightbox.container.morph ({ 'opacity': [0, 1], 'width' : lightbox.dimensions[0], 'height' : lightbox.dimensions[1] + 15, 'margin-top' : 0, 'margin-left' : - (lightbox.dimensions[0] / 2) });
			
			setTimeout(function()
			{
				// add the image
				lightbox.container.insertBefore(lightbox.image, lightbox.controls);
				lightbox.overlay.onclick = lightbox.finish;
				
				// fade in the image
				lightbox.image.tween('opacity', 1);
				lightbox.controls.set('opacity', 1);

			}, 600);
		},
		
		finish : function()
		{
			// define effect configuration
			lightbox.overlay.set ('morph', {duration: 600, transition: 'linear'});
			lightbox.container.set ('morph', {duration: 200, transition: 'expo:in'});
		
			// the fade out, restore clicked image
			lightbox.overlay.morph ({ 'opacity': 0 });
			lightbox.container.morph ({ 'opacity': 0 });
			lightbox.controls.set('opacity', 0);
			lightbox.target.getElement('img').set('opacity', 1);
			
			// reset variables
			lightbox.image.dispose();
			lightbox.overlay.onclick = null;
			lightbox.first = false;
			
			return false;
		},
		
		position : function()
		{
			lightbox.overlay.setStyles
			({
				'width' : Window.getWidth() + Window.getScrollLeft() + 'px',
				'height' : Window.getHeight() + Window.getScrollTop() + 'px'
			});
		}
	}
	
	var gallery =
	{
		active : 0,
		links : [],
		ready : false,
		target : '.gallery',

		init : function()
		{
			// grab the address bar hash
			var override = window.location.hash.substring(1, window.location.hash.length);
			var total = $$(gallery.target + ' img').length;
		
			// return if less than 2 images
			if (total < 1) return;
			
			// override default image
			if (override <= total && override > 0) gallery.active = override -1;
		
			// create the controls holder
			gallery.controls = document.createElement('p');
			gallery.controls.innerHTML = 'Please Select ';

			// update the gallery
			gallery.update();

			// add it to the document
			if (total > 1) $$(gallery.target)[0].appendChild(gallery.controls);
			gallery.ready = true;
		},
		
		update : function()
		{
			// loop through all images
			$$(gallery.target + ' img').each(function(node, counter)
			{
				// if the controls haven't been populated yet
				if (gallery.ready == false)
				{
					// bind onclick event to the image
					if (node.id != 'loading') node.parentNode.onclick = lightbox.grab;
				
					// configure each click link
					gallery.links[counter] = document.createElement('a');
					gallery.links[counter].href = '#' + (counter + 1);
					gallery.links[counter].innerHTML = counter + 1;
				
					// bind onclick events to the links
					gallery.links[counter].onclick = function()
					{
						gallery.active = counter;
						gallery.update();
						
						// update the location bar
						window.location.hash = this.getAttribute('href');
						return false;
					};

					// insert the link
					gallery.controls.appendChild(gallery.links[counter]);			
				}

				// disable all but the active image container
				node.parentNode.style.display = (counter != gallery.active)? 'none' : '';

				// highlight the active link
				gallery.links[counter].className = (counter != gallery.active)? '' : 'active';
			});
		}
	}
	
	window.addEvent('domready', function()
	{
		// check for support then fix PNGs (IE only)
		if (document.all && document.styleSheets && document.styleSheets[0] && document.styleSheets[0].addRule) fixPNG();
		
		// kick off the lightbox
		lightbox.init();
		
		// kick off the gallery
		gallery.init();
	});