google.load("jquery", "1.3.1");
google.setOnLoadCallback(function() {
  $('#nav a').hover(function(){
  $(this).stop().animate({ "opacity" : 0.4 }, 200);
  },function(){ 
	  $(this).stop().animate({ "opacity" : 1 });
  });
  $('#thumbs img').hover(function(){
	$(this).css('cursor','pointer');
	$(this).stop().animate({ "opacity" : 1 }, 100);
  },function(){ 
	  $(this).stop().animate({ "opacity" : 1 }, 200);
  });
/* determine: is this panel currently selected? if not, enact hover animation + link cursor */
$('ul#panels img').hover(
function() { if (!$(this).hasClass('selected')) { $(this).stop(); $(this).css('cursor','pointer'); $(this).animate( { opacity : 1 },200); } else { $(this).css('cursor','default'); }},
function() { if (!$(this).hasClass('selected')) { $(this).stop(); $(this).animate( { opacity : .6 },200); }}
);
/* if an img doesn't have the 'selected' class and is clicked: clear the class from all images, then add it to the current one and adjust css opacity attributes accordingly (just flipping the class doesn't seem to refresh img attributes). */
$('ul#panels img').click(
function() { if (!$(this).hasClass('selected')) {
	var current = $(this).closest('li').attr('id');
	$('ul#panels img').removeClass('selected');
	$('ul#panels img').css('opacity','.35');
	$('ul#panels img').css('filter','alpha(opacity = 35)');
	$(this).css('opacity','1');
	$(this).css('filter','alpha(opacity = 100)');
	$(this).addClass('selected');
	$('#holder .' + current).css( {'margin-top':'335px','z-index':'2'} ).animate( { marginTop : 0 }, 200, function() {
	  $('#holder > *').not('#holder .' + current).css('z-index','0');
	$('#holder .' + current).css('z-index','1');																											   
	} );
	};
});
});