$(function(){
	$('body').removeClass('js-disabled').addClass('js-enabled');
	
	$('.gallery').gallery();
	
});

$.fn.gallery = function() {
	return this.each(function() {
		
		var images = $('li',this);
		if (images.length > 1) {  // we don't need skip functionality if there's only one photo
		
			// set up initial state
			images.eq('0').addClass('current');

			// make the controls
			var controls = $('<div class="controls"><ul></ul><div class="indicator"></div></div>');
			for (i=0;i<images.length;i++) {
				$('<li title="Image '+(i/1+1)+'">Image '+(i/1+1)+'</li>').bind('mousedown',{i:i},showImage).appendTo($('ul',controls));
			}
			$(this).append(controls);
		}
		
		function showImage(event) {
			if (images.eq(event.data.i).is('.current')) return false;
		
			// change the image
			images.eq(event.data.i).show().addClass('next').parent().children('.current').fadeOut('fast',function(){
				$(this).removeClass('current');
				images.eq(event.data.i).removeClass('next').addClass('current');
			});
		
			// move the indicator
			$('>div',controls).animate({
				left: 74 + (29*event.data.i) + 'px'
			}, 200)
		}
		
	});
}