$(function() {

// Attach galleria plugin
$('#thumbs').galleria({
	history   : false,
	clickNext : false,
	insert    : '#photo', // The containing selector for our main image
	onImage   : function(image, caption, thumb) { // Let's add some image effects for demonstration purposes
		// Fade in the image & caption
		image.css('display', 'none').fadeIn(1000);
		
		// Fetch the thumbnail container
		var _li = thumb.parents('li');
		
		// Fade out inactive thumbnail
		_li.siblings().children('img.selected').fadeTo(750, 0.2);
		
		// Fade in active thumbnail
		thumb.fadeTo('fast', 1).addClass('selected');
	},
	onThumb : function(thumb) { // thumbnail effects goes here		
		// Fetch the thumbnail container
		var _li = thumb.parents('li');
		
		// If thumbnail is active, fade all the way.
		var _fadeTo = _li.is('.active') ? '1' : '0.2';
		
		// Fade in the thumbnail when finnished loading
		thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
		
		// Hover effects
		thumb.hover(
				function() {thumb.fadeTo('fast', 1);},
				function() {_li.not('.active').children('img').fadeTo('fast', 0.2);} // Don't fade out if the parent is active
		)
	}
});
/*
// Load the first image
$.galleria.activate($('#thumbs li:first-child a').attr('href'));

// Get our elements for faster access and set overlay width
var div = $('.thumbs_wrapper');
var ul = $('#thumbs');

// Get menu width
var divWidth = div.width();

// Remove scrollbars
div.css({overflow: 'hidden'});

// Find last image container
var lastLi = ul.find('li:last-child');

// When user move mouse over menu
div.mousemove(function(e) {
	// As images are loaded ul width increases,
	// so we recalculate it each time
	var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth();
	
	var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
	
	div.scrollLeft(left);
});
*/
});