/*!
 * jQuery Photo Swap
 * http://bnj.com/
 *
 * Copyright (c) 2009 Stephen Kozik
 *
 * Date: 2009-12-06
 * Revision: 1
 */

$(document).ready(function(){
			 $("#timeline").mouseenter(function(){
     			 $("#d1")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d1 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d2")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d2 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d3")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d3 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d4")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d4 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d5")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d5 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d6")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d6 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d7")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d7 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d8")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d8 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d9")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d9 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d10")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d10 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d11")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d11 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d12")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d12 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d13")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d13 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d14")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d14 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d15")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d15 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d16")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d16 p")
				 .animate( { opacity: 1 }, 300 );
     			 $("#d17")
				 .animate( { height: '185px', marginTop: '0px', width: '220px' }, 300 );
     			 $("#d17 p")
				 .animate( { opacity: 1 }, 300 );
   			 });
			 $("#timeline").mouseleave(function(){
     			 $("#d1")
				 .animate( { height: '185px', marginTop: '0px', width: '26px' }, 300 );
     			 $("#d1 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d2")
				 .animate( { height: '165px', marginTop: '20px', width: '26px' }, 300 );
     			 $("#d2 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d3")
				 .animate( { height: '145px', marginTop: '40px', width: '26px' }, 300 );
     			 $("#d3 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d4")
				 .animate( { height: '125px', marginTop: '60px', width: '26px' }, 300 );
     			 $("#d4 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d5")
				 .animate( { height: '105px', marginTop: '80px', width: '26px' }, 300 );
     			 $("#d5 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d6")
				 .animate( { height: '85px', marginTop: '100px', width: '26px' }, 300 );
     			 $("#d6 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d7")
				 .animate( { height: '65px', marginTop: '120px', width: '26px' }, 300 );
     			 $("#d7 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d8")
				 .animate( { height: '185px', marginTop: '0px', width: '26px' }, 300 );
     			 $("#d8 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d9")
				 .animate( { height: '165px', marginTop: '20px', width: '26px' }, 300 );
     			 $("#d9 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d10")
				 .animate( { height: '145px', marginTop: '40px', width: '26px' }, 300 );
     			 $("#d10 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d11")
				 .animate( { height: '125px', marginTop: '60px', width: '26px' }, 300 );
     			 $("#d11 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d12")
				 .animate( { height: '105px', marginTop: '80px', width: '26px' }, 300 );
     			 $("#d12 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d13")
				 .animate( { height: '85px', marginTop: '100px', width: '26px' }, 300 );
     			 $("#d13 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d14")
				 .animate( { height: '65px', marginTop: '120px', width: '26px' }, 300 );
     			 $("#d14 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d15")
				 .animate( { height: '185px', marginTop: '0px', width: '26px' }, 300 );
     			 $("#d15 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d16")
				 .animate( { height: '165px', marginTop: '20px', width: '26px' }, 300 );
     			 $("#d16 p")
				 .animate( { opacity: 0 }, 300 );
     			 $("#d17")
				 .animate( { height: '145px', marginTop: '40px', width: '26px' }, 300 );
     			 $("#d17 p")
				 .animate( { opacity: 0 }, 300 );
   			  		$("#markers")
				 	.animate( { marginLeft: '5'}, 0 );
   			 });
   			  $("#timeline").mousemove(function(e){
   			  		$("#markers")
				 	.animate( { marginLeft: (((e.pageX-140)*-4.7)+45)}, 0 );
   			  }); 
});