$(document).ready(function() {



	    $('.tl').delay(150).fadeIn(800).animate({
		    top: '14', 
		    left: '12'
	      });
	      
	    $('.tr').delay(600).fadeIn(800).animate({
		    top: '4', 
		    left: '156'
	      });

	    $('.bl').delay(300).fadeIn(800).animate({
		    top: '153', 
		    left: '10'
	      });
	      
	    $('.br').delay(450).fadeIn(800).animate({
		    top: '153', 
		    left: '156'
	      });

	    $('.base').delay(1200).fadeIn(1000, function() {
		    $('#imageMap').addClass('hoverNow');
	    });
	    
	    $('.click').delay(1400).fadeIn(500, function() {
	          bindImages();
	    });
	    


      
      function bindImages(){
 
		 	$(".tl").hover(
			  function () {
			    $(this).stop().animate({
				    top: '4',
				    left: '2'	
			    });
			  }, 
			  function () {
			    $(this).stop().animate({
				    top: '14', 
				    left: '12'
			    });
			  }
			);
		
			$(".tr").hover(
			  function () {
			    $(this).stop().animate({
					top: '-6',
					left: '166'
			    });
			  }, 
			  function () {
			    $(this).stop().animate({
				    top: '4', 
				    left: '156'
			    });
			  }
			);
		
		
			$(".bl").hover(
			  function () {
			    $(this).stop().animate({
					top: '163',
					left: '0'		
			    });
			  }, 
			  function () {
			    $(this).stop().animate({
					top: '153',
					left: '10'	
			    });
			  }
			);
		
		
			$(".br").hover(
			  function () {
			    $(this).stop().animate({
					top: '163',
					left: '166'	
			    });
			  }, 
			  function () {
			    $(this).stop().animate({
					top: '153',
					left: '156'
			    });
			  }
			);
      
      };
      
      
      
 

});