// When the document loads do everything inside here ...
	  $(document).ready(function(){
		
		
		$("#panel1 a.right").click(function () {
			
			
			$('#panel1').animate({
    			left: '-980'
  				}, 500, function() {
    				
  			});
			$('#panel2').animate({
    			left: '0'
  				}, 500, function() {
    				
  			});			
		  
		});
		
		
		$("#panel2 a.left").click(function () {
			
			
			$('#panel1').animate({
    			left: '0'
  				}, 500, function() {
    				
  			});
			$('#panel2').animate({
    			left: '980'
  				}, 500, function() {
    				
  			});			
		  
		});
		
		$("#panel2 a.right").click(function () {
						
			$('#panel2').animate({
    			top: '-400'
  				}, 500, function() {
    				
  			});		
			$('#panel3').animate({
    			top: '0'
  				}, 500, function() {
    				
  			});		
		  
		});
		
		$("#panel3 a.left").click(function () {
						
			$('#panel2').animate({
    			top: '0'
  				}, 500, function() {
    				
  			});		
			$('#panel3').animate({
    			top: '400'
  				}, 500, function() {
    				
  			});		
		  
		});
		
		$("#panel3 a.right").click(function () {
						
			$('#panel3').animate({
    			left: '980'
  				}, 500, function() {
    				
  			});	
			
			$('#panel4').animate({
    			left: '0'
  				}, 500, function() {
    				
  			});			
		  
		});
		
		$("#panel4 a.right").click(function () {
						
			$('#panel4').animate({
    			left: '0',
				top: '400'
  				}, 500, function() {
    				
  			});	
			
			$('#panel1').animate({
    			left: '0',
				top: '0'
  				}, 500, function() {
    				
  			});		
			
			
			// we reset panels 2/3/4 back to original positions
			// when panel4 a.right is clicked
			$('#panel2').animate({
    			left: '980',
				top: '0'
  				}, 0, function() {
    				
  			});
			$('#panel3').animate({
    			left: '0',
				top: '400'
  				}, 0, function() {
    				
  			});			
			$('#panel4').animate({
    			left: '-980',
				top: '0'
  				}, 0, function() {
    				
  			});
				
		  
		});
		
		$("#panel4 a.left").click(function () {
						
			$('#panel4').animate({
    			left: '-980',
				top: '0'
  				}, 500, function() {
    				
  			});	
			
			$('#panel3').animate({
    			left: '0',
				top: '0'
  				}, 500, function() {
    				
  			});		
		  
		});
	
	  });