$(document).ready(function(){

	/* ---- thumbs preview ---- */
	var preview = $('ul.preview');
	preview.before('<div class="viewing"></div>\n\t\t\t\t\t');
	preview.children().append('<a class="toggle" href="#toggle"></a>');

	var viewing = $('.viewing');
	var startHeight = preview.height();
	var clicked;

	function previewToggle() {
		if (preview.hasClass('.hidden')) {
			// preview out
			viewing.fadeTo(400, 0, function(){
				viewing.animate({height: startHeight}, 400, function(){
					viewing.removeClass('loaded').hide().children().remove();
					preview.removeClass('hidden').fadeIn(400, function(){
						viewing.removeAttr('style');
					});
				});
			});
		} else {
			// preview in
			preview.addClass('hidden').fadeOut(200, function(){
				var fullImage = clicked.attr('href');
				clicked.clone(true).appendTo(viewing);
				viewing.height(startHeight).find('img').attr('src',fullImage).hide();
				clicked.next('a.toggle').clone(true).addClass('expanded').appendTo(viewing).hide();

				viewing.animate({opacity: 1}, 100, function(){
					var newHeight = viewing.find('img').height();
					viewing.animate({height: ( newHeight + 35 )}, 400, function(){
						viewing.children().fadeIn(400).children().fadeIn(400);
					});
				});
			});
		}
	}

	$('ul.preview li a:first-child').click(function(){
		clicked = $(this);
		previewToggle();
		return false;
	});

	$('a.toggle').click(function(){
		clicked = $(this).prev();
		previewToggle();
		if ( $(this).hasClass('expanded') ) { $(this).remove(); }
		return false;
	});

});