$(document).ready(function(){

	$('.flipFlip').bind("click",function(){	
		// $(this) point to the clicked .flipFlip element (caching it in elem for speed):	
		var elem = $(this);
		// data('flipped') is a flag we set when we flip the element:
		if(elem.data('flipped')) {
			// Unsetting the flag:
			elem.data('flipped',false);
			elem.animate({ 
				top: "+=32px",
				left: "+=8px",
				height: "120px",
				width: "164px",
			}, "slow" );
			
			elem.css("z-index", "0");
			// If the element has already been flipped, use the revertFlip method
			// defined by the plug-in to revert to the default state automatically:	
			elem.revertFlip();	
		} else {
			// Using the flip method defined by the plugin:	
			elem.flip({
				direction:'lr',
				speed: 350,
				onBefore: function(){
					// Insert the contents of the .flipData div (hidden from view with display:none)
					// into the clicked .vFlip div before the flipping animation starts:
					elem.html(elem.siblings('.flipData').html());

					$.each($('.flipFlip'), function(k, v) {
						var elem = $(this);
						if(elem.data('flipped')) {
							// Unsetting the flag:
							elem.data('flipped',false);	
							elem.animate({ 
								top: "+=32px",
								left: "+=8px",
								height: "120px",
								width: "164px",
							}, "slow" );
								
							elem.css("z-index", "0");
							// If the element has already been flipped, use the revertFlip method
							// defined by the plug-in to revert to the default state automatically:	
							elem.revertFlip();
						}				
					});					
					
				},
				onEnd:  function(){

				}
			});
			
			elem.animate({ 
				top: "-=32px",
				left: "-=8px",
				height: "174px",
				width: "190px",
			}, "slow" );

			elem.css("z-index", "1000");
			
			// Setting the flag:
			elem.data('flipped',true);
		}
	});
});