<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>