$(function() { // on DOM ready

$('.livewhale_gallery_mini,.lw_gallery_mini').each(function() {
	livewhale.is_gallery_inline = false;
	var gallery = $(this),
		image = gallery.find('.livewhale_gallery_image,.lw_gallery_image'),
		thumbs = gallery.find('.livewhale_gallery_thumbnails li,.lw_gallery_thumbnails li'),
		caption = gallery.find('.livewhale_gallery_caption,.lw_gallery_caption'),
		captionTimer,
		captionText;
	if(!caption.find('p').length) caption.wrapInner('<p/>');
 	captionText = $.trim(caption.find('p').html());
	$('<img/>').load(function() { // after the initial image has loaded
		image.height(image.height()) // fix the image area height
			.hover( // attach a hover event
				function() { // onmouseover
					caption.stop().fadeTo(500,0.8); // fade in the caption
					clearTimeout(captionTimer); // and cancel the caption autohide
				},
				function() { caption.stop().fadeTo(750,0); } // and onmouseout, fade it out again
			)
			.children().eq(0) // select the <img> itself
				.css('position','absolute'); // and position it absolutely
	}).attr('src',image.find('img').attr('src'));
	thumbs.width((100/thumbs.length)+'%') // set thumb width to 1/count of the whole
		.eq(0) // select the first thumb
			.addClass('livewhale_gallery_selected'); // and select it
	caption.fadeTo(1,0,function() { $(this).show(); }); // set caption opacity to 0 then display:block
	if(!captionText) caption.css('visibility','hidden'); // but if there is no caption text, we hide it with visibility:hidden
	$('.livewhale_gallery_thumbnails li>a,.lw_gallery_thumbnails li>a') // then select the image links
		.hover( // and attach their hover event
			function() {
				$(this).animate({top:'-10px'},100,'easeOutSine');
			}, // onmouseover, slide the thumbnail up
			function() {
				$(this).animate({top:0},100,'easeOutSine'); // onmouseout, slide it back down
				captionTimer = setTimeout(function() { caption.stop().fadeTo(750,0); },500); // and set the caption to hide automatically
			}
		).click(function() { // and attach its click event
			$(this).find('img').animate({top:'+=2px',opacity:0.6},80,function() { // depress the button (darken it, move it down)
				$(this).animate({top:'-=2px',opacity:1},40) // then return it to its original location
					.parent().parent() // grab the parent li
						.addClass('livewhale_gallery_selected') // and select it
						.siblings() // grab its siblings
							.removeClass('livewhale_gallery_selected'); // and deselect them
			});
			var spinner = $('<div class="lw_gallery_spinner"/>').appendTo(image); // add the loading animation to the div
			captionText = $.trim($(this).parent().find('.livewhale_gallery_thumbcaption,.lw_gallery_thumbcaption').val());
			$('<img alt="Gallery Image" style="position:absolute;"/>').load(function() { // create the new image and attach an onload
				var newImage = $(this),
					height = newImage.prependTo(image) // prepend it to the image div
						.height(); // and store its height
				spinner.remove(); // since the image has now loaded, remove the spinner
				if(height<newImage.next().height()) { // if the height of the new image is less than the height of the old image
					image.stop().animate({height:height+'px'},300,'easeInOutSine',function() { // animate the image div height to the target height
						newImage.next().fadeOut(300,function() { // then fade out the old image
							$(this).remove(); // and remove it
						});
					});
				} else { // otherwise, if the new image is taller
					newImage.next().fadeOut(300,function() { // first, fade out the old image
							$(this).remove(); // and remove it
							image.stop().animate({height:height+'px'},300,'easeInOutSine'); // then animate the image div to the target height
						});
				}
				clearTimeout(captionTimer); // cancel any existing caption autohide
				caption.html('<p>'+captionText+'</p>').css('visibility','hidden'); // update its text
				if(captionText) caption.css('visibility','visible'); // if there is text, make sure it's visible
				caption.stop().show().fadeTo(750,0.8); // and fade it in (if needed)
			}).attr('src',$(this).attr('href'));
			return false; // cancel the original click
		});
	});
	
/*	if(!$('.lw_gallery_previous').length) $('.lw_gallery_nav').prepend('<a class="lw_gallery_previous" href="#" style="display:none;">« Previous</a>');
	if(!$('.lw_gallery_next').length) $('.lw_gallery_nav').prepend('<a class="lw_gallery_next" href="#" style="display:none;">Next »</a>');
	$('.lw_gallery_nav a').attr('href','#');
	$('body.gallery_detail #lw_gallery_thumbnails a').click(function() {
		var href = $(this).parent().find('.lw_gallery_full').val(),
			caption = $(this).parent().find('.lw_gallery_caption').val(),
			image = $('#lw_gallery_image'),
			prev = $(this).parent().prev(),
			next = $(this).parent().next();
		if(image.find('.lw_next_image').length) return false; 
		$(this).addClass('selected').parent().siblings().find('a').removeClass('selected');
		var next_image = image.clone().removeAttr('id').height('auto').addClass('lw_next_image').hide().appendTo(image);
		var spinner = $('<div class="spinner"/>').appendTo(image);
		if(next.length) next_image.find('.lw_gallery_next').show();
		else next_image.find('.lw_gallery_next').hide();
		if(prev.length) next_image.find('.lw_gallery_previous').show();
		else next_image.find('.lw_gallery_previous').hide();
		next_image.find('.lw_gallery_caption').html(caption);
		$('<img src="'+href+'" alt="Gallery image"/>').load(function() {
			next_image.find('img').replaceWith(this);
			image.animate({height:next_image.height()},750,function() {
				spinner.remove();
				next_image.find('a').click(function() { return false; });
				next_image.fadeIn(750,function() {
					image.html(next_image.html());
					image.find('.lw_gallery_next').click(function() {
						$('#lw_gallery_thumbnails').find('.selected').parent().next().children().eq(0).click();
						return false;
					});
					image.find('.lw_gallery_previous').click(function() {
						$('#lw_gallery_thumbnails').find('.selected').parent().prev().children().eq(0).click();
						return false;
					});
				});
			});
		});
		return false;
	});
	$('body.gallery_detail #lw_gallery_image .lw_gallery_next').click(function() {
		$('#lw_gallery_thumbnails').find('.selected').parent().next().children().eq(0).click();
		return false;
	});
	$('body.gallery_detail #lw_gallery_image .lw_gallery_previous').click(function() {
		$('#lw_gallery_thumbnails').find('.selected').parent().prev().children().eq(0).click();
		return false;
	});*/
});

$.fn.extend({
	whenloaded:function(callback) { // when all images have loaded
		var loadable = 'img,object,audio,video,iframe', // selector for elements with the load event
			elements = this.find(loadable), // get the list of loadable elements
			loaded = 0; // and the number that have loaded so far
		if(this.is(loadable)) elements.add(this); // add the current element if its loadable
		elements.each(function() { // get each element
			if(this.complete) loaded++; // if it's already loaded, increment the counter
			else {
				$(this).load(function() { // otherwise, attach a load event
					if(++loaded==elements.length) callback.apply(this); // that increments the counter and checks if its time to run the callback
				});
			}
		});
		if(elements.length==loaded) callback.apply(this); // if the elements are all loaded, apply the callback immediately	
		return this; // return the original element for chaining
	}
});