<link rel="stylesheet" type="text/css" href="/css/flip.css"/>  
  <script src="/js/jquery-ui-1.7.2.custom.min.js"></script>  
  <script src="/js/jquery.flip.min.js"></script>  
  <script type="text/javascript">  
  $(function(){  
   
  $("#flipPad a:not(.revert)").bind("click",function(){  
  var $this = $(this);  
  $("#flipbox").flip({  
  direction: $this.attr("rel"),  
  color: $this.attr("rev"),  
  content: $this.attr("title"),//(new Date()).getTime(),  
  onBefore: function(){$(".revert").show()}  
  })  
  return false;  
  });  
   
  $(".revert").bind("click",function(){  
  $("#flipbox").revertFlip();  
  return false;  
  });  
   
  var changeMailTo = function(){  
  var mArr = ["@","smashup","luca",".it"];  
  $("#email").attr("href","mailto:"+mArr[2]+mArr[0]+mArr[1]+mArr[3]);  
  }  
   
  $(".downloadBtn").click(function(){  
  pageTracker._trackPageview('download_flip');  
  });  
   
  setTimeout(changeMailTo,500);  
   
  });  
  </script>

<div id="flipbox">Hello! I'm a flip-box! :)</div>  
  <div id="flipPad">  
  <a href="" class="left" rel="rl" rev="#39AB3E" title="Здесь контент блока с поворотом влево">Налево</a>  
  <a href="" class="top" rel="bt" rev="#B0EB17" title="Здесь контент блока с поворотом вверх">Вверх</a>  
  <a href="" class="bottom" rel="tb" rev="#82BD2E" title="Здесь контент блока с поворотом вниз">Вниз</a>  
  <a href="" class="right" rel="lr" rev="#C8D97E" title="Здесь контент блока с поворотом вправо">Вправо</a>  
  <a href="" class="revert">Повторить</a>  
  </div>