// jQuery Document

//This does what I want, but is too limited in scope.
//$(document).ready(function(){
//$("#words").click(function(){
//  $("#sec_words").animate({"top": "150", "left": "50"}, "fast");
//});
//		   });

//This version changes out the galleries, but returns all the galleries to the same "hidden" position.
$(document).ready(function(){
$("#nav a").click(function(){
var mover_ref = $(this).attr("id");	
  $("#sec_" + mover_ref).animate({"top": "150", "left": "50"}, "slow");
  $(".mover").not("#sec_" + mover_ref).animate({"top" : "-1500", "left": "50"}, "slow");
});
		   });

//This version changes out the galleries, but returns all the galleries to the first clicked gallery's original position, not their own.
//$(document).ready(function(){
//$("#nav a").click(function(){
//var mover_ref = $(this).attr("id");	
//var orig_top = $("#sec_" + mover_ref).css("top");
//var orig_left = $("#sec_" + mover_ref).css("left");
//  $("#sec_" + mover_ref).animate({"top": "150", "left": "50"}, "slow");
//  $(".mover").not("#sec_" + mover_ref).animate({"top" : "150", "left": "-5000"}, "slow");
//  $(".mover").not("#sec_" + mover_ref).css({"top" : orig_top, "left" : orig_left});
//});
//		   });


// HOVER FADE FUNCTION
$(function(){
		   $('#nav a').hover(function() {
			$(this).animate({
				opacity: 0.4}, 200);
			 }, function() {
				 $(this).animate({
								 opacity:1}, 200);
			 });
		   });


// ABOUT
$('#contact').click(function(){
var mover_ref = $(this).attr("id");	
  $('#sec_contact').animate({"top": "150", "left": "900"}, "slow");
  $('#sec_contact').animate({"top" : "-1500", "left": "900"}, "slow");
});