﻿
	var pg = []; // Will contain the gallery data
	var mp_thumb_opacity = 0.5; // The starting opacity of an "inactive" thumb
	var autoscroll = 0; // The timer id for autoscrolling the thumbnails
	var autoscroll_interval = 5; // The number of seconds before the next pic is shown
	
	$(function(){
	
		// If we have a <div class="metadata_photogallery">, apply the necessary transformations	
		if ($('.metadata_photogallery').length) {
						
			// Iterate through the li elements of the gallery
			$('.metadata_photogallery').find('li').each(function(){
				// Populate the pg array with the data
				pg.push({
					"title" : $(this).children('h1').text(),
					"descr" : $(this).children('p').text(),
					"image" : $(this).children('img').attr('src')			
				});
			});
			$('.metadata_photogallery').hide();
			
			// Create the main image and link
			$('<a href="'+pg[0].image+'" rel="lightbox" title="'+pg[0].title+'"><img src="'+pg[0].image+'&w=800&h=600" border="0" /></a>')
			.appendTo('div.mp_image');
			
			// Create the thumbnail gallery ONLY if we have more than 1 image
			if (pg.length > 1) {
			
				// For each element on the pg array, create a thumb
				$(pg).each(function(i){
					// A thumb is a link with a nested img
					$('<a href="#"><img src="'+pg[i].image+'&w=92&h=69" border="0"></a>')
					.css("opacity",mp_thumb_opacity)
					.appendTo('div.mp_thumbnails_scroller')
					.click(function(){
						// On click, substitute the main gallery image
						if (!$(this).hasClass("mp_selected")) {
							show_image(i);
						}
						return false;
					})
					.hover(
						function() { 
							// On mouseover, fade in to 100% opacity
							$(this).fadeTo("fast",1); 
						},
						function() { 
							// On mouse out, fade out ONLY if we're not over
							// the currently showing image
							if (!$(this).hasClass("mp_selected")) {
								$(this).fadeTo("fast",mp_thumb_opacity); 
							}
						}
					)	
					
				});
				
				// Set the first thumbnail as selected
				$('div.mp_thumbnails_scroller a').eq(0).css('opacity',1).addClass("mp_selected");
				
				// Set the autoscroll timer
				autoscroll = setInterval(show_next_image,(autoscroll_interval * 1000));
						
			} else {
			
				// Hide the thumbnail canvas
				$('div.mp_thumbnails').css('display','none');
				// Set the height of the whole gallery (mp_canvas) to the height
				// of the main image
				$('div.mp_canvas').css('height',$('div.mp_image').height() + 'px');
			
			}
			
			// Set the opacity of the mp_descr div
			$('div.mp_descr').css('opacity',0.7);		
			
			// Show the first image			
			show_image(0);
						
		}
				
	});
	
	function show_image(i) {
	
		// Hide the current descr
		$('div.mp_descr').animate({marginTop:225},"fast");
	
		// Fade out currently selected thumb
		var temp = $('div.mp_thumbnails_scroller a');
		temp.each(function(){
			if ($(this).hasClass("mp_selected")) {
				$(this).fadeTo("fast",mp_thumb_opacity);
				$(this).removeClass("mp_selected");
			}
		});
		// Set the current thumb as selected so it does not
		// fade out on mouse leave and fade it in
		$(temp[i]).fadeTo('fast',1).addClass('mp_selected');
		
		// Change the main image
		$('div.mp_image a')
		.attr('href',pg[i].image+'&w=800&h=600')
		.children('img')
		.fadeTo("fast",0,function(){
			$(this).attr('src',pg[i].image+'&w=300&h=225').css('width','auto').fadeTo("fast",1)
		});
		
		// Update the mp_descr (only if we have either a title, a descr or both)
		if (pg[i].title || pg[i].descr) {
			$('div.mp_descr h1').text(pg[i].title);
			$('div.mp_descr p').text(pg[i].descr);
			var h = 225 - $('div.mp_descr').height() - 12;
			//$('div.mp_descr').css('margin-top',(h+'px'));
			$('div.mp_descr').animate({marginTop:h},"fast");
		}
	
	}
	
	function show_next_image() {
	
		// TODO: Sloppy code, optimise to avoid triple selectors
		if ($('.mp_thumbnails_scroller a.mp_selected').next().length) {
			$('.mp_thumbnails_scroller a.mp_selected').next().trigger('click');
		} else {
			$('.mp_thumbnails_scroller a').eq(0).trigger('click');
		}
		
	}